在 TypeScript 中，我們很常會將類似的型別抽出變成一個變數來使用，這就是今天的主題，type 和 interface

Type

在 TypeScript 中，tpye 關鍵字可以用於創建型別別名，方面閱讀

// 基本類型
type UserId = string
// 聯合類型
type status = "pending" | "approved" | "rejected"
// 物件類型
type User = {
    id: UserId,
    name: string,
    status: status
}

interface

與 type 同樣，interface 也是用於創建型別別名，在大多數情況可以將 type 關鍵字改成 interface 來使用，但 interface 較常會配合使用其特殊功能 "擴展"、"實現"

// 基本接口
interface Person {
  name: string;
  age: number;
}
// 擴展接口
interface Employee extends Person {
  employeeId: string;
}
// 實現接口
class Manager implements Employee {
  name: string;
  age: number;
  employeeId: string;

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

  greet() {
    console.log(`Hello, I'm ${this.name}, a manager.`);
  }

  work() {
    console.log(`${this.name} is managing tasks.`);
  }
}
// 使用類
const manager = new Manager("Alice", 35, "E12345");
manager.greet(); // 輸出: Hello, I'm Alice, a manager.
manager.work();  // 輸出: Alice is managing tasks.

其中 interface 的一些功能已經在 ES6 時透過 Class 來實現了，但對於希望完整實現 OOP 的開發者來說使用 TypeScript 可以更加的約束以及結構化自己的前端代碼，關於 interface 的 "擴展" 和 "實現" 將會在後續文章中補充