深入淺出TypeScript（1）- 概述
- 2019 年 10 月 3 日
- 筆記
前言
在學習TypeScript過程中，我也是遇到了很多的阻力，因為並未有太多深入挖掘的場景，之前做IONIC的時候，也只是用TS，現如今，這一個系列也是記錄自己學習和收穫，同時希望自己的這系列教程對想要學習TypeScript的同學有一定的幫助，我盡量以簡潔的語言以及程式碼來將我的東西闡述清楚。
如果，在文章中有錯誤和疏漏，希望大家多多指出和包涵，大家可以通過郵箱來聯繫我：[email protected]
什麼是TypeScript
關於TypeScript有一種很有趣的說法，說TypeScript = Typed + JavaScript，仔細想來，確切的說TypeScript應該是對JavaScript的擴展 + 類型系統，所以這個公式應該是Typed + JavaScript + Extends
而官方文檔也說明了一件事情，那就是TypeScript是JavaScript的超集，為了讓我們可以無縫從JavaScript切換到TypeScript，微軟的TypeScript只是提供了TypeScript到JavaScript的編譯，並不包含運行時，它的運行時也就是JavaScript的運行時，所以TypeScript可以說是一種JavaScript的新的編碼實現。
TypeScript和JavaScript的類型
先讓我們來看一下JavaScript的基本類型系統：Boolean、Null、Undefined、String、Number，以及ES6之後，新增的Symbol類型。
TypeScript有哪些類型呢？下面讓我們來看一下TypeScript的基本類型：Boolean、Null、Undefined、String、Number、Symbol + TypeScript擴展的類型。
上方TypeScript的基本類型正是JavaScript的基礎類型 + 自行擴展的類型系統。
TypeScript對於JavaScript的擴展類型借鑒了強類型語言的類型系統，有Void、Never、泛型等以及高階類型。
TypeScript的表達形式
明確了TypeScript和JavaScript類型方面的差異化，我們來看看如何將JavaScript改寫成為TypeScript呢？
先上一段JavaScript程式碼：
let str = 'Hello JavaScript' let num = 10 let arr = [1, 2, 3] const htmlStr = `${str}_${num}_${arr.join()}` document.querySelectorAll('.app')[0].innerHTML = str
對於上述一段程式碼，如果運行在TypeScript環境下，也是可以正常運行，因為TypeScript是JavaScript的超集，兼容這種寫法。
那麼，上面的程式碼，對應TypeScript又是如何的呢？下面我們用程式碼描述：
let str: string = 'Hello JavaScript' let num: number = 10 let arr[] = [1, 2, 3] //Array<number> const htmlStr = `${str}_${num}_${arr.join()}` document.querySelectorAll('.app')[0].innerHTML = str
由此可見，TypeScript是更規範化的將變數類型聲明化，他的格式如下：
let variable: Type = value
TypeScript中的數據類型
說道TypeScript的數據類型，我們就可以用一段程式碼來展示：
// 原始類型 let bool: boolean = true let num: number = 13 let str: string = 'abc' // 數組 let arr1: number[] = [1, 2, 3] let arr2: Array<number> = [1, 2, 3] let arr3: Array<number | string> = [1, '2'] // 元組 let tuple: [number, string] = [0, '2'] // 特殊數組，限定數組元組類型和個數 tuple.push(2) // [0 , '2', 2] // tuple[2] //不允許越界訪問 // 函數 let add = (x: number, y: number): number => x + y let func: (x: number, y: number) => number func = (a, b) => a + b //對象 let obj: object = { x: 1, y: 2 } // obj.x = 100 // wrong let obj2: { x:number, y:number } = { x: 1, y: 2 } obj2.x = 100 //void let noReturn = () => {} void 0 === undefined // any let x // 可以任意賦值 // never 永遠不會有返回值 let error = () => { throw new Error() } // 枚舉 enum Role { // 數字 或者聲明字元串 Teacher, // 默認0開始以下依次+1 Student, // 1 }
TypeScript的類型推斷
當然，我們在書寫程式碼的過程中，如果忘記加類型，寫出純JavaScript程式碼，那麼TypeScript也會通過類型推斷，幫助我們推斷出大部分類型。
比如我們最初的JavaScript程式碼，類型推斷依照程式碼做出如下說明：
let str = 'Hello JavaScript' str = 100 // error因為賦值操作，已經將str推斷為string類型，這樣賦值在TypeScript會報錯 let num = 10 num = 'some string' // error，此時num已經推斷為number類型，不可以將string類型賦值給它 let arr = [1, 2, 3] arr = true // error， 類型推斷為數組類型Array<number>，不能賦值Boolen arr = ['1', '2', '3'] // error，類型推斷為Array<number>，不能賦值為Array<string>類型 const htmlStr = `${str}_${num}_${arr.join()}` document.querySelectorAll('.app')[0].innerHTML = str
為什麼要有類型
由上面程式碼可以知道，TypeScript對程式碼進行了比較嚴格的類型判斷，那麼我們肯定想問，為什麼要這樣做？
其實，這樣做最大的好處，就可以讓程式碼簡單的文檔化，並且規範我們的程式碼操作，避免一些不必要的邊界值問題，這對於開發大型應用和寫測試用例都有極大的幫助。
而TypeScript卻也並未限制我們編碼的自由，就像是騎馬，如果單純用JavaScript書寫程式碼，就好像是沒有韁繩的騎馬，會讓我們陷入到危險和抓狂之中，但是有了TypeScript，我們就相當於是有了韁繩，可以使得我們的程式碼更優雅，也更容易控制和理解。
總結
本篇文章探討了TypeScript和JavaScript中的類型系統，以及在TypeScript中如何處理類型聲明和賦值。同時也暴露了一些靈活性的問題，比如不能將一個字元串數組賦值給數字數組。所以我們如果單一的想要定義一個多類型的數組就會遇到麻煩，但這些不是問題，TypeScript中也存在著解決方案。
在下一篇，我們將會看看TypeScript是如何處理這些要求，以及如何給予相應的類型限制和定義的。
參考資料：
TypeScript手冊：TypeScript
極客時間TypeScript開發實戰專欄：TypeScript開發實戰
參考書：TypeScript實戰指南
參考書：Leaning TypeScript中文版（這本書講解的TypeScript的版本為1.5+，不是最新版本，如果買書，不建議買，可以購買上本參考書TypeScript實戰指南）
我的個人部落格：http://www.gaoyunjiao.fun/?p=114
