《TypeScript實戰指南》

實戰

TypeScript實戰指南

胡桓銘　編著

Preface? ? ? 前　　言

與 TypeScript相遇，還是在 ThoughtWorks 工作的時候。那個時候，我們需要維護大量的前端遺留項目，需要與客戶規劃我們的人效，需要控制系統迭代帶來的 bug 率。我們接手的項目往往缺乏嚴謹的注釋和完整的代碼說明文檔，這導致在維護 JavaScript 遺留項目時，需要花費更多的時間去厘清參數及函數之間的關系，甚至需要用 debugger 逐層去觀察值的變化。工作非常低效，但客戶的需求又總是急迫的，這迫使我們去思考如何提升團隊的工作效率。

這個時期也是 Facebook 開始推廣Flow 的時候。我們覺得添加靜態類型應該是個非常不錯的方向，也看了很多應用靜態類型的成功案例。碰巧Flow 對于遺留項目非常友好，你不需要為每個文件、每個函數、每行代碼都添加類型，而只需要在你認為有必要的地方寫上類型即可。所以我們很快進行了實驗。

然而，我們在采用 Flow后不久就發現了很多新產生的問題：

1）升級困難，配置復雜。尤其是在 React Native 項目中，經常會在升級后運行失敗。

2）生態弱勢。很多第三方庫當時沒有 Flow 的類型問題件。

3）難于上手。Flow 的氣質更像考究的學院派風格，功能強大靈活，但對于新加入團隊的人而言，其難度令人生畏。

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

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

2）TypeScript 可以使代碼在一定程度上達到“Self-documenting” 的效果。“Self-documenting”是一個非常有意思的概念，它強調的是代碼本身具有自我說明的效果，而不是依賴文檔。TypeScript 有著非常嚴格的強類型表達，這迫使你在函數使用之前就必須標注好函數的入參和返回值類型。這樣的強依賴使得函數本身表達清晰，同時也可以非常容易地推導出代碼的依賴結構，進行重構。

之后，我們開始嘗試在遺留項目中進行TypeScript重構，那是一種相見恨晚的感覺。從后期的數據來看，我們很有效地降低了bug率，同時支持項目的人效也得到了極大的提升。

這一段經歷，使我重新開始思考關于語言靜態類型的問題。在大型團隊開發時，溝通的成本往往是極高的。這就是為什么在后端開發中，擁有靜態類型的語言仍然占據主流，也是為什么Python在3.5版本中加入Type Hint。顯式的類型聲明不僅有利于閱讀，也有利于代碼編輯器進行代碼提示和依賴分析。

比如，在Java開發中，如果需要重構的話，依賴IntelliJ IDEA提供的函數重構功能，可以自動地對每一個依賴該函數的文件進行自動化重構。但這在JavaScript中是不可想象的，你只能使用全局文本搜索來修改函數名，這種操作非常原始，就像在現代戰爭中還拿著石錘向著敵方陣地沖刺一樣。

這就是TypeScript為JavaScript生態帶來的價值，也是為什么Angular和Vue都轉向使用TypeScript進行重構。比起學術型的Flow而言，TypeScript更像一門工程型的語言，它配置容易，上手快速，更適合在實戰中使用，是一件非常稱手的“***”。

我希望讀者在使用TypeScript之前，能夠對TypeScript有足夠的了解。我結合TypeScript的官方手冊與其他公開資料，整理了一些TypeScript基礎的內容，就是本書的“基礎篇”，最好粗略過一遍這部分內容。在“實戰篇”中會提及這些內容，返回去再看時，反而能加深理解。

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

最后，非常感謝2018年年底的住院經歷，因為無法完全被治愈，使得我開始重新思考生命與健康的問題，如果有機會我也非常想聊聊這個話題。我非常感謝娜娜的陪伴，這是最長情的告白。同時感謝吳怡編輯的理解與體諒，使得我還有機會完成此書。最后感謝開源社區，不僅幫助我成長，也提供了豐富的資料助力我完成此書，希望能有更多的機會回饋社區。

于2019年元宵節

Contents????目　　錄

前言

基礎篇

第1章　Hello TypeScript? 2

1.1　引言? 2

1.1.1　JavaScript 與 ECMAScript? 3

1.1.2　TypeScript? 5

1.2　準備環境? 8

1.2.1　安裝 Node.js? 8

1.2.2　npm和 Yarn? 9

1.2.3　安裝 TypeScript? 10

1.3　Visual Studio Code? 11

1.3.1　安裝VSCode? 11

1.3.2　安裝Shell 命令? 12

1.4　Hello World? 12

1.5　本章小結? 14

1.6　作業? 14

第2章　類型與函數? 15

2.1　基本類型? 15

2.1.1　JavaScript 的基本類型? 16

2.1.2　TypeScript的基本類型? 16

2.1.3　變量聲明? 18

2.1.4　泛型? 19

2.1.5　枚舉? 22

2.1.6　symbol? 25

2.1.7　iterator和generator? 26

2.2　高級類型? 31

2.2.1　interface? 31

