TypeScript中，type、interface、class的區別

shellon發表於2024-07-31
TypeScript

type

用於定義物件型別別名、聯合型別、交叉型別等等

// 型別別名
type Name = { name: string };

// 聯合型別
type StringOrNumber = string | number;

// 交叉型別
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age;

interface

定義物件型別的另一種方式

type 和 interface 非常相似，在很多場景下，兩者可以自由選擇。interface 的大部分特性在 type 上是適用的，關鍵的區別在於 interface 可擴充套件，能夠宣告合併，而 type 需要宣告新的型別來增加新屬性

interface User {
    name: string
    age: number
}
​
interface User {
    sex: string
}
​
/**
User 介面為 {
    name: string
    age: number
    sex: string
}
*/


type User {
    name: string
    age: number
}
​
type User {
    gender: string
}

 // Error: Duplicate identifier 'User'.

type Person = User & {
    gender: string
}

interface 能夠繼承和實現

// 繼承
interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square: <Square> = {};
square.color = "blue";
square.sideLength = 10;

// 實現
interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

class

也是用來定義物件型別的，包含屬性和方法實現。與 type 和 interface 不同的是 class 定義的型別資訊會儲存在編譯後的程式碼中。

class User {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Employee extends User {
  role: string;

  constructor(name: string, age: number, role: string) {
    super(name, age);
    this.role = role;
  }
}

總結

雖然 type 和 interface 在很多場景下可以互換使用，但它們在某些特定場景下有著各自的優勢。type 更適用於組合不同型別，如聯合型別、交叉型別等，而 interface 更適用於定義物件的形狀，特別是在物件導向程式設計中。class 則提供了完整的型別定義和實現，可以在執行時進行例項化和操作。

在實踐中，我們應該根據實際需求和場景選擇合適的型別宣告方式。例如，在定義一個複雜的物件型別時，可以使用 interface；在組合不同型別時，可以使用 type；在建立具有行為的物件時，可以使用 class。

參考連結

typescript 官網

相關文章