TypeScript到底有什麼好

TypeScript的主要特性

1. 超集 ：TypeScript 是 JavaScript 的一個超集。
2. 類型系統 ：正如其名，TypeScript在JavaScript的基礎上，包裝了類型機制，使其變身爲 靜態類型語言。
3. 編輯器功能 ：加強了編輯器和IDE功能，包括代碼補全、接口提示、跳轉到定義、重構等。
4. 錯誤提示 ：能夠在編譯階段就發現大部分錯誤，幫助調試程序。

JavaScript的特色

1. JavaScript 是一種輕量級的解釋性腳本語言。
2. JavaScript 是弱類型、動態類型語言，容許隱式轉換，只有運行時才能肯定變量的類型。

超集

也就是說，你不是「不用JavaScript開發而改用TypeScript」了，本質上開發語言仍是JavaScript，只是TypeScript在JavaScript的基礎上擴展了新的特性，JavaScript該有的，TypeScript都有。

爲何TypeScript的靜態類型能加強代碼的可讀性和可維護性

TypeScript經過類型註解提供編譯時的靜態類型檢查。

編程語言可簡單地看做對一系列變量的處理，變量從某個維度上講是創建在類型系統上的，就像客觀世界萬物也是由各類類型組成。

首先是基礎的類型，表明計量的數字類型，表明身份的字符串類型，表明邏輯是否的布爾類型，表明集合的對象（含數組），表明存在性的'空'。

而後是各類自定義的類型，某樣生活用品、某種職業，即面向對象編程裏的對象、類、接口的概念。

這也符和人對事物的廣泛認知，從一個類型，就能大體知道它是什麼、怎麼能獲得它、它能作什麼，減小查閱、理解、校驗的過程，最好的狀況是無需將關注點轉移……

最強大的地方還不在於基礎類型的註解，而在於自定義類型（接口或類）、內置對象（HTMLElement，Event等）的提示。

以confirmAddFruits這個組件中方法和fruits.service這個服務層的函數爲例。

1. 它是什麼

以入參fruit爲例：

• JavaScript

1. 去fruits.service.js看看，它是http請求傳給後端的參數，是個對象。
2. 到接口文檔看看。

• TypeScript

1. 是個Fruit類型的對象。
2. 操做編輯器能直接顯示fruit含有id, name, isFresh屬性，每一個屬性是什麼類型。

2. 怎麼能獲得它：

以組件成員變量fruits爲例：

• JavaScript

去data處看看，初始值是null（由於某些須要，初始值不能是[]），最多從命名推測應該是個數組，但數組是怎麼構成的，還得回想或查一下model層、view層的設計。

• TypeScript

操做編輯器能直接顯示fruits的類型是Fruit[]，即Fruit類型的單項構成的數組，因而操做數組合並。

3. 它能作什麼

this.fruitService.addFruit 是調用服務層的方法，它返回什麼？

• JavaScript

去查接口文檔

• TypeScript

返回 Observable<Fruit> ，訂閱之，獲得的數據是Fruit類型：一個水果。

// confirmAddFruits.js
export default {
  data() {
    return {
      fruits: null,
      isShowModal: false;
    }
  }
  
  confirmAddFruit(fruit) {
    this.fruitService.addFruit(fruit).then(fruit => {
      this.fruits = [fruit, ...this.fruits];
      this.isShowModal = false;
    });
  }
}複製代碼

// confirmAddFruit.ts
interface Fruit {
  id: number;
  name: string;
  isFresh: boolean
}

export class FruitsComponent {
  fruits: Fruit[] = [];
  isShowModal = false;
  
  confirmAddFruit(fruit: Fruit): void {
    this.fruitService.addFruit(fruit as Fruit).subscribe((fruit: Fruit) => {
      this.fruits = [fruit, ...this.fruits];
      this.isShowModal = false;
    });
  }
}複製代碼

// fruits.service.js  
function addFruit(fruit) {
   // ...
}複製代碼

// fruits.service.ts  
function addFruit(fruit: Fruit): Observable<Fruit> {
  // ...
}複製代碼

可讀性和可維護性

JavaScript所能作的

1. 依靠編碼規範，命名、註釋（特別是類型的註釋）。
2. 對本身編寫代碼和維護他人代碼的熟悉度。
3. 編輯器的搜索、替換、重構等功能，代碼提示、補全。（搜索替換易出錯）
4. 自動測試、手動測試。
5. 運行錯誤的提示。

TypeScript所能作的

函數參數的傳遞是是最容易出錯出bug的地方之一，有了類型註解，就能一目瞭然得知道須要傳遞什麼樣的參數，防止遺漏、誤刪。

引用類型數據相較於基本數據類型，數據的維護難度更大，有了接口定義，就再也不混亂。

此外，在編譯階段的類型檢查和錯誤提示，能夠取代不少單元測試所須要的工做。

加強的編輯器功能

TypeScript提供了靜態的代碼分析，在編譯以前，能夠過濾掉大部分錯誤，而JS是沒法作到的。

錯誤提示

隨便舉幾個例子：

1. 表單輸入的數字，獲取到的是字符串。
2. 函數參數（尤爲是數量）的檢查。不管是輸入時，仍是編譯時的檢查。
3. 最強大的不在於JS類型的提示，而在於自定義類型（接口或類）的提示。具體項的提示，編輯器中搞定，不用切換視口。

缺點

我幾乎找不出TS有什麼缺點。

惟一的就是：寫類型定義會必定程度上下降開發效率，可是在大項目中可折衷進行，磨刀不誤砍柴工。

最後的彩蛋

TypeScript最強大的應用場景：代碼分支合併衝突解決、項目重構的安全保障。

類型系統符合人對事物的廣泛認知，提供了強力的安全保障機制，智能提示大大提升代碼編寫效率！