用 type 定義 type

為什麼要用 type 將型別單獨提取?

• 集中管理：將型別定義集中管理，而不是散落在各個函數或變數中
• 提高重用性：定義一次型別，可以在多個地方重複使用
• 增強可讀性：型別名稱清楚表達其用途，讓程式碼更容易理解
• 易維護：當需要修改型別時，只需要在一個地方修改，所有使用該型別的地方都會自動更新
• 減少錯誤：避免在多處重複定義型別時可能產生的不一致
• 支援型別組合：可以透過 &（交集）和 |（聯集）靈活組合型別
• 更好的 IDE 支援：型別名稱會出現在自動完成和提示中，提升開發體驗

提示

型別命名的時候可以在前面加個大寫的 T，增加可讀性

來練習看看

const user = { 
  id: 1,
  name: "mike",
  age: 12 
};

const job = {
  baseInfo: {
    id: 1,
    name: "mike",
    age: 12,
  },
  job: "Frontend Engineer",
};

// -------
const person = {
  name: "mike",
  age: 12,
  sex: "boy",
  address: "Taiwan",
};

點擊查看解答

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

const user: TUserInfo = {
  id: 1,
  name: "mike",
  age: 12,
};

type TJob = {
  baseInfo: TUserInfo;
  job: string;
};

const job: TJob = {
  baseInfo: {
    id: 1,
    name: "mike",
    age: 12,
  },
  job: "Frontend Engineer",
};

// -------

type TBasicInfo = {
  name: string;
  age: number;
};
type TProfileDetail = {
  sex: string;
  address: string;
};
type TPerson = TBasicInfo & TProfileDetail;
const person: TPerson = {
  name: "mike",
  age: 12,
  sex: "boy",
  address: "Taiwan",
};