大規模應用TypeScript「2019 JSConf -Brie Bunge」（上）

特別說明

這是一個由simviso團隊進行的關於Airbnb大規模應用TypeScript分享的翻譯文檔，分享者是Airbnb的高級前端開發Brie Bunge

視頻連接：大規模應用TypeScript「2019 JSConf -Brie Bunge」（上） 或點擊文章底部閱讀原文觀看視頻

視頻翻譯文字版權歸 simviso全部，未經受權，請勿轉載！！！

本次參與翻譯人員

介紹

你們好，個人名字是 Bree，我在Airbnb工做。衆所周知，在大公司中進行大的改革很難。這須要去說服不少人，同時又須要涉及大量的代碼遷移。我想要與你們分享咱們是如何將 TypeScript 應用到 Airbnb 這個公司的平常開發中的。

我很感謝大家能在這裏，我知道大家徹底能夠披着時髦的毛巾在海邊娛樂。

我設想這裏的每一個人都會有這樣一些問題，你要爲你的公司進行重大的變革，同時這可能會被做爲一個案例進行研究。你如今是否在公司內部積極的推進將項目開發遷移到 TypeScript，爲此我將提供一些技術和工具上的幫助。若是你以前已經聽過並但願對 TypeScript 瞭解更多。

首先，咱們會介紹 TypeScript 是什麼？規模化又意味着什麼？對於將TypeScript規模化的過程又有什麼建議？基於這些問題和疑問，我會給出相應的解答。咱們該經過什麼樣的遷移策略將 JavaScript 逐步遷移到 TypeScript？

什麼是TypeScript

請你們快速舉手示意一下以方便我知道大概有多少人以前使用過 TypeScript。

cool，有這麼多人！

還有一部分人沒有舉手。那麼，我會給出一個快速介紹，這樣每一個人都在同一塊兒跑線上了。

假如咱們有這麼一個 greeter 方法。它接收一個 name 參數，而後返回 hello + name。那麼，若是咱們傳入的是JSConf，它會和和睦的說 Hello，JSConf！

將剛纔的代碼用 TypeScript 來表達就是這個樣子，能夠看到他們很像。惟一的區別是咱們在它的參數這裏使用了類型註釋。

因此若是咱們在咱們的 TypeScript 項目中使用這個函數同時咱們傳入一個字符串，能夠看到編譯一切正常。

可是在這種狀況下，若是咱們傳遞的參數類型不是字符串，而是一個字符串數組。那麼，如圖所示TypeScript 就會給咱們一個錯誤。即這是一個字符串數組，函數接收的參數類型是 string，不支持該分配。咱們不須要再經過點擊刷新頁面這一流程來從咱們的控制檯中查看錯誤並肯定該錯誤所發生的位置。能夠看到，在咱們輸入後，當即就從編輯器中獲得了這個錯誤。

咱們也能夠表達其餘對象類型。這個接口描述了一個包含名字和姓氏的 person 對象。同時，你能夠定義更復雜的構造類型。

TypeScript一般帶有一個編譯器。當出現問題時就能夠立馬告訴你。它還有一個能夠與編輯器掛鉤的語言服務器，能夠幫咱們進行自動編譯，提供重構相關提示等等。在這個例子中，咱們已經在這個組件中導入了withStyles react。這樣就能夠自動導入它所須要的數百個CSS屬性，包括內聯文檔。神奇吧！我不必來回瀏覽文檔頁面，我在編輯器中就能夠獲得這些全部。經過在咱們的代碼中使用類型，咱們能夠作更多的事情。咱們只是稍微接觸了下TypeScript的類型限制，可是能夠經過這個來幫你捕獲這種類型的錯誤，以及支持它的工具。

什麼是規模化!

關於TypeScript的內容就到此，那關於規模化應用這一部分呢？恩？這有個什麼問題？感謝TypeScript幫我找出了這個錯誤。若是你一時疏忽，輸入了一個錯誤的變量，那你將會獲得這樣的一個錯誤提示。那麼，在 TypeScript 中真的會發生這樣的事。因此，讓咱們來修復下。

規模化會改變咱們的交流方式。我之前在小團隊的時候，若是你想要使用TypeScript。是的，聽起來很酷。那咱們就用。但當團隊規模達到數百位工程師，同時代碼量也愈來愈多，那麼交流方式就要發生改變。

咱們須要進行一些改變，即當咱們想要在咱們的主倉庫中使用TypeScript的時候（這裏指Powers | airbnb.com的主倉庫）。同時讓TypeScript成爲前端主要開發語言。這個改變影響的人越多，那麼必須遷移的代碼也就越多。

那咱們用數字來講明規模化意味着什麼。

airbnb（我所在的公司）擁有大量的JS代碼。在咱們的主倉庫中有兩百萬行以上的JS代碼，以及100多個內部npm包。咱們有幾個分離的倉庫，經過打包到內部的NPM註冊中心，這樣就能夠跨倉庫共享。這真的有不少代碼，我甚至能看到一些 Backbone 的代碼，能夠想一下JavaScript走過了多少年，它在Airbnb這裏也走過了十多年。

因此咱們有大量的開發人員在維護這些代碼。目前公司有超過1300名開發人員，其中有200個以上是前端。這些前端工程師大多數都參與了主倉庫的貢獻。這些數字給咱們展示了當時咱們提議要使用TypeScript時所面臨的大環境。

使用TypeScript的提案

那麼在這種規模下，咱們當時是一個什麼樣子呢？

每月，咱們都會將全部的前端工程師聚在一塊兒開個比較有意思的會，一塊兒討論新的前端技術和選型。爲了能夠作到深思遠慮，咱們起草了提案。它對某個新技術進行了諸如優勢、權衡、替代方案、針對退出方案的思考以及長期擁有者等方面概述。你們會權衡這些提議的利弊。咱們會站在團隊的角度去決定向前邁出這步是否有意義，這確保了咱們能夠做爲一個集思廣益的團隊，對所作的事情作出深思熟慮的決定。這樣能夠避免在沒有正當技術理由的狀況下就「上車」。

從2016年起，Airbnb 已經在一些小規模團隊中探索使用 TypeScript。在2017年的前端調查中，靜態類型系統呼聲最高。基於這個信號，Joe（第二排那個Joe）和我起草了一個關於TypeScript的提案，並將它交給前端工做組。這項提案詳細說明了爲何在Airbnb使用TypeScript是有意義的。

讓我來說講主要的緣由。airbnb的使命是要讓每個人都感覺到世界到處都是家（airbnb是一家旅遊住宿的公司）。用戶對咱們的產品提出的每個建議都能會讓咱們向着這個目標更進一步。這對於你正在開發的產品也是如此。

1. TypeScript能夠幫助咱們阻止bug的發生。

2. TypeScript還爲開發人員提供大量的生產力效益和工具，像咱們以前看到，自動編譯和重構。使用TypeScript，工程師能夠更安全快速的遷移代碼。

3. 在Airbnb咱們引入了GraphQL 和Apollo，它可使咱們經過自定義的GraphQL模板來生成TypeScript類型

這意味着咱們能夠獲得端到端之間的類型安全。由於前端和後端所使用的數據類型共享了同一個事實上的定義源。後端工程師可以在不影響客戶端的狀況下對API進行修改，而前端工程師則能夠確信哪些數據將從服務器返回。類型不匹配一直是咱們的主要bug所在。因此，這種端到端的類型安全性是一個主要的賣點。