前端圈新寵TypeScript，在前端團(tuán)隊(duì)引入實(shí)踐總結(jié)

你是否經(jīng)常在文章中見(jiàn)到 “你還沒(méi)有用TypeScript么，都2020年了！” 這樣的標(biāo)語(yǔ)？今天我們就來(lái)探究一下TypeScript的優(yōu)缺點(diǎn)。

此篇文章適用于沒(méi)接觸過(guò)TypeScript的人、僅讀過(guò)文檔但無(wú)實(shí)際項(xiàng)目操作的人，筆者希望借此文章可以給大家提供一個(gè)思路，便于以上兩種類(lèi)型的讀者做出選擇。如果你是TypeScript老鳥(niǎo)，這篇文章可能并不適用于你，但是歡迎閱讀并一起討論。

什么是TypeScript？

TypeScript是一種由微軟開(kāi)發(fā)的開(kāi)源、跨平臺(tái)的編程語(yǔ)言。它是JavaScript的超集，最終會(huì)被編譯為JavaScript代碼。

TypeScript添加了可選的靜態(tài)類(lèi)型系統(tǒng)和很多尚未正式發(fā)布的ECMAScript新特性。

TypeScript支持任意瀏覽器，任意環(huán)境，任意系統(tǒng)并且是開(kāi)源的。

先列優(yōu)缺點(diǎn):

優(yōu)點(diǎn)：

1. 靜態(tài)類(lèi)型
2. 方便閱讀
3. 減少bug
4. 社區(qū)活躍

缺點(diǎn)：

1. 學(xué)習(xí)成本
2. 開(kāi)發(fā)效率的降低
3. 部分三方庫(kù)的兼容
4. 需要編譯

靜態(tài)類(lèi)型

我們都知道，JavaScript是一個(gè)弱類(lèi)型，且是動(dòng)態(tài)類(lèi)型的腳本語(yǔ)言。筆者大學(xué)期間第一次接觸JavaScript時(shí)簡(jiǎn)直驚呆了，這也太幸福了吧！什么變量都可以var一下，變量還可以隨便賦值，函數(shù)的返回值類(lèi)型？我再也不用關(guān)心這些亂七八糟的東西了，這才是語(yǔ)言應(yīng)該有的樣子?。?/p>

但是隨著做過(guò)的項(xiàng)目越來(lái)越多，這里要加一個(gè)類(lèi)型判斷，那里也要進(jìn)行一次類(lèi)型轉(zhuǎn)換，我漸漸意識(shí)到，這個(gè)問(wèn)題不是看到的那樣簡(jiǎn)單，想到這里，我不禁把目光投向了“幸福的罪魁禍?zhǔn)住保骸办o態(tài)類(lèi)型”。

你是否經(jīng)常要寫(xiě)這種類(lèi)似的代碼？

const?data?=?typeof?params?===?'object'?
???params.data?
?:?JSON.parse(params).data;
?
if?(typeof?unix?===?'string')?{
?unix?=?parseInt(unix);
}

試想一下：

你花了一下午的時(shí)間，搞出來(lái)一個(gè)自認(rèn)為完美的函數(shù)。

然后小明1號(hào)拿去調(diào)用一下，程序崩潰了。

你查了一下原因：啊，原來(lái)是參數(shù)的類(lèi)型傳錯(cuò)了，趕緊補(bǔ)文檔補(bǔ)注釋說(shuō)明一下。

然后小明2號(hào)拿去調(diào)用了一下，程序崩潰了。

你查了一下原因：啊，原來(lái)是參數(shù)的類(lèi)型傳錯(cuò)了，你趕緊叮囑大家使用時(shí)看文檔。

然后小明3號(hào)拿去調(diào)用了一下，程序崩潰了。

你查了一下原因：啊，參數(shù)類(lèi)型沒(méi)錯(cuò)，但是參數(shù)對(duì)象里面的值的類(lèi)型傳錯(cuò)了，你???@#&!!!...只能寫(xiě)上一堆判斷和轉(zhuǎn)換，讓自己的程序更“健壯”。

上面的例子比較極端，但是我們確確實(shí)實(shí)在經(jīng)常遇到，那如果js是靜態(tài)類(lèi)型的會(huì)是什么樣子呢？

你花了一下午的時(shí)間，搞出來(lái)一個(gè)自認(rèn)為完美的函數(shù)。

然后小明1號(hào)拿去調(diào)用一下。

小明1號(hào)發(fā)現(xiàn)參數(shù)類(lèi)型傳錯(cuò)，自己去修改了一下，沒(méi)來(lái)煩你，你甚至注釋都懶得寫(xiě)，就開(kāi)心的下班了。

方便閱讀、維護(hù)

