走進TypeScript

JavaScript TypeScript · 發表 2018-10-14 00:47:03

摘要：國內很多技術文章千篇一律，大多從官網複製貼上，如果要學習TypeScript語法細節，去看官網最好不過了。本文將從兩個不同的角度帶你走進TypeScript. 以下簡稱'TS'. 用TS有什麼好處? TS的發展前景如何？首先，看下TS...

國內很多技術文章千篇一律，大多從官網複製貼上，如果要學習TypeScript語法細節，去看 ofollow,noindex">官網最好不過了。

本文將從兩個不同的角度帶你走進TypeScript. 以下簡稱'TS'.

用TS有什麼好處?
TS的發展前景如何？

首先，看下TS的定義：

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

TypeScript是一個編譯到純JS的有型別定義的JS超集。

TS遵循當前以及未來出現的ECMAScript規範。TS不僅能相容現有的JavaScript 程式碼，它也擁有相容未來版本的JavaScript的能力。大多數TS的新增特性都是基於未來的JavaScript提案，這意味著許多TS程式碼在將來很有可能會變成ECMA的標準.

made by 乘著風

2009年微軟公司提出了TypeScript的第一個版本，是由C#之父Anders Hejlsberg 領導開發的, 瞭解C#的同學學起來就幸福了。

TS有什麼好處？

TypeScript能從可維護性、健壯性等方面提高程式碼質量。

說到程式碼質量，大家有什麼提高方法呢？對於長期迭代的專案，開發和維護的成員會有很多，團隊成員水平，風格會有差異，還具有流動性。程式碼層面上統一規範可以避免一些問題，比如eslint等工具，我們公司的專案就使用了jshint統一規範，不通過編譯不能上線。

常見的程式碼檢查工具：JsHint / JsLint / EsLint

語法級別約束：使用未定義變數，括號未閉合等；規範/風格級別約束：!= ===, 縮排，未使用的變數， parseInt(第二個引數), （相容性）

Eslint 這些語法檢查的能提前檢查出來這些錯誤，減少了除錯的成本，減少了線上bug.

但是還有不足，比如一些引數型別，個數的錯誤檢測不到。

謹慎的程式員會做個判空處理等，來避免這樣的錯誤。如果未處理，在複雜的線上環境中，程式就有可能會崩潰。

而TS可以幫助我們避免這些問題，從而提高程式碼健壯性, 因為TS是強型別的語言，下面看下它怎樣約束型別的。

型別註解

let isDone: boolean = false;

變數後面跟的冒號，後面的型別就是，這個變數的型別註解。型別的註解是可選的，不加就變成了JS，因為TS設計目標就是：相容JS，減少js遷移TS的成本。

型別	描述
Boolean	與JS相同
Number	與JS相同
String	與JS相同
Array	與JS相同; 增加了泛型陣列, 元組(Tuple)
Enum	enum型別是為了給一個數字集合更友好地命名
any	any型別可以表示任意JavaScript值
void	void就是any的對立面，即所有型別都不存在的時候。你會在一個沒有返回值的函式看到它

詳細用法請參考官網。

TS另外一個特點是對面向物件思想進行了增強

介面（Interface）

維基百科對OOP中介面的定義是:

在面向物件的語言中，術語interface經常被用來定義一個不包含資料和邏輯程式碼但用函式簽名定義了行為的抽象型別。

實現一個介面可以被看作是簽署了一份協議。介面好比是協議，當我們簽署(實現)它時，必須遵守它的規則。介面的規則是方法和屬性的簽名，我們必須實現它們。

當我們在程式設計的時候，基類中的所有方法都不用去實現，就可以使用介面來代替類，提高延展性。

格式：

interface 介面名{
方法的宣告：不需要public和其他修飾符，預設是public
}

介面只能被實現，不能例項化。
當類實現介面時，必須將介面當中所有的方法全部實現。
介面可以多實現，在一定程度上彌補了類不能多繼承的缺陷，實現多個介面，介面之間使用逗號隔開。

泛型

泛型用來建立可重用的元件，一個元件可以支援多種型別的資料。這樣使用者就可以以自己的資料型別來使用元件。

使用泛型型別可以最大限度的重用程式碼，保護型別的安全
降低了強制轉換操作的成本或風險
可以對泛型類進行約束以訪問特定資料型別的方法

這裡就不貼程式碼，詳細用法請參考官網。

說了這麼多，TS的發展前景如何呢？

縱向對比

made by 乘著風

列舉幾個跟它屬性很相似的幾位，他們都是需要編譯的，編譯結果都是js.

CoffeeScript 目的是讓Js更簡潔，優美，提高可讀性，但沒有像TS一樣利用型別檢測提高程式碼健壯性，而且自從有了ES6，CoffeeScript在業界的聲音幾乎消失了。
Dart 是2011年10月谷歌推出的新一代web程式語言，它的優勢是Chrome支援，將在預版本里支援Dart. 將在V8引擎融合Dart VM虛擬機器來執行 Dart 程式可以提升效能，但是一直是個提案，穩定版現在不支援，而且其他流瀏覽器都不支援。另外，用 Dart 開發的人很少，社群也沒有什麼聲音，不過最近Google最近推出的了移動端解決方案Flutter(他是跟Facebook的RN，阿里的Weex一個維度的技術)，被國內很多團隊認可，Flutter程式需要用Dart編寫的，以後可以繼續關注。
Flow是Facebook的自家規範, 不知道大家見過沒flow格式程式碼，Facebook開源的專案很多用Flow寫的，比如React原始碼 -> 切換Chrome，
RN的原始碼也有一些模組是Flow格式的，但是也有TS格式的。
最新版的React Native中的官方專案已經改用Flow了。 -》切換Sublime
TS周邊生態、文件完整性、社群資源方面勝過Flow。
AssemblyScript呢，不是TS的對手，可以說是TS的兄弟，在接下來，我會結合TS生態和發展一起介紹。

基於TS開發的專案越來越多

angular2
ant-design
VSCode
babel7.0
WebAssembly
……

WebAssembly 與 TS

隨著Web應用變得更多更復雜，js漸漸暴露出了問題：

語法太靈活導致開發大型 Web 專案困難；
效能不能滿足一些場景的需要。

微軟的 TypeScript 通過為 JS 加入靜態型別檢查來改進 JS 鬆散的語法，提升程式碼健壯性。

對於效能問題，有Google的Dart和Firefox的asm.js，二者不被其他瀏覽器運營商認可，且語言學習成本高。

為解決這個現狀，由 Google , Microsoft , Mozilla , Apple 等幾家大公司合作發起的一個關於面向Web的通用二進位制和文字格式的專案 —> WebAssembly。

WebAssembly 並不是一門程式語言，而是一份位元組碼標準。

可以簡單把它理解為瀏覽器的組合語言。

位元組碼體積小，下載快
無需解釋執行
底層程式碼無相容性問題

四大瀏覽器巨頭很少一起做專案的, 所以它非常被業內看好。

它跟TS有什麼關係呢？上一小段有提到AssemblyScript。

目前能編譯成 WebAssembly 位元組碼的高階語言有：

AssemblyScript, c\c++，Kotlin，Golang， Rust.

AssemblyScript語法和 TypeScript 一致，對前端來說學習成本低，為前端編寫 WebAssembly 最佳選擇。

總結