最近的一段時(shí)間一直在搞TypeScript，一個(gè)巨硬出品、賦予JavaScript語(yǔ)言靜態(tài)類型和編譯的語(yǔ)言。
第一個(gè)完全使用TypeScript重構(gòu)的純Node.js項(xiàng)目已經(jīng)上線并穩(wěn)定運(yùn)行了。
第二個(gè)前后端的項(xiàng)目目前也在重構(gòu)中，關(guān)于前端基于webpack的TypeScript套路之前也有提到過(guò)：TypeScript在react項(xiàng)目中的實(shí)踐。

但是這些做完以后也總感覺(jué)缺了點(diǎn)兒什么 （沒(méi)有盡興）：

是的，依然有五分之一的JavaScript代碼存在于項(xiàng)目中，作為一個(gè)TypeScript的示例項(xiàng)目，表現(xiàn)的很不純粹。
所以有沒(méi)有可能將這些JavaScript代碼也換成TypeScript呢？
答案肯定是有的，首先需要分析這些代碼都是什么：

• Webpack打包時(shí)的配置文件
• 一些簡(jiǎn)單的測(cè)試用例（使用的mocha和chai）

知道了是哪些地方還在使用JavaScript，這件事兒就變得很好解決了，從構(gòu)建工具（Webpack）開(kāi)始，逐個(gè)擊破，將這些全部替換為TypeScript。

Webpack 的 TypeScript 實(shí)現(xiàn)版本

在這8102年，很幸福，Webpack官方已經(jīng)支持了TypeScript編寫(xiě)配置文件，文檔地址。
除了TypeScript以外還支持JSX和CoffeeScript的解釋器，在這就忽略它們的存在了

依賴的安裝

首先是要安裝TypeScript相關(guān)的一套各種依賴，包括解釋器及該語(yǔ)言的核心模塊：

npm install -D typescript ts-node

typescript為這個(gè)語(yǔ)言的核心模塊，ts-node用于直接執(zhí)行.ts文件，而不需要像tsc那樣會(huì)編譯輸出.js文件。

ts-node helloworld.ts

因?yàn)橐赥ypeScript環(huán)境下使用Webpack相關(guān)的東東，所以要安裝對(duì)應(yīng)的types。
也就是Webpack所對(duì)應(yīng)的那些*.d.ts，用來(lái)告訴TypeScript這是個(gè)什么對(duì)象，提供什么方法。

npm i -D @types/webpack

一些常用的pLugin都會(huì)有對(duì)應(yīng)的@types文件，可以簡(jiǎn)單的通過(guò)npm info @types/XXX來(lái)檢查是否存在

如果是一些小眾的plugin，則可能需要自己創(chuàng)建對(duì)應(yīng)的d.ts文件，例如我們一直在用的qiniu-webpack-plugin，這個(gè)就沒(méi)有對(duì)應(yīng)的@types包的，所以就自己創(chuàng)建一個(gè)空文件來(lái)告訴TypeScript這是個(gè)啥：

declare module 'qiniu-webpack-plugin' // 就一個(gè)簡(jiǎn)單的定義即可// 如果還有其他的包，直接放到同一個(gè)文件就行了 // 文件名也沒(méi)有要求，保證是 d.ts 結(jié)尾即可

放置的位置沒(méi)有什么限制，隨便丟，一般建議放到types文件夾下

最后就是.ts文件在執(zhí)行時(shí)的一些配置文件設(shè)置。
用來(lái)執(zhí)行Webpack的.ts文件對(duì)tsconfig.json有一些小小的要求。
compilerOptions下的target選項(xiàng)必須是es5，這個(gè)代表著輸出的格式。
以及module要求選擇commonjs。

{"compilerOptions": {"module": "commonjs","target": "es5","esModuleInterop": true} }

但一般來(lái)講，執(zhí)行Webpack的同級(jí)目錄都已經(jīng)存在了tsconfig.json，用于實(shí)際的前端代碼編譯，很可能兩個(gè)配置文件的參數(shù)并不一樣。
如果因?yàn)橐褂肳ebpack去修改真正的代碼配置參數(shù)肯定是不可取的。
所以我們就會(huì)用到這么一個(gè)包，用來(lái)改變ts-node執(zhí)行時(shí)所依賴的配置文件：tsconfig-paths

