[ Day-001 ] TypeScript 特性、優缺點比較

在開始介紹 TypeScript 前，先了解它給予我們的好處與壞處

優點

• 隱含型別推斷
  • 並非一定要寫好寫滿 type annotations
• 靜態型別檢查
  • 程式碼會在 compile time 甚至是在撰寫時就告知錯誤避免 Bug 發生
  • 在型別撰寫上並非強制 ( 因為需要兼容於 JavaScript )
• 程式碼自動補全
  • 自動補全遺失成員
  • 提示 ( intellisense )
• 程式碼導覽
  • 可以導覽到 reference
  • 可以導覽到 definition
  • 便於重構
    • 由於知道相依關係在更改簽章 ( signature ) 或是命名時都相對安全跟精確
  • 文件與程式碼一氣呵成

缺點

• 學習成本相較高昂
• 需要撰寫比原本多的程式碼
  • 需要花時間在撰寫 types 跟 type annotations，但也是同時降低後續維護成本跟 Debug 時間
• 額外的編譯時間
  • 需使用 tsc 編譯程式碼，如果使用 JavaScript 於 Browser 只需要過 babel 就好

優點細探

隱含型別推斷

即使沒有定義 user 的型別，當使用到沒有的成員時也會報錯

const user = {
    id: 'guychienll',
    name: 'Guy Chien',
};

console.log(user.age); // Property 'age' does not exist on type '{ id: string; name: string; }'. ts(2339)

因為 user 已經被隱含的推斷成下述的型別

Type Inference

type user = {
    id: string;
    name: string;
};

靜態型別檢查

當清楚知道變數是什麼型別時
由於 number 型別並沒有 toLocaleLowerCase 方法可以 invoke
將會在 compile 時就事先報錯

const age: number = 26;

age.toLocaleLowerCase(); // Property 'toLocaleLowerCase' does not exist on type 'number'. ts(2339)

而之所以說不是強制的
是因為如果今天將寫法改為 any
將可以跳過型別檢查
但也就因此會產生錯誤
因此千萬不要隨意使用 any

const age: any = 26;

age.toLocaleLowerCase();

程式碼自動補全

自動補全遺失成員

如果型別上是 required 但卻沒有被定義
將可以透過 quick fix CMD + . 快速修正
補全該成員預設值

Add Missing Properties

type user = {
    id: string;
    name: string;
    age: number;
};

const user: user = {
    id: '',
    name: '',
    age: 0,
};

提示 intellisense
如果是使用 VSCode 可以使用 CMD + i 去 trigger suggest
或是平時在開發時打 . operator 其實就會自動觸發了

程式碼導覽

可以使用 SHIFT + F12 或是使用 CMD + SHIFT + P trigger action prompt 輸入 Go To References
就可以找出跟此 symbol 相關的所有參考
如果是 vim 開發者可以使用 gr 意指 go to references
references 包含 definition

可以使用 F12 或是使用 CMD + SHIFT + P trigger action prompt 輸入 Go To Definition
就可以找出跟此 symbol 關聯的定義處
如果是 vim 開發者可以使用 gd 意指 go to definition
將可以看到清楚的簽章呼應到 文件與程式碼一氣呵成

./node_modules/@types/lodash/common/array.d.ts

interface LoDashStatic {
    /**
     * Creates a duplicate-free version of an array, using
     * [`SameValueZero`](http://ecma-international.org/ecma-262/6.0/#sec-samevaluezero)
     * for equality comparisons, in which only the first occurrence of each element
     * is kept.
     *
     * @category Array
     * @param array The array to inspect.
     * @returns Returns the new duplicate free array.
     * @example
     *
     * _.uniq([2, 1, 2]);
     * // => [2, 1]
     */
    uniq<T>(array: List<T> | null | undefined): T[];
}

參考連結

• TypeScript HandBook - The Basics