# typescript compiler 的使用
## 安装typescript编译器tsc（typescript compiler）
1. 全局安装的TypeScript，直接运行 tsc
`npm install typescript -g`
2. 局部安装，运行typescript，需要用npx
`npm install typescript -D`
# ts-loader
1. 安装 ts-loader
`npm i ts-loader -D`
2. webpack 配置
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
3. 配置 tsconfig.json，没有这个文件编译时会报错：The 'files' list in config file 'tsconfig.json' is empty.
运行 `tsc --init` // 前提是全局安装了 typeScript
会在根目录创建 tsconfig.json
注：ts-loader依赖于tsc，用tsc来将typescript转成javascript，但是它不会对tsc中的新特性，如 promise、let、const进行ES5的转换。
# babel转typescript
## babel转typescript，不需要 ts-loader，并且对 ts-loader中的新特性也能转成低版本js
## webpack配置
1. 安装presets预设
```
npm i @babel/preset-typeScript -D
```
2. webpack中配置：
module: {
rules: [
{
test: /\.ts$/,
use: 'babel-loader'
}
]
}
3. babel.config.js 中配置
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3
}],
['@babel/preset-typescript']
]
}
# ts-loader 和 babel-loader 选择
1. ts-loader 会对类型进行检测，babel-loader 不会
2. babel-loader 会对 ts 中的promise等更先进的语法 用 polyfill 进行转译，ts-loader 不会
3. 可以在打包之前做个检测，在package.json中配置命令：
```
"script": {
"type-check": "tsc --noEmit" // 用tsc检测，但不打包
}
```
或者
```
"script": {
"type-check": "tsc --noEmit --watch" // 用tsc检测，并且是实时监测，除非ctrl+c打断
}
```
4. 打包，还用 babel-loader