TypeScript实战-24-TS的编译工具

一,前言

前面的工程中,为了将ts文件编译称为js文件,使用了webpack-loader:ts-loader

webpack.base.config.js:

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

---

二,webpack-loader之ts-loader

ts-loader内部源码调用了ts编译器(即tsc),
所以,ts-loader和tsc都使用tsconfig.json中的配置

另外,ts-loader还有自己独有的配置,可通过options属性传入

transpileOnly属性:

module: {
    // loader
    rules: [
        {
            test: /\.tsx?$/,
            use: [{
                loader: 'ts-loader',
                option: {
                	// 开启时:编译器仅做语言转换不做类型检查
                    transpileOnly: false 
                }
            }],
            exclude: /node_modules/
        }
    ]
},

在实际项目中,随着项目越来越大,编译时间会越来越长
原因之一就是ts编译器要做语言转换和类型检查
开启后仅做语言转换不做类型检查,构建速度加快

但是,这样在编译时就不能进行类型检查了

此时,错误的类型赋值依然会触发IDE报错,但不会阻止编译

如何在transpileOnly为true时,进行类型检查?

安装fork-ts-checker-webpack-plugin插件
npm i fork-ts-checker-webpack-plugin -D
这样类型检查将会在独立的进程中进行

const forkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = {
	...
	plugins: [
	   // 根据模板生成
	    new HtmlWebpackPlugin({
	        template: './src/tpl/index.html'
	    }),
	    new forkTsCheckerWebpackPlugin()
	]
	...
}

配置完成后,transpileOnly为true时,依然会执行类型检查

---

三,awesome-typescript-loader

安装 :

npm i awesome-typescript-loader -D

使用:

const { CheckerPlugin } = require('awesome-typescript-loader')

module.exports = {
	...
	plugins: [
	   // 根据模板生成
	    new HtmlWebpackPlugin({
	        template: './src/tpl/index.html'
	    }),
	    new CheckerPlugin()
	]
	...
}

注意:

awesome-typescript-loader 的类型检查会有遗漏,但速度较快
ts-loader加入类型检查后的构建时间较长

所以,综合看,还是使用ts-loader默认配置更好一些

awesome-typescript-loader和ts-loader比较:

1,更适合与Babel集成,使用babel的转义和缓存
2,不需要安装额外拆件,就可以把类型检查放在独立进程中进行

---

四,Babel

Babel和tsc都可以将ts(x), js(x)编译称为es3/5/6/及更高版本
tsc具有类型检查功能而Babel没有,但Babel具有非常丰富的插件,生态完善

注意:

在Babel7之前,不支持TS,早起使用Babel的项目使用TS不是很容易
需要使用ts-loader将ts文件转译成js文件,再交给babel进行处理

Babel7之后就支持了TS,不需要各种loader,在编译时也不需要TS
TS仅做Babel不能做的事情:类型检查

---

五,使用Babel编译TS

babel插件:

@babel/cli					// Babel必须:
@babel/core				// Babel必须:
@babel/preset-env		// Babel必须:
@babel/preset-typescript	// 编译TS文件
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread	// 支持剩余,扩展操作符

babel配置文件.babelrc中引入插件

{
	"presets": [
		"@babel/env",
		"@babel/preset-typescript"
	],
	"plugins": [
		"@babel/proposal-class-properties",
		"@babel/preset-proposal-object-rest-spread"
	],
}

编译脚本:

"scripts":{
	"build": "babel src --out-diir dist --extensions \".ts, .tsx\""	// babel不能自动识别ts和tsx文件,所以需要指定扩展名
}

src/index.ts:

class A {
	a: number = 1
}

let { x, y, ...z } = { x:1, y: 2, a: 3, b: 4 }
let n = { x, y, ...z }

编译:

npm run build

---

六,使用Babel时的类型检查

安装ts:

npm i typescript -D

创建配置文件:tsconfig.json,设置noEmiit=true制作类型检查

tsc init

添加类型检查脚本,开启ts监控模式:

{
	"script":{
		"type-check": "tsc --watch"
	}
}

在新的终端中,执行类型检测脚本,对代码实时监控

npm run type-check

---

七,Babel中不能编译的4种语法

1,命名空间

命名空间在Babel中编译会报错,不要使用

namespace N {
	export const n = 1
}

2,类型断言的写法

class A {
	a: number = 1
}

let s = {} as A
s.a = 1

类型断言使用as 不要使用<>

3,常量枚举

const enum E { A }

4,默认导出

export = s

---

八,结尾

本篇介绍了TS的编译工具:

1,webpack-loader:ts-loader
2,awesome-typescript-loader
3,Babel

如何选择编译工具:

1,新工程,使用TS编译器(类型检测),配合ts-loader(编译)
2,项目已使用Babel,可使用@babel/preset-typescript做语言转换,配合tsc(类型检查)

但是,不要混用这两种编译工具