前言

與TypeScript相遇，還是在ThoughtWorks工作的時(shí)候。那個(gè)時(shí)候，我們需要維護(hù)大量的前端遺留項(xiàng)目，需要與客戶規(guī)劃我們的人效，需要控制系統(tǒng)迭代帶來(lái)的bug率。我們接手的項(xiàng)目往往缺乏嚴(yán)謹(jǐn)?shù)淖⑨尯屯暾拇a說(shuō)明文檔，這導(dǎo)致在維護(hù)JavaScript遺留項(xiàng)目時(shí)，需要花費(fèi)更多的時(shí)間去厘清參數(shù)及函數(shù)之間的關(guān)系，甚至需要用debugger逐層去觀察值的變化。工作非常低效，但客戶的需求又總是急迫的，這迫使我們?nèi)ニ伎既绾翁嵘龍F(tuán)隊(duì)的工作效率。

這個(gè)時(shí)期也是Facebook開始推廣Flow的時(shí)候。我們覺(jué)得添加靜態(tài)類型應(yīng)該是個(gè)非常不錯(cuò)的方向，也看了很多應(yīng)用靜態(tài)類型的成功案例。碰巧Flow對(duì)于遺留項(xiàng)目非常友好，你不需要為每個(gè)文件、每個(gè)函數(shù)、每行代碼都添加類型，而只需要在你認(rèn)為有必要的地方寫上類型即可。所以我們很快進(jìn)行了實(shí)驗(yàn)。

然而，我們?cè)诓捎肍low后不久就發(fā)現(xiàn)了很多新產(chǎn)生的問(wèn)題：

1）升級(jí)困難，配置復(fù)雜。尤其是在React Native項(xiàng)目中，經(jīng)常會(huì)在升級(jí)后運(yùn)行失敗。

2）生態(tài)弱勢(shì)。很多第三方庫(kù)當(dāng)時(shí)沒(méi)有Flow的類型問(wèn)題件。

3）難于上手。Flow的氣質(zhì)更像考究的學(xué)院派風(fēng)格，功能強(qiáng)大靈活，但對(duì)于新加入團(tuán)隊(duì)的人而言，其難度令人生畏。

于是，我們又將目光投向了TypeScript。最初了解TypeScript是看到Angular團(tuán)隊(duì)在更新Angular 2時(shí)開始全面采用TypeScript代碼。他們給出了這樣兩個(gè)理由：

1）TypeScript明確了抽象。在大型工程項(xiàng)目中，我們希望模塊之間的邊界是使用接口定義的，而JavaScript不足以清晰表達(dá)類似的邊界劃分，F(xiàn)low也不能。而TypeScript可以定義接口，可以強(qiáng)制程序員去思考API的邊界，去設(shè)計(jì)代碼，而不只是編寫代碼，暴露代碼的耦合。

2）TypeScript可以使代碼在一定程度上達(dá)到“Self-documenting”的效果。“Self-documenting”是一個(gè)非常有意思的概念，它強(qiáng)調(diào)的是代碼本身具有自我說(shuō)明的效果，而不是依賴文檔。TypeScript有著非常嚴(yán)格的強(qiáng)類型表達(dá)，這迫使你在函數(shù)使用之前就必須標(biāo)注好函數(shù)的入?yún)⒑头祷刂殿愋汀＿@樣的強(qiáng)依賴使得函數(shù)本身表達(dá)清晰，同時(shí)也可以非常容易地推導(dǎo)出代碼的依賴結(jié)構(gòu)，進(jìn)行重構(gòu)。

之后，我們開始嘗試在遺留項(xiàng)目中進(jìn)行TypeScript重構(gòu)，那是一種相見恨晚的感覺(jué)。從后期的數(shù)據(jù)來(lái)看，我們很有效地降低了bug率，同時(shí)支持項(xiàng)目的人效也得到了極大的提升。

這一段經(jīng)歷，使我重新開始思考關(guān)于語(yǔ)言靜態(tài)類型的問(wèn)題。在大型團(tuán)隊(duì)開發(fā)時(shí)，溝通的成本往往是極高的。這就是為什么在后端開發(fā)中，擁有靜態(tài)類型的語(yǔ)言仍然占據(jù)主流，也是為什么Python在3.5版本中加入Type Hint。顯式的類型聲明不僅有利于閱讀，也有利于代碼編輯器進(jìn)行代碼提示和依賴分析。

比如，在Java開發(fā)中，如果需要重構(gòu)的話，依賴IntelliJ IDEA提供的函數(shù)重構(gòu)功能，可以自動(dòng)地對(duì)每一個(gè)依賴該函數(shù)的文件進(jìn)行自動(dòng)化重構(gòu)。但這在JavaScript中是不可想象的，你只能使用全局文本搜索來(lái)修改函數(shù)名，這種操作非常原始，就像在現(xiàn)代戰(zhàn)爭(zhēng)中還拿著石錘向著敵方陣地沖刺一樣。

這就是TypeScript為JavaScript生態(tài)帶來(lái)的價(jià)值，也是為什么Angular和Vue都轉(zhuǎn)向使用TypeScript進(jìn)行重構(gòu)。比起學(xué)術(shù)型的Flow而言，TypeScript更像一門工程型的語(yǔ)言，它配置容易，上手快速，更適合在實(shí)戰(zhàn)中使用，是一件非常稱手的“兵器”。

我希望讀者在使用TypeScript之前，能夠?qū)ypeScript有足夠的了解。我結(jié)合TypeScript的官方手冊(cè)與其他公開資料，整理了一些TypeScript基礎(chǔ)的內(nèi)容，就是本書的“基礎(chǔ)篇”，最好粗略過(guò)一遍這部分內(nèi)容。在“實(shí)戰(zhàn)篇”中會(huì)提及這些內(nèi)容，返回去再看時(shí)，反而能加深理解。

實(shí)際上，如何在實(shí)戰(zhàn)中使用TypeScript反而是一個(gè)老大難的問(wèn)題。這也是初學(xué)者更容易遇到的困難。“為什么手冊(cè)讀完了，官方實(shí)例也看了，我還是不會(huì)在React里寫TypeScript呢？”這是我經(jīng)常聽到的反饋，希望本書能夠很好地回答這類問(wèn)題。

最后，非常感謝2018年年底的住院經(jīng)歷，因?yàn)闊o(wú)法完全被治愈，使得我開始重新思考生命與健康的問(wèn)題，如果有機(jī)會(huì)我也非常想聊聊這個(gè)話題。我非常感謝娜娜的陪伴，這是最長(zhǎng)情的告白。同時(shí)感謝吳怡編輯的理解與體諒，使得我還有機(jī)會(huì)完成此書。最后感謝開源社區(qū)，不僅幫助我成長(zhǎng)，也提供了豐富的資料助力我完成此書，希望能有更多的機(jī)會(huì)回饋社區(qū)。

作者

于2019年元宵節(jié)