類(lèi)型系統(tǒng)實(shí)際上也是一個(gè)非常實(shí)用的文檔，大部分的函數(shù)通過(guò)查看類(lèi)型的定義就可以知道如何使用，并且在vscode（此處使用vscode來(lái)代表所有代碼編輯器）里面去編寫(xiě)TypeScript時(shí)，vscode會(huì)根據(jù)你當(dāng)前的上下文，把你能用的類(lèi)、變量、方法和關(guān)鍵字都提示出來(lái)，一目了然。不僅如此，TypeScript的特性還增強(qiáng)了vscode的功能，包括代碼補(bǔ)全、接口提示和點(diǎn)擊跳轉(zhuǎn)等等

如下圖，我們可以很清晰的通過(guò)index.d.ts這個(gè)文件了解到cors這個(gè)函數(shù)的參數(shù)類(lèi)型：

代碼提示：

那如果我不用TypeScript只使用d.ts不就好了么？

當(dāng)然也可以，只要你不嫌麻煩的話，因?yàn)閐.ts文件在TypeScript里面一般都是用tsc自動(dòng)生成的。

減少bug

在最上面的例子中，我們已經(jīng)看到了vscode等IDE都會(huì)做出類(lèi)型檢查，可以將很多類(lèi)型錯(cuò)誤直接提示出來(lái)，這一點(diǎn)在多人開(kāi)發(fā)，和維護(hù)大型項(xiàng)目時(shí)尤為重要，項(xiàng)目復(fù)雜，函數(shù)和變量繁多時(shí)經(jīng)常出現(xiàn)一個(gè)人改了一點(diǎn)點(diǎn)東西，導(dǎo)致項(xiàng)目崩潰的情況，在TypeScript上面這種情況會(huì)大大減少。

但是值得注意的是，使用TypeScript也只能避免一部分錯(cuò)誤，不能一勞永逸，平時(shí)遵守嚴(yán)格的編碼規(guī)范，配置eslint，代碼review，以及編寫(xiě)單元測(cè)試等環(huán)節(jié)依然很重要！

社區(qū)活躍

繼Angular之后，React，Vue都相繼開(kāi)始支持TypeScript，尤其是2019年更是TypeScript爆發(fā)性增長(zhǎng)的一年，大部分第三方庫(kù)都開(kāi)始有提供給TypeScript的類(lèi)型定義文件。

學(xué)習(xí)成本

TypeScript因?yàn)槭窃贘avaScript的基礎(chǔ)上擴(kuò)展，所以真正的學(xué)習(xí)成本并不大，但畢竟是靜態(tài)類(lèi)型，而且需要理解接口、泛型、類(lèi)、枚舉類(lèi)型新的概念，對(duì)于習(xí)慣了JavaScript語(yǔ)言的人來(lái)說(shuō)很難習(xí)慣，導(dǎo)致了很多前端工程師聽(tīng)見(jiàn)TypeScript的第一反應(yīng)都是拒絕，尤其是在看了用TypeScript編寫(xiě)的項(xiàng)目后。

而且如果你想要在現(xiàn)有項(xiàng)目中充分體驗(yàn)TypeScript，你又將面臨異常高昂的切換成本。

開(kāi)發(fā)效率的降低

雖然類(lèi)型系統(tǒng)自帶文檔，可以省去很多編寫(xiě)注釋的時(shí)間，但是筆者親身經(jīng)歷，為所有值填上類(lèi)型真的痛苦，筆者在參與同事編寫(xiě)的h264播放器時(shí)，分分鐘想切腹自盡。

你以為要寫(xiě)的：

你實(shí)際要寫(xiě)的：

人世間最痛苦的事情莫過(guò)于此，我5分鐘寫(xiě)個(gè)方法，1小時(shí)才配齊文檔。

雖然TypeScript提供了Any類(lèi)型，但是使用它的同時(shí)也失去了TypeScript的優(yōu)勢(shì)，建議不要使用。

部分三方庫(kù)的兼容

隨著TypeScript的愈加火爆，很多依賴(lài)包都支持了TypeScript，但是依然有一部分還沒(méi)有支持，如果你的項(xiàng)目剛好依賴(lài)了它們而你還想使用TypeScript的話，那你就需要為他添加一個(gè)d.ts文件才可以使用，添加的過(guò)程有多麻煩，我只想說(shuō)祝你好運(yùn)。

需要編譯

JavaScript是標(biāo)準(zhǔn)，是可以直接在瀏覽器運(yùn)行的，這一點(diǎn)對(duì)于需要編譯的TypeScript來(lái)說(shuō)，是一個(gè)很大的優(yōu)點(diǎn)。

我們對(duì)于TypeScript的使用

我們團(tuán)隊(duì)目前使用TypeScript編寫(xiě)的項(xiàng)目：1、h264播放器 2、錯(cuò)誤日志后臺(tái)