在Readme中發(fā)現(xiàn)了這樣的說(shuō)法：If process.env.TS_NODE_PROJECT is set it will be used to resolved tsconfig.json。
在Webpack的文檔中同樣也提到了這句，所以這是一個(gè)兼容的方法，在命令運(yùn)行時(shí)指定一個(gè)路徑，在不影響原有配置的情況下創(chuàng)建一個(gè)供Webpack打包時(shí)使用的配置。

將上述的配置文件改名為其它名稱，Webpack文檔示例中為tsconfig-for-webpack-config.json，這里就直接沿用了

然后添加npm script如下

{"scripts": {"build": "TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack --config configs.ts"} }

文件的編寫(xiě)

關(guān)于配置文件，從JavaScript切換到TypeScript實(shí)際上并不會(huì)有太大的改動(dòng)，因?yàn)閃ebpack的配置文件大多都是寫(xiě)死的文本/常量。
很多類型都是自動(dòng)生成的，基本可以不用手動(dòng)指定，一個(gè)簡(jiǎn)單的示例：

import { Configuration } from 'webpack'const config: Configuration = {mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', }export default config

Configuration是一個(gè)Webpack定義的接口（interface），用來(lái)規(guī)范一個(gè)對(duì)象的行為。
在VS Code下按住Command + 單擊可以直接跳轉(zhuǎn)到具體的webpack.d.ts定義文件那里，可以看到詳細(xì)的定義信息。

各種常用的規(guī)則都寫(xiě)在了這里，使用TypeScript的一個(gè)好處就是，當(dāng)要實(shí)現(xiàn)一個(gè)功能時(shí)你不再需要去網(wǎng)站上查詢應(yīng)該要配置什么，可以直接翻看d.ts的定義。
如果注釋寫(xiě)得足夠完善，基本可以當(dāng)成文檔來(lái)用了，而且在VS Code編輯器中還有動(dòng)態(tài)的提示，以及一些錯(cuò)誤的糾正，比如上述的NODE_ENV的獲取，如果直接寫(xiě)process.env.NODE_ENV || 'development'是會(huì)拋出一個(gè)異常的，因?yàn)閺膁.ts中可以看到，關(guān)于mode只有三個(gè)有效值production、developemnt和none，而process.env.NODE_ENV顯然只是一個(gè)字符串類型的變量。

所以我們需要使用三元運(yùn)算符保證傳入的參數(shù)一定是我們想要的。

以及在編寫(xiě)的過(guò)程中，如果有一些自定義的plugin之類的，可能在使用的過(guò)程中會(huì)拋異常提示說(shuō)某個(gè)對(duì)象不是有效的Plugin對(duì)象，一個(gè)很簡(jiǎn)單的方法，在對(duì)應(yīng)的plugin后邊添加一個(gè)as webpack.Plugin即可。

在這里TypeScript所做的只是靜態(tài)的檢查，并不會(huì)對(duì)實(shí)際的代碼執(zhí)行造成任何影響，就算類型因?yàn)閺?qiáng)行as而改變，也只是編譯期的修改，在實(shí)際執(zhí)行的JavaScript代碼中還是弱類型的

在完成了上述的操作后，再執(zhí)行npm run XXX就可以直接運(yùn)行TypeScript版本的Webpack配置咯。

探索期間的一件趣事

因?yàn)槲业捻?xiàng)目根目錄已經(jīng)安裝了ts-node，而前端項(xiàng)目是作為其中的一個(gè)文件夾存在的，所以就沒(méi)有再次進(jìn)行安裝。
這就帶來(lái)了一個(gè)令人吐血的問(wèn)題。

首先全部流程走完以后，我直接在命令行中輸入TS_NODE_PROJECT=XXX.json NODE_ENV=dev webpack --config ./webpack/dev.ts
完美運(yùn)行，然后將這行命令放到了npm scripts中：

{"scripts": {"start": "TS_NODE_PROJECT=XXX.json NODE_ENV=dev webpack --config ./webpack/dev.ts"} }

