前言
在學習TypeScript過程中，我也是遇到了很多的阻力，因為並未有太多深入挖掘的場景，之前做IONIC的時候，也只是用TS，現如今，這一個系列也是記錄自己學習和收獲，同時希望自己的這系列教程對想要學習TypeScript的同學有一定的幫助，我盡量以簡潔的語言以及代碼來將我的東西闡述清楚。
如果，在文章中有錯誤和疏漏，希望大家多多指出和包涵，大家可以通過郵箱來聯系我：869345843@qq.com
什么是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實戰指南）