typescript编译工具
1. ts-loader
loader: "ts-loader"
options: {
transpileOnly: false
}
- 默认关闭,
- 开启后编译速度变快,但是没有类型检查
如果想在开启的情况下去做类型检查可以使用:
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin")
plugins: [
new ForkTsCheckerWebpackPlugin()
]
然后构建可以类型检查了
2. awesome-typescript-loader
- 更适合与babel集成,使用 babel 的转义和缓存
- 不需要额外的插件,就可以把类型检查放在独立进程中进行
const {CheckerPlugin} = require("awesome-typescript-loader")
use: [
loader: "awesome-typescript-loader"
options: {
transpileOnly: false
}
]
plugins: [
new CheckerPlugin()
]
这里有个缺点就是,类型检查有缺陷;
- 有了typesctipt 为什么还要babel
babel7之前:不支持ts
TS -> tsc(ts-loader/awesome-typescript-loader)->js->babel->js
babel7之后:支持ts,但是不能做类型检查
- 用babel转义TS
TS-> babel->JS
- 用tsc(type checking)做类型检查
// package.json
"@babel/preset-typescript": "7.3.3" //解析ts
// .babelrc
{
"presets": [
"@babel/'env",
"@babel/preset-typescript"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}
如果要做类型检查,安装ts
// tsconfig.json
"noEmit": true
// package.json
"script": {
"type-check": "tsc --watch"
}
noEmit
这个选项开启后表示,ts不做任何输出,制作类型检查;
ts中使用babel注意事项
// 命名空间
namespace X {
export const x = 1
}
// 类型断言写法只能用as不能使用尖括号
let s = {} as A
//常量枚举
const enum E {A}
//默认导出
export = s
如果么有使用babel,首选Typescript自身编译,配合ts-loader使用
如果项目中已经使用了babel,安装@babel/preset-typescript(配合tsc做类型检查)
两种编译工具不要混用
代码检查工具
Typescript官方转向ESLint的原因:
- TSLint存在架构问题,从而影响性能,如果修复这些性能就会破坏现有规则;
- ESLint的性能更好,并且社区用户通常拥有ESLint的规则配置(比如针对react、vue的规则),而不会拥有TSLint的规则
如何在ts中使用eslint
"@typescript-eslint/eslint-plugin": "^1.10.2",// elsint识别ts的一些特殊语法
"@typescript-eslint/parser": "^1.10.2",// 为eslint提供解析器
// .babelrc
{
"presets": "@babel/preset-typescript",
"parserOptions": {
"project": "./tsconfig.json",
},
"plugins": [
"pulgin:@typescript-eslint/recommended"
]
}
// package.json
"script": {
"lint": "eslint src --ext .js,.ts"
}
babel-eslint: 支持typescript没有的额外语法检查,抛弃typescript,不支持类型检查
typescript-eslint: 基于typescript的ast,支持创建基于类型信息的规则(tsconfig.json)
不要共用