TypeScript

在项目开发中，我们会使用TypeScript来开发，那么最终TypeScript代码是需要转成JS代码的。

1.TypeScript的命令行使用

1）安装

可以通过TypeScript的compiler来转换成JavaScript。
npm i typescript -g

2）TypeScript的配置文件 - tsconfig.json

另外，Typescript的编译配置信息我们通常会编写一个tsconfig.json文件。
tsc —init // 初始化tsconfig.json文件

3）运行

之后我们可以运行 npx tsc来编译自己的ts代码。
tsc ./index.ts

2.在webpack中使用TS - 使用ts-loader

1）安装

如果我们希望在webpack中使用TypeScript，那么我们可以使用ts-loader来处理ts文件。
npm i -D ts-loader

2）在webpack.config.js中配置

module.exports = {
  module: {
    rules: [
        test: /\.ts$/,
        exclude: /node_modules/,
        use: 'ts-loader'
      }
    ]
  }
}

3.在webpack中使用TS - 使用babel-loader

除了可以使用TypeScript Compiler来编译TypeScript之外，我们也可以使用Babel：

• Babel是有对TypeScript进行支持；
• 我们可以使用插件： @babel/tranform-typescript；
• 但是更推荐直接使用preset：@babel/preset-typescript（推荐！！！）

1）安装 @babel/preset-typescript

npm i -D @babel/preset-typescript

2）在webpack.config.js中配置

module.exports = {
  entry: './src/main.ts', // ts入口文件
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

3）在.babelrc文件中配置

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }],
    ['@babel/preset-typescript']
  ],
}

4.ts-loader 和 babel-loader 选择

那么我们在开发中应该选择ts-loader还是babel-loader呢？

1）如果使用ts-loader（TypeScript Compiler）：

• ts-loader如果直接编译TypeScript，那么只能将ts转换成js；
• 如果我们还希望在这个过程中添加对应的polyfill，那么ts-loader是无能为力的；所以，我们需要借助于babel来完成polyfill的填充功能。

2）如果使用babel-loader（Babel）：

• babel-loader如果直接编译TypeScript，也可以将ts转换成js，并且可以实现polyfill的功能；但是babel-loader在编译的过程中，不会对类型错误进行检测。

那么，在开发中，我们如何可以同时保证以上两种情况都没有问题呢？

5.在webpack中编译TypeScript的最佳实践

事实上TypeScript官方文档有对其进行说明：

也就是说我们使用Babel来完成代码的转换，使用tsc来进行类型的检查！！！
但是，如何可以使用tsc来进行类型的检查呢？

• 在这里，我在scripts中添加了两个脚本，用于类型检查；
• 我们执行 npm run type-check可以对ts代码的类型进行检测；
• 我们执行 npm run type-check-watch可以实时的检测类型错误。

  {
  "scripts": {
    "build": "webpack --config wk.config.js",
    "type-check": "tsc --noEmit",
    "type-check-watch": "tsc --noEmit --watch"
  }
  }

  注意！！！必须有tsconfig.json文件