前言

在學習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