9. webpack 编译 TypeScript

TypeScript的编译

TypeScript 代码是需要转换成 JavaScript 代码
通过 TypeScript 的 compiler 来转换成 JavaScript：npm install typescript -D
TypeScript 的编译配置信息我们通常会编写一个 tsconfig.json 文件：tsc --init
执行 npx tsc来编译 ts 代码：npx tsc

ts-loader 编译

ts-loader 的原理是用了 tsc 编译 ts 文件，编译的时候会对类型进行检测。
安装：npm install ts-loader -D
配置：

{
    test: /\.ts$/,
    exclude: /node_modules/,
    use:[
        "ts-loader"
    ]
}

ts-loader
优点：可以编译 typescript 文件、会对类型进行检测，中断打包。
缺点：没有 polyfill，不会被特定的语法( 例如 promise )进行编译。

let b: number = 'bbbb'

babel-loader 编译

原理：babel 可以主动编译 ts 文件，也可以对特定的语法进行polyfill，缺点是不会对代码进行类型校验。不依赖 tsc
Babel 是有对 TypeScript 进行支持，可以使用ts编译的预设 @babel/preset-typescript
安装： npm install @babel/preset-typescript -D
代码：

// polyfill
import 'core-js/stable'; 
import "regenerator-runtime/runtime";
new Promise((resolve, reject) => {
  resolve(1)
})
// typescript
let a: number = 1
let b: number = 2
function sum(a,b){
  return a+b
}
console.log(sum(a,b))

配置：

            {
                test: /\.ts$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-typescript"]
                    }
                }
            }

不会对类型进行检测，仍然可以打包。

let b: number = 'bbbb'

ts-loader 和 babel-loader区别

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

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

编译 typescript 最佳实践

使用 Babel 来完成代码的转换，使用 tsc 来进行类型的检查。
package.json

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

npm run type-check 可以对 ts 代码的类型进行检测，npm run type-check-watch 可以实时的检测类型错误，可以打包之前先检测语法。