在项目开发中,我们会使用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可以实时的检测类型错误。
注意!!!必须有tsconfig.json文件{
"scripts": {
"build": "webpack --config wk.config.js",
"type-check": "tsc --noEmit",
"type-check-watch": "tsc --noEmit --watch"
}
}