一.什么是Typescript

TypeScript是Javascript的超集，遵循最新的EcmaScript规范。Typescript扩展了Javascript语法。

• Typescript更像后端JAVA,让JS可以开发大型企业级应用
• TS提供的类型系统可以帮助我们在写代码时提供丰富的语法提示
• 在编写代码时会对代码进行类型检查从而避免很多线上错误

TypeScript不会取代JS, 尤雨溪： 我认为将类型添加到JS本身是一个漫长的过程 。让委员会设计一个类型系统是（根据TC39的经历来判断）不切实际的 。

二.环境配置

我们都知道，TypeScript是不能直接在浏览器和node上运行的，他需要编译成js文件，才能正常运行。配置TypeScript环境现在都已经十分方便了。目前几乎所有的编译平台都支持ts文件的编译。在webpack项目里，可以直接配置ts-loader就可以了，或者使用babel的preset-typescript预设也很简单方便。rollup编译的话，也有相应的插件rollup-plugin-typescript，安装配置即可。因为rollup编译的代码更加简介美观，后续文章的实例我们都用rollup进行编译。下面我们来配置一个rollup的ts环境。

1.全局编译TS文件

全局安装typescript，后续可以用tsc命令进行初始化tsconfig文件和对ts文件进行编译。

npm install typescript -g
tsc --init # 生成tsconfig.json

tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件

2.配置rollup环境

• 安装依赖

  npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D
  

• 初始化TS配置文件

  npx tsc --init
  

• rollup配置

// rollup.config.mjs
import ts from "rollup-plugin-typescript2";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import serve from "rollup-plugin-serve";
import path from "path";

const __dirname = path.resolve(); // esmodule里面没有__dirname

export default {
  input: "src/index.ts",
  output: {
    format: "iife",
    file: path.resolve("dist/bundle.js"),
    sourcemap: true,
  },
  plugins: [
    nodeResolve({ // rollup解析node_modules模块
      extensions: [".js", ".ts"],
    }),
    ts({ // 编译ts文件
      tsconfig: path.resolve(__dirname, "tsconfig.json"),
    }),
    serve({ // 提供开发访问服务
      open: true,
      openPage: "/public/index.html",
      port: 3000,
      contentBase: "",
    }),
  ],
};

• 在根目录增加资源文件：src/index.ts 和 public/index.html

• package.json配置

"scripts": {
  "dev": "rollup -c -w"
}

我们可以通过npm run start启动服务来使用typescript啦~

附录

常用的插件：

• rollup-plugin-alias (opens new window): 提供 modules 名称的 alias 和 reslove 能力.
• rollup-plugin-babel (opens new window): 提供 Babel 能力, 需要安装和配置 Babel (这部分知识不在本文涉及)
• rollup-plugin-eslint (opens new window): 提供 ESLint 能力, 需要安装和配置 ESLint (这部分知识不在本文涉及)
• rollup-plugin-node-resolve (opens new window): 解析 node_modules 中的模块
• rollup-plugin-commonjs (opens new window): 转换 CJS -> ESM, 通常配合上面一个插件使用
• rollup-plugin-replace (opens new window): 类比 Webpack 的 DefinePlugin (opens new window) , 可在源码中通过 process.env.NODE_ENV 用于构建区分 Development 与 Production 环境.
• rollup-plugin-filesize (opens new window): 显示 bundle 文件大小
• rollup-plugin-uglify (opens new window): 压缩 bundle 文件
• rollup-plugin-serve (opens new window): 类比 webpack-dev-server (opens new window), 提供静态服务器能力