再次運(yùn)行npm start，發(fā)現(xiàn)竟然出錯(cuò)了-.-，提示我說(shuō)import語(yǔ)法不能被識(shí)別，這個(gè)很顯然就是沒(méi)有應(yīng)用我們?cè)趖s_NODE_PROJECT中指定的config文件。
剛開(kāi)始并不知道問(wèn)題出在哪，因?yàn)檫@個(gè)在命令行中直接執(zhí)行并沒(méi)有任何問(wèn)題。
期間曾經(jīng)懷疑是否是環(huán)境變量沒(méi)有被正確設(shè)置，還使用了cross-env這個(gè)插件，甚至將命令寫(xiě)到了一個(gè)sh文件中進(jìn)行執(zhí)行。
然而問(wèn)題依然存在，后來(lái)在一個(gè)群中跟小伙伴們聊起了這個(gè)問(wèn)題，有人提出，你是不是全局安裝了ts-node。
檢查以后發(fā)現(xiàn)，果然是的，在命令行執(zhí)行時(shí)使用的是全局的ts-node，但是在npm scripts中使用的是本地的ts-node。
在命令行環(huán)境執(zhí)行時(shí)還以為是會(huì)自動(dòng)尋找父文件夾node_modules下邊的依賴，其實(shí)是使用的全局包。
乖乖的在client-src文件夾下也安裝了ts-node就解決了這個(gè)問(wèn)題。
全局依賴害人。。

測(cè)試用例的改造

前邊的Webpack改為TypeScript大多數(shù)原因是因?yàn)閺?qiáng)迫癥所致。
但是測(cè)試用例的TypeScript改造則是一個(gè)能極大提高效率的操作。

為什么要在測(cè)試用例中使用 TypeScript

測(cè)試用例使用chai來(lái)編寫(xiě)，（之前的Postman也是用的chai的語(yǔ)法）
chai提供了一系列的語(yǔ)義化鏈?zhǔn)秸{(diào)用來(lái)實(shí)現(xiàn)斷言。
在之前的分享中也提到過(guò)，這么多的命令你并不需要完全記住，只知道一個(gè)expect(XXX).to.equal(true)就夠了。

但是這樣的通篇to.equal(true)是巨丑無(wú)比的，而如果使用那些語(yǔ)義化的鏈?zhǔn)秸{(diào)用，在不熟練的情況下很容易就會(huì)得到：

Error: XXX.XXX is not a function

因?yàn)檫@確實(shí)有一個(gè)門檻問(wèn)題，必須要寫(xiě)很多才能記住調(diào)用規(guī)則，各種not、includes的操作。
但是接入了TypeScript以后，這些問(wèn)題都迎刃而解了。
也是前邊提到的，所有的TypeScript模塊都有其對(duì)應(yīng)的.d.ts文件，用來(lái)告訴我們這個(gè)模塊是做什么的，提供了什么可以使用。
也就是說(shuō)在測(cè)試用例編寫(xiě)時(shí)，我們可以通過(guò)動(dòng)態(tài)提示來(lái)快速的書(shū)寫(xiě)斷言，而不需要結(jié)合著文檔去進(jìn)行“翻譯”。

使用方式

如果是之前有寫(xiě)過(guò)mocha和chai的童鞋，基本上修改文件后綴+安裝對(duì)應(yīng)的@types即可。
可以直接跳到這里來(lái)：開(kāi)始編寫(xiě)測(cè)試腳本
但是如果對(duì)測(cè)試用例感興趣，但是并沒(méi)有使用過(guò)的童鞋，可以看下邊的一個(gè)基本步驟。

安裝依賴

TypeScript相關(guān)的安裝，npm i -D typescript ts-node

Mocha、chai相關(guān)的安裝，npm i -D mocha chai @types/mocha @types/chai

如果需要涉及到一些API的請(qǐng)求，可以額外安裝chai-http，npm i -D chai-http @types/chai-http

環(huán)境的依賴就已經(jīng)完成了，如果額外的使用一些其他的插件，記得安裝對(duì)應(yīng)的@types文件即可。
如果有使用ESLint之類的插件，可能會(huì)提示modules必須存在于dependencies而非devDependencies
這是ESLint的import/no-extraneous-dependencies規(guī)則導(dǎo)致的，針對(duì)這個(gè)，我們目前的方案是添加一些例外：

