Skip to main content

Interface and type aliases

TypeScript 提供了兩種機制用於集中定義類型，分別是 interface 和 type aliases。

Type aliases 型別別名​

  • 用於為一個型別定義一個更有意義的名稱，提高可讀性
  • 可以模組導入和導出，以便在不同檔案中使用
  • 無法重複命名和擴充
//types.ts
export type Amount = {
  currency: string;
  value: number;
};

// utilities.ts
import { Amount } from "./types";

function printAmount(amt: Amount) {
  const { currency, value } = amt;
  console.log(`${currency} ${value}`);
}

Interface 介面​

Interface 是定義物件以及物件延伸型別(例如：陣列、函式)的一種方式

// 定義陣列
interface StringArray {
  [index: number]: string;
}
//定義函式
interface GreetFunc {
  (person: { name: string; age: number }): void;
}
  • 用於定義物件的結構(屬性與方法)，為物件型別定義一個更有意義的名稱，以提高可讀性
  • 可以被模組導入和導出，在不同檔案中使用
  • 可以透過 extends 繼承其他 interface
  • 可以透過 implements 關鍵字，檢查物件是否符合 interface 定義的結構
  • 可以重複宣告，它們的定義會合併在一起，用於擴充型別
interface Animal {
  isAlive(): boolean;
}
interface Mammal extends Animal {
  getFurOrHairColor(): string;
}
interface Hamster extends Mammal {
  squeak(): string;
}
function careForHamster(h: Hamster) {
  h.getFurOrHairColor();
}

// 透過 implements 實現 interface
interface AnimalLike {
  eat(food): void;
}

class Dog implements AnimalLike {
  bark() {
    return "woof";
  }
  eat(food) {
    consumeFood(food);
  }
}

Type v.s. Interface​

  • 定義物件以外的型別，使用 type
  • 擴充物件型別內容，使用 interface
  • 為複雜型別或聯合型別創建一個簡潔的名稱，使用 type

參考資料​