TypeScript 極簡介紹

Leo Lin

4 min readDec 24, 2018

TypeScript 是一個基於 JavaScript 的超集合 (superset) 語言，將強型別概念帶入 JavaScript，結合了 ES5 與 ES6，與本身的擴充內容，且完全相容 JavaScript。

所謂的 SuperSet (超集合)是什麼呢？

JavaScript 是一個語言的集合，而 TypeScript 又包含了完整的 JavaScript 與自己額外的擴充內容。

在 TS 檔案中可以輕鬆使用新的語法 (ES6+)，再透過 TypeScript Compiler 編譯為 JS 檔給瀏覽器解讀。

先讓我們透過一個例子來了解 TypeScript 帶來怎樣的影響：

function fullName (person){
  return person.firstName + ' ' + person.lastName
}function sum (){
  var sum = 0
  for(var i = 0; i < arguments.length; i++){
    sum += arguments[i]
  }
  return sum
}

上面這樣的 JavaScript 函式，多人協作時怎麼知道傳入的東西是什麼呢？或許可以透過註解來溝通，但註解不是萬能，甚至不一定可信。又或是哪天一個忘記，傳入了一些錯誤型別的值，當下無法察覺，只能在 runtime 才知道發生問題。

這時候使用 TypeScript 就能讓程式碼更加 “文件化 ” ，提升本身的表達性，讓我們光看 code 就能了解需要什麼東西。讓我們使用 TypeScript 來改寫：

interface PersonType {
  firstName: string
  lastName: string
}function fullName ({firstName, lastName}: PersonType): string{
  return `${firstName} ${lastName}`
}function sum (...num: number[]): number{
   return num.reduce((sum, num) => sum += num, 0)
}

經過了 “ : ” 後方的型別定義，就能夠執行靜態檢查。如果做了錯誤的操作，編譯前就會報錯讓我們知道操作出了問題。你可能會想，我看一看內容就知道需要哪些格式了，為什麽還要寫這麼多搞得很麻煩？

這只是因為範例內容很少。在多人協作與龐大架構下，邏輯牽動邏輯，以往只能一個一個慢慢對照，現在多了一道有用的資訊就能更友善的解讀出需要的規格，並且自動預防錯誤，豈不是事半功倍呢？

總而言之，使用 TypeScript 差不多有這些面向的好處：

引入強型別概念，在開發時期就能預先進行靜態的型別檢查，避免預期外的錯誤
大幅增強的物件導向系統，增加程式碼的表達性，進而改善團隊維護成本與開發效率

但相對缺點為：

較高的學習成本：需要了解 Interface、Class、Generic 等等前端工程師較少接觸到的概念
與部分 Library 可能無法完美結合

但以上看來，TypeScript 還是瑕不掩瑜，而且對 JavaScript 也完全相容，馬上把手邊的 JS 檔改成 TS 副檔名即可馬上使用，並且能漸進式的學習，相當方便。如果你也喜歡有一些更嚴謹的約束來提升程式碼品質，那就馬上來試試看吧！

本篇僅極短認識與推薦 TypeScript，詳細深入內容後續可能再陸續整理成文章

TypeScript 極簡介紹

Written by Leo Lin