Typescript 進階應用

Typescript 除了class, interface, generic ...等跟物件導向語言語法有關以外, 還提供了幾個實用的類別.

Partial

下面定義了一個 IPlayerInfo 介面

interface IPlayerInfo {
    name: string;
    id: number;
    address: string;
}

然後下面方法的輸入參數類型是 PlayerInfo

function updatePlayerInfo(player: IPlayerInfo): void {
   // ignore
}

你可以打開VSCode 編輯器輸入上面程式碼一步一步操作試試看, 會比較能夠有感覺到Typescript 的強大之處.

當你進行以下程式碼

updatePlayerInfo({ 
    name: "flash"
});

Typescript 會馬上告知以下錯誤訊息

Argument of type '{ name: string; }' is not assignable to parameter of type 'IPlayerInfo'.
  Type '{ name: string; }' is missing the following properties from type 'IPlayerInfo': id, address

有時候我們偷懶會希望直接丟 object, 參數物件裡面的屬性內容可以省略, 直接傳部分內容就好.

我們可以修改updatePlayerInfo 方法如下

function updatePlayerInfo(player: Partial<IPlayerInfo>): void {
   // ignore
}

就可以做到部分屬性內容傳送

Readonly

以下程式碼示範了, readPlayerInfo 方法內異動了 player.id = 123

function readPlayerInfo(player: IPlayerInfo) {
    player.id = 123;
}

但有時候我們會希望 player 的內容不允許被修改, 我們可以這樣做

function updatePlayerInfo(player: Readonly<IPlayerInfo>): void {
   player.id = 123;
}

Typescript 將會告知

Cannot assign to 'id' because it is a read-only property.

Required

假設有一個介面是

interface IData {
    a?: string;
    b?: number;
}

在程式中

let obj: IData = { a: "flash" };

Typescript 不會顯示任何錯誤, 因為另一個 b 屬性也是可選值.

但有時候你會設計function 希望這個參數傳送過來的時候, 都是必選屬性

let obj: Required<IData> = { a: "flash" };

Typescript 此時就會顯示以下錯誤訊息

Property 'b' is missing in type '{ a: string; }' but required in type 'Required<IData>'.

NonNullable

宣告類型為不可以為 null 和 undefined 型態

type StringArray = NonNullable<string[] | null | undefined>;

在程式碼中

let data: StringArray = null;

Typescript 將會顯示以下錯誤

Type 'null' is not assignable to type 'string[]'.

良好的程式碼寫法

許多不嚴謹的程式碼寫法都應該修正, 降低程式碼錯誤, 減少一些怪異行為. 確保消除程式碼執行的時候一些不正確的行為, 保證程式碼執行較不容易出錯.

Javascript 有提供嚴格模式, 在程式碼開頭寫 "use strict" 就會讓瀏覽器檢查Javascript 程式碼是否有不嚴謹寫法.

例如

x = 123;

瀏覽器會顯示 x 變數未定義

Uncaught ReferenceError: x is not defined

同樣地Typescript 也有提供嚴格模式, 但更為強大更為嚴謹. 我們只需在 tsconfig.json 檔案中設定以下參數, 就可以啟動Typescript 程式碼嚴格檢查.

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true
  }
}

下面將介紹各種嚴格參數設定的說明

• noImplicitAny

禁止變數或方法中的參數用 any 類型

function sayHello(msg) {
    console.log(msg);
}

Typescript 將會拋出下面錯誤

Parameter 'msg' implicitly has an 'any' type.