使用TypeScript兩年之後：真香嗎？

作者 | Kamil Zagrabski

譯者 | 無明

大約在兩年前，我所在的一個小型的敏捷團隊啟動了一個全新的項目。微服務、Docker、React、Redux，這些花哨的東西都用上了。

我在這些前端技術方面有一些經驗，因為我去年花了一年時間在一個由 20 多名前端開發人員開發的大型 React 項目上。這對我來說非常具有挑戰性。當時我們碰到了很多問題：模型內聚性問題、代碼庫增長、複雜且難以維護的 API、介面不一致，難以跟蹤的運行時異常。

在開始新項目之前，我決定先找到解決這些問題的方法。我想也許問題出在編程語言本身上，因為它有點太過靈活和寬容了。你可以輸入任何東西，因為不需要編譯，沒有約束和運行前代碼驗證，所以捆綁包中可能會包含嚴重的 bug。

然後我遇到了 Flowtype 和 TypeScript。經過短暫的評估，我決定選用 TypeScript。兩年之後，也就是現在，我可以告訴你——這對這個項目和我的職業生涯來說都是個不錯的選擇。但是，如果你認為 TypeScript 開發人員的生活從此就是一路繁花，那麼你最好先讀完這篇文章再說。

在本文中，我不想詳細說明 TypeScripts 的特性或者深入介紹項目的搭建。我想講的是 TypeScript 好處和缺點。我想講述一下我在使用 TypeScript 過程中感受到的最糟糕的體驗，然後再介紹一些我認為最有用的 TypeScript 特性。

搭建項目

因為我之前有過一些 React 和 Redux 經驗，所以我想基於這些經驗在新項目中使用類似的設置——Webpack、Babel、NPM 腳本、Jest、Linter，只是額外增加了 TypeScript 支持。

如果你現在面臨跟我類似的情況，我可以向你保證：這絕對不只修改 Webpack 配置的一個載入器條目那麼簡單。我必須為 TS 提供專門的配置，用 TSLint 替換 ESLint，集成 TypeScript 載入器和 Babel，將 TS 集成到 Jest 中。

很快，一些令人失望的事情發生了。TS 配置並不簡單，「複製然後測試」的策略並不是很好地總能奏效。

就連將 tsconfig.json 加入到項目中這樣的事情都要仔細地參考文檔。

此外，Jest 和 CSS 模塊存在一些問題。你遲早也會遇到這些問題。而且不要認為現在可以拋棄 Babel 了——TypeScript 不會為新特性提供任何 polyfill，也不會將新 API 轉換為舊瀏覽器可以理解的代碼。

所以我的建議是——如果可以的話，考慮使用一些項目啟動工具或支持 TS 的 CLI，把自己從繁雜的項目配置中解救出來。

庫的支持

我的另一個非常不愉快的體驗與 TypeScript 支持的庫數量有關。

如果你是 NPM 包的作者，你通常會提供隨時可用的 JavaScript 包。有時候，你還會公開 ES6 源代碼。如果你要讓庫支持 TypeScript，必須提供類型定義。簡單來說就是一個包含模塊、命名空間、類、方法、函數等內容的聲明性文件。TypeScript 模塊只能使用文件中所描述的內容，並且只能通過聲明中所指定的方式使用它們。可惜的是，源代碼和聲明文件之間通常沒有嚴格的聯繫。它們可能無法保持一致，或者過時了，或者丟失了。

對於我來說，丟失聲明並不是個大問題。大多數流行庫的作者或社區都會準備好類型定義。如果你使用的包沒有這樣的文件，就使用其他的，NPM 上有很多包提供了相同的功能。你也可以自己準備「虛擬」的定義，或自己創建定義，並貢獻給開源社區。

但不管怎樣，還有另一個更嚴重的問題——一些聲明是不正確的，或者過時了。如果你遇到這樣的問題，要解決這個問題就沒那麼容易了。你可以使用舊版本的包，或者自行進行修復，或者等待作者更新。不過有時候他們反應很快，有時候也很慢。

順便說一句，我也是一些簡單包的作者。相信我，即使開發包的意願是好的，我仍然難免會忘記將新特性與類型定義進行同步。

日常工作

現在說一些好的方面吧。在搭建好項目並選擇了具有良好 TS 支持的庫之後，就可以享受類型語言所帶來的強大功能了。如果你沒有使用這門語言的經歷，在一開始可能感覺有點奇怪。TypeScript 中有許多特性在當前的 JavaScript 中是沒有的。接下來我將介紹在我看來最有用的一些特性。

類型

靜態類型是 TS 最常用的特性。如果不使用嚴格類型，那麼使用 TypeScript 就沒有意義了。當然，你也可以使用寬容的「any」類型，這意味著「我不關心那個東西是什麼類型，它可能是一個數字，也可能是一個字元串數組」。但說實在的，如果你想這樣寫代碼，好不如直接使用 JavaScript。

類型可以提升編碼速度，寫出更安全的代碼。你可以告訴編譯器：「這個常量將指向一個數字」，如果你試圖將其用作數組或字元串，TS 編譯器會提示錯誤。基本上，你仍然可以使用這些對象做任何你想做的事情，就像在 JavaScript 中一樣，只是現在你的操作比以前更安全、更容易理解了。

