TypeScript介紹

官方聲明

JavaScript that scales。TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

特點

出自**Anders Hejlsberg**之手（C#，Delphi作者）
兼容ES規範，同時也有自己的一些規範（如namespace）
自帶編譯器，也是TS寫的
語言即服務（IDE，第三方庫的方法聲明等）

靜態分析

輸入錯誤

interface ISort {
  name: string,
  age: number
}

function sortByName(a: ISort[]) {
  var result = a.slice(0);
  result.sort((x, y) => {
    return x.name.localCompare(y.name);
  });
  return result;
}

執行tsc編譯：

error TS2339: Property 'localCompare' does not exist on type 'string'.

localCompare這種輸入手誤在沒有智能提示的情況下是較為常見的，如果這個函數是原生JS，那會等到運行時才會報錯。如果使用支持TS的IDE，則輸入localCompare後會直接標紅，避免運行時這塊代碼被執行到然後報錯再Debug。

非空判斷

function countLines(text?: string[]): number {
  let count = 0;
  for (const line of text) {
    if (line && line.length !== 0) {
      count = count + 1;
    }
  }
  return count;
}

執行tsc編譯：

error TS2532: Object is possibly 'undefined'.

可以看到for (const line of text) {這行中的text變量是有可能為undefined的（?:是TS語法，表示存在不存在都有可能）。這種缺少非空判斷到時的JS運行時錯誤在工作中也是容易出現的。

訪問權限

class Person {
  protected name: string;
  public age: number;
  constructor(name: string) { this.name = name; }
}

class Employee extends Person {
  static someAttr = 1;
  private department: string;

  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.name);

執行tsc編譯：

error TS2445: Property 'name' is protected and only accessible within class 'Person' and its subclasses.

Person中name屬性是protected類型，隻能在自己類中或者子類中使用，這和Java是一樣的。

interface Machine {
  move(): void
}

interface Human {
  run(): void
}

class Robot implements Machine, Human {
  run() {
    console.log('run');
  }
}

執行tsc編譯：

error TS2420: Class 'Robot' incorrectly implements interface 'Machine'.
  Property 'move' is missing in type 'Robot'.

Robot類實現多個接口時，必須實現每個接口的所有抽象方法，這也是實現多繼承的一種方法。

擴展性

TS適合大規模JS應用，正如他的官方宣傳語JavaScript that scales。

類型係統+靜態分析+智能感知/提示，使大規模的應用代碼質量更高，更好維護。
有類似VSCode這樣配套的IDE支持，方便的查看引用關係，並進行重構，再也不用全局搜索，一個個修改了。
數據結構（應用配置、前後端接口等JSON格式數據）的類型校驗，和強類型的後端配合更為無縫、健壯，方便後期前後端整體迭代、重構。

超集

由於兼容ES規範，所以可以比較方便的升級現有的JS代碼，逐漸的加類型注解。漸進式（容我盜個詞）增強代碼健壯性。不過這個也是理論上的，我目前維護的一個項目有比較重的曆史包袱，模塊管理是CommonJS/ES6 Modules混雜的，我嚐試將編譯係統從Babel完全遷移到TS，折騰後並沒有成功（Babel還是很強大的= =）。

對於曆史包袱比較多的老項目，不建議完全替換Babel，但是可以曲線引入TS，用TS編譯到ES6，再用Babel來編譯到ES5。

代碼運行時質量

大型前端應用如何兼顧開發迭代&持續交付的速度和線上運行時的的質量，近期思考後認為很重要的一點就是增強應用數據結構或者說是結構化數據（配置、前後端後接口等JSON格式數據）的穩定性、健壯性。引入強類型係統，增加編譯期檢查，減少運行時錯誤，可以顯著的改善這個點。很多問題可以在編碼時發現，而不是出現運行時錯誤時再Debug。

和Babel、Flow的對比

TypeScript 是推薦套餐，Babel 係列是自助餐。
TypeScript自帶編譯器，包含ES最新規範，還有自己的Features和類型校驗；Flow是一個類型校驗工具。在類型校驗這塊兩者目前已經相差不大。
Babel、Flow是Facebook在推，TypeScript是Microsoft在推，都有不錯的生態，但我個人感覺Flow目前還不夠成熟（聽說FB最近招了一些Lisp大牛來做這個事，沒有考證過），TS出自一位大牛（C#、Delphi作者）之手，目前生態發展的非常好，社區口碑也很不錯，感覺更靠譜些（並不是說Flow不靠譜）。

開發效率

IDE智能提示/糾錯，對於迭代、重構、減少Bug提升代碼質量會有幫助，同時也可以提升開發效率。

提示：

校驗：

隻要安裝了@types/lodash這個模塊，VSCode中輸入_可以智能提示所有方法。目前主流的JS模塊都有聲明模塊。如果是內部開發的模塊，可以自己聲明定義文件，團隊內部都可以公用這個定義文件，提升整體開發效率。可以用tsc --declaration myFile.ts快速生成聲明定義文件。