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(類型檢查)

但是,不要混用這兩種編譯工具