TypeScript 簡明教程：認識 TypeScript

本文爲系列文章《TypeScript 簡明教程》中的一篇。

1. 認識 TypeScript
2. 安裝 TypeScript

做爲一名 JavaScript 開發者，若是你總在擔憂代碼上線後會不會冷不丁報個 undefined，若是你寫代碼時總須要在文件間來回跳轉查閱接口，若是你正準備接手一個大型 JS 項目，那麼，該是時候考慮使用 TypeScript 了。

TypeScript 是什麼

根據 TS 官網 的介紹：TypeScript 是 JavaScript 類型的超集，它能夠編譯成純 JavaScript。換句話說，TypeScript 就是加強版的 JavaScript。這一點，從 TypeScript 的名字也能夠看出，TypeScript = Type（類型） + JavaScript。

那麼，爲何要給 JavaScript 來這麼個『加強』了？這就要從 JavaScript 的發展史提及了。

最初，JavaScript 是專爲瀏覽器而設計的語言。起初只是用於處理基本的用戶交互，好比表單處理、顯示彈窗等。JS 自己做爲一門動態語言，並無類型系統，由於它壓根就不是爲了建造大型應用而設計的。

但是最近幾年，JavaScript 飛速發展。Node.js 的出現，使得 JS 再也不侷限於瀏覽器中；而 SPA（單頁應用）的流行，使得前端逐漸邁向工程化，項目的代碼量急速膨脹。隨之而來的問題就是，與 C#、Java 等更成熟的語言不一樣，JS 並不具有這樣的規模化能力。鬆散的代碼、紛亂的類型爲項目帶來了更多的不可控性和不肯定性。

爲了解決這個問題，大公司們開始尋求解決方案。而 TypeScript 就是 Microsoft 給出的回答，而且由 C# 之父 Anders Hejlsberg 領銜打造。

TypeScript 爲 JavaScript 補全了構建大型應用時不可或缺的一塊：類型系統，爲開發者架上了一張安全網。同時，做爲 JS 的加強版，TS 仍然存在於 JS 的生態中，你依然可使用 JS 社區提供的各類庫，只須要加上一份聲明文件便可（多數狀況下社區都有現成的）。

事實證實，TypeScript 是成功的。近兩年來，TypeScript 的發展勢頭很猛。就拿前端三大框架來講，根據 Evan You 發佈的 Vue 3.0 計劃，Vue 3.0 將徹底使用 TypeScript 重寫；React 及其周邊生態都在積極擁抱 TypeScript，知名的 React 組件庫 Ant Design 就是使用 TypeScript 編寫；Angular 就更不用說了，Angular 自身就是用 TypeScript 編寫的，默認使用的開發語言也是 TypeScript。TypeScript 流行程度可見一斑。

值得一提的是，根據 StateOfJS 2018 報告，TypeScript 的使用滿意率高達 90%。

什麼是類型系統

咱們都知道，JavaScript 中的數據能夠分爲基礎數據類型和引用數據類型。基礎數據類型包括：undefined、null、boolean、number、string、symbol（ES6 新增）。除了基礎數據類型之外的，就是引用類型，包括：Object、Array、Date、Function、RegExp 等等。這裏說的類型其實就是 TypeScript 中的 Type。只不過在 JavaScript 中，咱們不須要把變量的類型明確寫出來，並且，同一個變量能夠賦值爲不一樣類型的數據。可是在 TypeScript 中，每個變量的類型都是肯定的，不一樣類型的數據之間不能賦值。

舉個例子：

// JavaScript
let name = 'Hopsken'
name = 5 // 沒啥問題

// TypeScript
let name: string = 'Hopsken'
name = 5    // Error: Type '5' is not assignable to type 'string'.
複製代碼

除此之外，TS 中，咱們還能夠指明函數的類型。經過聲明函數應該接收什麼類型的數據，返回什麼類型的數據，能夠有效地避免許多低級錯誤的出現。

// TypeScript
function sayHi(person: string) {
    return 'Hi, '![5f17444dc4b93c0801dbc95c2b215d81.gif](evernotecid://CBBD808E-8BA9-4E6F-8C37-654C8A05B11E/appyinxiangcom/10452354/ENResource/p2337)
    + person
}

sayHi(42) // Error: Argument of type '42' is not assignable to parameter of type 'string'.
複製代碼

強調：TypeScript 使用靜態類型系統，只在編譯時進行類型分析，最終編譯出的 JS 源碼中 **不含任何類型檢查的代碼**（自行添加的除外）。這一點要與運行時檢查加以區分。

總而言之，類型系統就是定義如何將數值和表達式歸類爲許多不一樣的類型，如何操做這些類型，這些類型又該如何互相做用。經過類型，咱們能夠確認一個值或者一組值特定的意義和目的。

類型系統的益處

提早檢測錯誤。

靜態類型系統的首要優勢就是，能儘早發現邏輯錯誤，而不是到真正上線執行的時候才發現。JavaScript 鬆散的語法，在帶來方便的同時，也讓它變得很脆弱。經過上面的兩個例子，能夠感覺到靜態類型分析帶來的優點。舉個例子，相信很多人在 JavaScript 開發中，都遇到過『強制類型轉換』的坑，而使用 TypeScript 則能夠有效地避免這種問題，緣由天然是不言而喻。

溫馨的開發體驗。

首先，類型系統的存在爲不少輔助開發的工具提供了可能。好比說，當你調用函數時，現代的編輯器能夠清楚地告訴你該函數須要幾個參數、參數是什麼類型的、哪些參數是可選的。這樣能夠省去大量查閱 API 的時間，提升開發效率。

其次，類型具備必定的自解釋（self-explain）能力。而類型就像是對程序自身的註釋。畢竟，代碼寫出來是讓人讀的。不少時候，光是看類型自己，咱們就能理解某段程序的意圖。與純人工註釋不一樣，隨着項目的不斷迭代，人工註釋可能會愈來愈詞不達意，但類型標註卻能夠始終忠實地反映程序自己的意義。

更強大的是，藉助某些工具，能夠根據類型標註自動生成文檔。詳情請參閱 typedoc。

更高的抽象性。

類型系統容許程序設計者對程序以較高層次的方式思考，將設計者從煩人的低層次實現中解脫出來，有一種提綱挈領的感受。設計者能夠經過設計子系統間的接口，來表達程序的邏輯。也就是說，讓設計脫離實現，體現出一種 IDL（接口定義語言）的感受，讓程序設計迴歸本質。

總結

本文主要回答了三個問題：TypeScript 是什麼、什麼是類型系統、類型系統能夠帶來什麼好處。如今咱們知道，TypeScript 其實是對 JavaScript 的一個補充，讓使用 JavaScript 開發大規模應用成爲了可能。

TypeScript 是個很是強大的工具，它引入了一系列咱們之前在 JavaScript 程序中沒有考慮過的技術概念。TS 爲咱們帶來的不僅是語法上的變化，更多地是思想上的變化。相信我，隨着學習的深刻，對於這一點的感覺會愈來愈深。

下期預告

與 TypeScript 的火爆造成對比，國內圍繞 TypeScript 的教程卻比較缺少。《TypeScript 簡明教程》旨在彌補這一缺失，幫助新手快速上手 TypeScript。下期咱們將講解 TypeScript 中的基本類型，敬請關注。 (￣▽￣)~