TypeScript初步瞭解

bolelee發表於2018-06-05

TypeScript

記錄對TypeScript的初步瞭解，以期在實際專案中對是否使用TypeScript有較為科學的考量。

大綱：

定義與來歷
快速起步
宣告檔案(.d.ts)
為什麼選擇使用TypeScript
JS遷移TS

知識補充：

ECMAScript 發展簡史
JS模組化

TypeScript定義與來歷

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript = Type + 基於類的物件導向程式設計 + ES新特性支援

可選的靜態型別

// 宣告引數型別為 string
function greet (msg: string) {
  console.log("Say: " + msg);
}

greet("Hello TypeScript!");
greet(1900); // 報錯：Argument of type `1900` is not assignable to parameter of type `string`

// string 改為 string|number 可執行
// string 改為 any 即不指定型別，則可執行

PS: 型別規範：number, string, boolean, object, 而非Number, String, Boolean, Object

提供最新ES特性：
提供最新的和不斷髮展的JavaScript特性，包括那些來自ECMAScript和未來提案中的特性，比如非同步功能和Decorators, 以幫助建立健壯的元件。

來歷：

微軟開源的程式語言，2013年6月19日，釋出了正式版TypeScript 0.9。

快速起步演示

演示：typescript-test, typescript-vue-tutorial

更多起步例子：http://www.typescriptlang.org…

宣告檔案

在TypeScript中使用第三方庫，需要獲取其宣告檔案，告訴TS這個庫是存在的以及如何獲取，TypeScript 2.0以上版本，獲取宣告檔案只需使用npm。一般npm包會包含其宣告檔案，這種情況不需要額外安裝，若沒有，則要安裝其宣告檔案，大多數情況下，型別宣告包的名字總是與它們在npm上的包的名字相同，但是有@types/字首。可以在 https://aka.ms/types 查詢你喜歡的庫。

宣告檔案命名規則：.d.ts

為什麼選擇使用TypeScript

方便開發與維護
型別檢查幫助發現程式碼普通錯誤
便於C#/Java開發者上手
轉譯器的輸出可讀性很高
完全相容ES6
類系統可以按需求選擇
IDE支援很好

何時使用，何時不用？

用：

當開發團隊習慣了靜態型別語言
TypeScript可作為Babel的替代品
當某個庫或框架推薦你使用TypeScript時
當需要速度時
熟悉物件導向的開發，但不是很熟悉JS

不用：

當沒有時間精力進行額外的轉譯時
當想要避免潛在的效能代償時（轉譯器會產生額外程式碼）
當需要將團隊的敏捷度進行最大化的時候
沒有OOP(Object-oriented programming, 物件導向程式設計)開發經驗，對JS也不熟悉

文章連結：https://sdk.cn/news/4734

https://www.zhihu.com/questio…

JS遷移TS

https://www.tslang.cn/docs/ha…

背景知識-ECMAScript 發展簡史

JavaScript(1996) -> ECMAScript 1.0(1997) -> ECMAScript 3.0(1999.12) -> ECMAScript 5.0(2009.12) -> ECMAScript 6(2015.06)

ES6 從開始制定到最後釋出，整整用了 15 年。

ES6 與 ECMAScript 2015 的關係

附：http://es6.ruanyifeng.com/#do…

瀏覽器支援／部署進度

各大瀏覽器最新版本對ES6的支援情況

訪問此處檢查你的瀏覽器對ES6的支援情況

Chrome 和 Safari 對 ES6 的支援度，目前均是92%

微信內建瀏覽器對ES6的支援度是90%

轉碼器babel: 轉換新的JavaScript句法(Syntax), 比如() => {} ，不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全域性物件，以及一些定義在全域性物件上的方法（比如Object.assign）都不會轉碼，需要使用babel-polyfill