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

背景知識-JS模塊化

如何共用變量？

• 解決方法1: 全局變量，問題：加載順序問題undefined報錯，任何代碼均可改變它，不利於維護
• 解決方法2: 模塊化

普遍使用的兩種模塊化系統：CommonJS(CJS), ECMAScript Modules(ESM)

譯文：圖說ES Modules

原文：ES Modules: A cartoon deep-dive

附

TypeScript官網

Typescript中文網

TypeScript wiki

Vuejs-TypeScript支持