在下面你可以看到一些基本但非常強大的東西，對於更高級的類型，請參考文檔：

https://www.typescriptlang.org/docs/handbook/advanced-types.html。

除了眾所周知的類型，如數字或字元串，TypeScript 還提供了枚舉。

你可以使用內置類型，如 Date 或 Error。藉助代碼提示可以以實現更快、更安全的編程。

介面

如果你認為類型是「遊戲規則改變者」，那麼介面呢？介面可以幫你寫出更好的代碼，因為你可以用它們定義對象之間的契約。我創建了很多介面，它們無處不在。有時我會把介面放在專門的文件中。

我主要使用介面來描述對象、類、函數和參數。你也可以在模塊之間共享它們，並像處理源代碼中的實體一樣對待它們。你只需要記住——運行時沒有介面，這點很容易被忘記。這就是為什麼在某些情況下使用類而不是介面（例如 Angular 的依賴注入）會更好。讓我們看一下介面的一些真實例子：

在左邊——錯誤的返回類型實現。在右邊——VS Code 立即會告訴你代碼中存在的錯誤。

在左邊——一個類錯誤地實現了擴展了 User 介面的 Driver 介面（參見上圖）。在右邊——錯誤信息。

類

ES6 提供了類，所以你之前可能已經用過它們。但在 TypeScript 中，類提供了一些額外的特性，它們有可能也會出現在 EcmaScript 的未來版本中。在 TS 中，你可以定義抽象類，可以將類屬性描述為靜態、私有或只讀的，可以擴展類並讓類實現介面。我不想詳細描述 TS 類和 ES6 類之間的差異，因為到最後它們都會產生相似的 JavaScript 代碼（在編譯和轉換之後）。在 TS 中，類是一種用來優雅而有效封裝代碼職責的方式，它們與其他語言實現（如 Java）非常相似。

當然，TypeScript 中還有很多新的東西，比如泛型（你會用到它們的）、枚舉（可能會在內部用到）、名稱空間、JSX 支持，等等。但你不需要在一開始就全盤使用它們，只需要使用上面提到的基本特性就能讓你的代碼質量得到提高。

在 TypeScript 中，你可以使用抽象類等特性。有關抽象類的更多信息請參閱

https://www.typescriptlang.org/docs/handbook/classes.html。

TypeScript 支持 private、public 和 protected 方法和只讀屬性。類可以實現介面或擴展其他類。

代碼質量

為什麼說使用 TypeScript 可以提升代碼質量呢？

可以避免一些非常煩人的運行時錯誤，這些錯誤是因為參數名或變數名輸入錯誤導致的；

你可以在對象之間創建清晰的契約；

可以很自然地實現私有成員或類；

編譯器會立即給出反饋，很多錯誤都可以在編譯階段捕獲，而不是在運行時；

非 JS 開發人員更容易閱讀和理解代碼；

你可以使用未來版本的 JavaScript 才會提供的特性；

可以更容易地為進行單元測試（打樁），因為你知道它們的介面是怎樣的。

此外，因為 IDE 提供了很好的支持，編寫可維護的代碼要容易得多。說實話，即使你是獨自開發一個中小型應用程序，在幾周後也很難記得某個函數的參數類型或新創建的介面是怎樣的。你可以翻出代碼查看。不過，如果你只需要在編輯器中將滑鼠懸停在函數名稱上就可以看到它的參數豈不是更好？例如，這個函數接受「age」作為參數，它是一個「數字」，並返回一個包含「age」和「name」屬性的 User 實例。

我還想說另一個東西，那就是代碼評審。當你處在一個小團隊中時，你可能是唯一的一個前端開發人員，其他熟悉.net 或 Java 的團隊成員看不慣 JavaScript 代碼。沒有類型意味著沒有提示。例如——「user」對象有一個「ID」屬性，但它是數字還是字元串呢？如果是一個字元串，為什麼你還要調用「toString()」方法呢？如果是一個數字，為什麼你要在它前面添加字元串「id_」呢？TypeScript 看起來很像其他流行的類型編程語言，而且你會獲得更好、更準確的代碼評審，而更好的代碼評審意味著更好的代碼質量。

在左邊——TypeScript 代碼。在右邊——Java 代碼。它們的語法非常相似，這意味著你的代碼應該更容易被 Java 開發人員理解。

學習曲線

最後，我還想說一些關於 TypeScript 的話。當你嘗試新事物時，總會有學習曲線問題。TS 的學習曲線不是非常陡峭，但也不是很平坦。在兩年前，我選擇了 TS，我認為這是一個很好的學習一門有前途的語言的機會。我很確定，如果我當時選擇了其他框架（比如 Angular）和其他語言，我會感到失望和沮喪。

總 結

TypeScript 值不值得推薦？我當然覺得值得。它可以幫助你在更短的時間內寫出更好的代碼。IDE 對它的支持非常棒，社區充滿活力，包含 TS 定義的庫足夠多，而且在不斷增長，開發者體驗也很好。這是我所知道的用於創建現代和可擴展 Web 應用程序的最佳工具。但也請記住上面提到的一些缺點，繞開這些問題，並在多彩的靜態類型語言世界中遨遊吧。

英文原文

https://ecom.software/en/after-two-years-with-typescript-was-it-worth-it/

點個在看少個 bug

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！