import/no-extraneous-dependencies:- 2- devDependencies:- "**/*.test.js"- "**/*.spec.js"- "**/webpack*"- "**/webpack/*"

針對(duì)這些目錄下的文件/文件夾不進(jìn)行校驗(yàn)。是的，webpack的使用也會(huì)遇到這個(gè)問(wèn)題

開(kāi)始編寫(xiě)測(cè)試腳本

如果是對(duì)原有的測(cè)試腳本進(jìn)行修改，無(wú)外乎修改后綴、添加一些必要的類型聲明，不會(huì)對(duì)邏輯造成任何修改。

一個(gè)簡(jiǎn)單的示例

// number-comma.ts export default (num: number | string) => String(num).replace(/\B(?=(\d{3})+$)/g, ',')// number-comma.spec.ts import chai from 'chai' import numberComma from './number-comma'const { expect } = chai// 測(cè)試項(xiàng) describe('number-comma', () => {// 子項(xiàng)目1it('`1234567` should transform to `1,234,567`', done => {expect(numberComma(1234567)).to.equal('1,234,567')done()})// 子項(xiàng)目2it('`123` should never transform', done => {const num = 123expect(numberComma(num)).to.equal(String(num))done()}) })

如果全局沒(méi)有安裝mocha，記得將命令寫(xiě)到npm script中，或者通過(guò)下述方式執(zhí)行

./node_modules/mocha/bin/mocha -r ts-node/register test/number-comma.spec.ts# 如果直接這樣寫(xiě)，會(huì)拋出異常提示 mocha 不是命令 mocha -r ts-node/register test/number-comma.spec.ts

mocha有一點(diǎn)兒比較好的是提供了-r命令來(lái)讓你手動(dòng)指定執(zhí)行測(cè)試用例腳本所使用的解釋器，這里直接設(shè)置為ts-node的路徑ts-node/register，然后就可以在后邊直接跟一個(gè)文件名（或者是一些通配符）。

目前我們?cè)陧?xiàng)目中批量執(zhí)行測(cè)試用例的命令如下：

{"scripts": {"test": "mocha -r ts-node/register test/**/*.spec.ts"} }

npm test可以直接調(diào)用，而不需要添加run命令符，類似的還有start、build等等

一鍵執(zhí)行以后就可以得到我們想要的結(jié)果了，再也不用擔(dān)心一些代碼的改動(dòng)會(huì)影響到其他模塊的邏輯了 （前提是認(rèn)真寫(xiě)測(cè)試用例）

小結(jié)

做完上邊兩步的操作以后，我們的項(xiàng)目就實(shí)現(xiàn)了100%的TypeScript化，在任何地方享受靜態(tài)編譯語(yǔ)法所帶來(lái)的好處。
附上更新后的代碼含量截圖：

最近針對(duì)TypeScript做了很多事情，從Node.js、React以及這次的Webpack與Mocha+Chai。
TypeScript因?yàn)槠浯嬖谝粋€(gè)編譯的過(guò)程，極大的降低了代碼出bug的可能性，提高程序的穩(wěn)定度。
全面切換到TypeScript更是能夠降低在兩種語(yǔ)法之間互相切換時(shí)所帶來(lái)的不必要的消耗，祝大家搬磚愉快。

之前關(guān)于 TypeScript 的筆記

• TypeScript在node項(xiàng)目中的實(shí)踐
• TypeScript在react項(xiàng)目中的實(shí)踐

一個(gè)完整的 TypeScript 示例

typescript-example

歡迎各位來(lái)討論關(guān)于TypeScript使用上的一些問(wèn)題，針對(duì)穩(wěn)重的感覺(jué)不足之處也歡迎指出。

參考資料

• ts-node
• configuration-languages | webpack
• mochajs
• chaijs

轉(zhuǎn)載于:https://www.cnblogs.com/jiasm/p/9577715.html

總結(jié)

以上是生活随笔為你收集整理的使用 TypeScript 改造构建工具及测试用例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。