2.2.2　交叉類型與聯合類型? 32

2.2.3　類型保護與區分類型? 35

2.2.4　typeof 與 instanceof? 38

2.2.5　類型別名? 40

2.2.6　字面量類型? 41

2.2.7　索引類型與映射類型? 41

2.2.8　類型推導? 44

2.3　函數? 48

2.3.1　定義函數? 48

2.3.2　參數? 49

2.3.3　回調函數和 promise? 52

2.3.4　async 和 await? 59

2.3.5　重載? 59

2.4　本章小結? 61

2.5　作業? 61

第3章　接口與類? 63

3.1　接口? 63

3.1.1　定義? 64

3.1.2　函數類型? 69

3.1.3　可索引類型? 70

3.1.4　繼承接口? 71

3.2　類? 72

3.2.1　定義? 73

3.2.2　實現接口? 73

3.2.3　繼承? 74

3.2.4　存取器? 76

3.2.5　只讀屬性? 77

3.2.6　類函數和靜態屬性? 78

3.2.7　抽象類? 78

3.3　本章小結? 80

3.4　作業? 80

第4章　命名空間與模塊? 81

4.1　命名空間? 81

4.1.1　單文件命名空間? 81

4.1.2　多文件命名空間? 83

4.1.3　別名? 84

4.1.4　外部命名空間? 85

4.2　模塊? 86

4.2.1　導出與導入? 87

4.2.2　生成模塊? 91

4.2.3　外部模塊? 94

4.3　本章小結? 97

4.4　作業? 97

實戰篇

第5章　命令行應用實戰：天氣查詢? 106

5.1　創建項目? 106

5.1.1　初始化項目? 108

5.1.2　配置 TSConfig? 109

5.1.3　配置 TSLint? 112

5.1.4　使用 Git? 113

5.2　Commander.js? 117

5.2.1　格式化命令? 118

5.2.2　更好的輸入? 120

5.2.3　添加色彩? 122

5.3　處理網絡請求? 123

5.3.1　定義接口? 123

5.3.2　Promise? 125

5.3.3　await 和 async?? 127

5.4　本章小結?? 128

5.5　作業?? 128

第6章　Express實戰：后端服務? 129

6.1　創建項目? 129

6.1.1　初始化項目? 130

6.1.2　Husky? 131

6.2　定義數據結構? 132

6.2.1　連接數據庫? 133

6.2.2　定義數據模型? 134

6.3　數據接口? 135

6.3.1　Express? 136

6.3.2　增刪查改? 137

6.4　本章小結? 142

6.5　作業? 143

第7章　React 實戰：桌面網站? 144

7.1　創建項目? 144

7.1.1　create-react-app? 145

7.1.2　配置 TypeScript? 147

7.1.3　配置 TSLint? 156

7.2　架構? 158

7.2.1　React-Router? 158

7.2.2　Redux? 160

7.3　編輯提醒事項? 163

7.3.1　組件? 164

7.3.2　Redux 組件? 166

7.3.3　Redux Persist? 170

7.3.4　處理網絡請求? 174

7.4　實現列表? 180

7.4.1　實現列表頁? 180

7.4.2　復用編輯組件? 182

7.5　測試? 190

7.5.1　配置 Jest? 190

7.5.2　組件的測試? 192

7.5.3　Action 的測試? 195

7.5.4　Reducer的測試? 196

7.6　本章小結? 197

7.7　作業? 198

第8章　React Native 實戰：客戶端開發? 199

8.1　創建項目? 199

8.1.1　配置開發環境? 200

8.1.2　創建 React Native 項目? 208

8.2　設計架構? 210

8.2.1　React Navigation? 211

8.2.2　Reudx? 212

8.2.3　列表頁? 215

8.3　本章小結? 217

8.4　作業? 217

第9章　Vue 實戰：HTML 5網頁開發? 219

9.1　創建項目? 219

9.1.1　創建 Vue 項目? 220

9.1.2　寫TypeScript代碼? 221

9.2　實現列表? 225

9.2.1　vue-class-component? 225

9.2.2　網絡請求? 228

9.2.3　列表頁? 230

9.3　本章小結? 231

9.4　作業? 231

第10章　小程序實戰? 234

10.1　創建項目? 234

10.1.1　創建小程序? 236

10.1.2　創建 WePY 工程項目? 239

10.1.3　配置 TypeScript? 241

10.1.4　入口文件? 242

10.1.5　WePY頁面? 243

10.1.6　WePY組件? 246

10.1.7　針對原生API進行優化? 246

10.2　實現列表? 247

10.2.1　網絡請求? 247

10.2.2　列表頁? 249

10.3　本章小結? 249

10.4　作業? 250

第11章　項目遷移與社區共建? 251

11.1　項目遷移? 251

11.1.1　從 JavaScript 遷移到TypeScript? 252

11.1.2　從 Flow遷移到TypeScript? 253

11.2　社區共建? 254

11.2.1　貢獻類型文件? 254

11.2.2　關注更新? 256

11.3　本章小結? 257

11.4　作業? 257

TypeScript https

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。