以開發者角度看 TypeScript

TypeScript 是 Angular 欽定的開發語言,所以學 Angular 一定要學 TypeScript,但很多人認為 TypeScript 是 JavaScript 的方言,不是 JavaScript 標準,因而有所疑慮,本文簡單介紹 TypeScript 的歷史與特色,提供大家技術選擇的參考。

Version


TypeScript 2.3

什麼是 TypeScript?


ts000

在 TypeScript 官網,大大的 3 個字

JavaScript that scales.

簡單的說,TypeScript 就是為了讓 JavaScript 可以寫大型應用程式商業邏輯所設計,讓 JavaScript 不再只是控制 DOM 而已,而是真的可以寫複雜商業邏輯。

Visual Studio Code 就是使用 TypeScript 開發。

TypeScript 既然稱為 TypeScript,重點就是將 JavaScript 加上 type

  • 更多型別 (more types) 與強型別檢查
  • 多型 (interface)
  • 泛型 (generic)

ts001

一旦有了型別,則很多圍繞在型別的技術都可在 TypeScript 使用。

TypeScript 的歷史


TypeScript 是由 Turbo Pascal、Delphi、J++ 與 C# 的爸爸 Anders Hejlsberg 所設計的程式語言,Anders 在很年輕時,就立志要幫 JavaScript 寫一個 compiler,在他 52 歲時,發表了 TypeScript,幫 JavaScript 補上很多強型別語言該有的元素,並且相容 JavaScript。

ts002

只要是 ES5、ES6 有的東西,TypeScript 都會概括承受,所以你原本在 ES5、ES6 的投資,都可以繼續用在 TypeScript。

Angular 團隊原本用自己的 AtScript 開發,它除了有 TypeScript 的強型別外,更擴展了一些東西,當然也包含 ES5、ES6。

ts005

2015 年 3 月,Angular 團隊決定從原本自己的 AtScript,改用 Microsoft 的 TypeScript,Google 專心於 framework 部分,Microsoft 則專心於程式語言部分,這也是 Google 與 Microsoft 首次攜手合作。

ts003

原本 Angular 大量依賴 AtScript 的 annotation,為了配合 Angular,TypeScript 根據了 ECMAScript 的 decorator 草案加以實作,在 NG-Conf 2015 也宣布 AtScript 與 TypeScript 合而為一。

ts004

在 NG-Conf 2017,Google 宣布 TypeScript 正式成為 Google 內部所使用的語言之一。

ts006

TypeScript 雖然早在 2012 年就上市,但始終叫好不叫座,尤其遠不如 CoffeeScript,但在 2015 年開始有了爆炸性的成長。

因為 TypeScript 總算有殺手級的應用出現:Angular。

為什麼選擇 TypeScript?


除了 Angular 挑選 TypeScript 外,讓我們回歸需求面,為什麼要選擇 TypeScript?

JavaScript 規格與瀏覽器支援

ts007

在今年的 Microsoft Build 2017,Anders Hejlsberg 提到了 JavaScript 所謂的 feature gap,以往我們在寫 JavaScript 時,都要很在乎瀏覽器是否支援了 JavaScript 某個 keyword 與 function,以目前來說,ES7 (ES2016) 規格都已經出來,但瀏覽器卻只有支援 ES5 與少部份 ES6,因此很多 JavaScript 語言功能根本是看得到但吃不到。

但透過 TypeScript,你立刻就能使用最新的 JavaScript 規格,透過編譯技術將 TypeScript 編譯成 ES5,不用再擔心瀏覽器版本問題。

前端越來越複雜

JavaScript 一開始設計只是為了控制 DOM,但隨著 Ajax 與 SPA 出現後,為了更好的使用者體驗,我們開始將一部分的商業邏輯寫在 JavaScript,這也使得前端常常動不動出現上千行的程式碼,JavaScript 的可維護性一直受到質疑,因此我們需要一個能夠寫複雜商業邏輯的語言。

JavaScript 的 ES6、ES7 … 已經朝更成熟的語言邁進,不過現階段還不夠成熟,TypeScript 則包含了開發大型應用程式所需要的必要元素。

強型別 + 編譯 = 大型應用程式的保證

Web 發展之初,由於需求單純,無論是前後端,都放棄了強型別與編譯技術,改用弱型別與解譯技術,但 Web 20 年來的發展,前後端都越來越複雜,弱型別與解譯技術則面臨了強大的挑戰:

  • Framework 越來越龐大,眾多的 class 與 method,弱型別無法 intellisense。
  • 參數沒有型別,也沒有編譯器檢查,因此要撰寫大量的驗證參數的程式碼。
  • 沒有編譯做第一層的把關,因此必須寫大量測試取代編譯器,測試的 coverage 必須要拉很高。

你覺得寫型別很麻煩?寫測試不是更麻煩?

你覺得寫測試很麻煩?手動測試不是更麻煩?

有了強型別 + 編譯保護,透過編譯器檢查,讓我們可以少寫很多測試,專注在為商業邏輯的需求寫測試,而不是為了追求 coverage 100% ,為測試而寫測試。

Multi-Paradigm

因為 TypeScript 包含 JavaScript (ES5、ES6、ES7 …),而 JavaScript 比較偏向 FRP (Functional Reactive Programming),但 TypeScript 有自己的強型別系統,比較偏向 OOP (Object Oriented Programming) 與 GP (Generic Progrmming),因此在寫 TypeScript 時,基本上你會有 3 套武器可用:

  • FRP : Functional Reactive Programming
  • OOP : Object Oriented Programming
  • GP : Generic Programming

可以視專案需求與規模,選擇適當的武器,不再你手上只有錘子,所有的東西都是釘子。

Conclusion


  • TypeScript 是我這幾年來,僅見的集優雅強悍於一身的程式語言,原本因為 Angular 學習 TypeScript,但最後卻發現對於 TypeScript 的愛遠勝於 Angular。
  • 強型別 + 編譯才是開發大型應用程式的保證,讓我們可以根據需求寫測試,不是為測試而寫測試。
  • TypeScript 融合 FRP、OOP 與 GP,在 multi-paradigm 下,你可以選擇適當的武器,不再手中只有錘子。

Reference


Anders Hejlsberg, TypeScript
stack overflow, What is difference between TypeScript and AtScript?
Jonathan Turner, Angular 2: Built on TypeScript
@ngconf, AtScript is TypeScript
TJ VanToll, The Rise of TypeScript?
Microsoft Build 2017, What’s new in TypeScript

2017-06-14