未來(lái)一段時(shí)間準(zhǔn)備使用TypeScript編寫(xiě)的項(xiàng)目：1、pc官網(wǎng)服務(wù)端重構(gòu) 2、內(nèi)部組件庫(kù)

綜合考慮

在開(kāi)始播放器項(xiàng)目之前我們主要是基于以下幾點(diǎn)考慮：

1. 對(duì)新技術(shù)的嘗試。組內(nèi)人員對(duì)新技術(shù)的熱忱度都很高，希望通過(guò)一個(gè)項(xiàng)目來(lái)實(shí)踐TypeScript。
2. 播放器是一對(duì)多類(lèi)型的項(xiàng)目。使用播放器的人多且雜，難以保證都能按照文檔規(guī)范使用，我們希望過(guò)濾掉一些低級(jí)問(wèn)題反饋。
3. 多人協(xié)作。播放器項(xiàng)目龐大，且音視頻信息在各個(gè)函數(shù)中多是引用類(lèi)型傳遞和修改，對(duì)于類(lèi)型系統(tǒng)的需求大，每個(gè)人來(lái)編寫(xiě)時(shí)都可以避免類(lèi)型錯(cuò)誤，并且方便獲取參數(shù)類(lèi)型進(jìn)行操作。
4. 代碼規(guī)范化。開(kāi)源項(xiàng)目，所以代碼越規(guī)范越好，TypeScript便于理解，并配有詳細(xì)的文檔。
5. 新項(xiàng)目。從頭開(kāi)發(fā)，沒(méi)有重構(gòu)老代碼的成本。

pc官網(wǎng)服務(wù)端重構(gòu)我們主要是基于以下幾點(diǎn)考慮：

1. 接口返回值固定類(lèi)型。雖然有接口文檔，但是之前的接口交互時(shí)還是會(huì)經(jīng)常出現(xiàn)php端需要進(jìn)行類(lèi)型強(qiáng)制轉(zhuǎn)換，或者js端進(jìn)行類(lèi)型強(qiáng)制轉(zhuǎn)換，很麻煩，用TypeScript可以很好的解決這個(gè)問(wèn)題
2. 持續(xù)維護(hù)。pc官網(wǎng)的服務(wù)端部分都是需要持續(xù)維護(hù)的代碼，使用TypeScript可以方便大家閱讀和后續(xù)擴(kuò)展、重構(gòu)。
3. 不同系統(tǒng)之間類(lèi)型獲取。開(kāi)發(fā)人員不太可能清楚每個(gè)系統(tǒng)的數(shù)據(jù)結(jié)構(gòu)，如果去閱讀又會(huì)浪費(fèi)大量時(shí)間，TypeScript可以直接查詢(xún)到需要的數(shù)據(jù)結(jié)構(gòu)并在編寫(xiě)時(shí)代碼提示。

有很多人會(huì)問(wèn)，TypeScript會(huì)不會(huì)像CoffeeScript一樣，在JavaScript引入標(biāo)準(zhǔn)后逐漸被拋棄，那我們還有學(xué)習(xí)的必要么？

這一點(diǎn)筆者認(rèn)為，有很大可能是這樣的，但是我們沒(méi)辦法確定這個(gè)等待期有多長(zhǎng)，即便是后續(xù)會(huì)被JavaScript引入標(biāo)準(zhǔn)，在這之前你就可以享受到上面我們所說(shuō)的便利，這不香么？

結(jié)論

是否使用TypeScript，筆者認(rèn)為在做出選擇之前，你需要認(rèn)真的衡量一下投入產(chǎn)出比，TypeScript帶來(lái)的優(yōu)勢(shì)是否對(duì)當(dāng)前的項(xiàng)目有很大提升，是否值得花費(fèi)大量的時(shí)間去對(duì)現(xiàn)有項(xiàng)目進(jìn)行重構(gòu)，值得注意的一點(diǎn)是，不管TypeScript最終會(huì)不會(huì)被應(yīng)用到項(xiàng)目中，你都應(yīng)該學(xué)會(huì)掌握它了，不要人云亦云。

最后，對(duì)于取舍問(wèn)題，筆者的建議是：如果你的項(xiàng)目是大型項(xiàng)目，第三方庫(kù)，或者其他需要持續(xù)維護(hù)的項(xiàng)目，上TypeScript吧；如果你的項(xiàng)目是活動(dòng)，分享頁(yè)面，等短周期并且不需要持續(xù)維護(hù)的項(xiàng)目，想用哪個(gè)用哪個(gè)，這里我想說(shuō)，動(dòng)態(tài)類(lèi)型的爽還是真的爽。

最后

點(diǎn)個(gè)在看支持我吧，轉(zhuǎn)發(fā)就更好了