一、基本概念對比

1. 基本語法

interface 示例：

interface User {
  id: number;
  name: string;
}

interface Admin extends User {
  privileges: string[];
}

type 示例：

type User = {
  id: number;
  name: string;
};

type Admin = User & {
  privileges: string[];
};

2. 核心相同點

? 都能描述對象形狀
? 都支持擴展（interface 用 extends，type 用交叉類型）
? 都支持實現(xiàn)（implements）
? 現(xiàn)代 TypeScript 中性能差異可以忽略

二、關(guān)鍵差異詳解

1. 擴展方式不同

interface 使用繼承：

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

type 使用交叉類型：

type Animal = {
  name: string;
};

type Bear = Animal & {
  honey: boolean;
};

2. 聲明合并（Interface 獨有）

interface User {
  name: string;
}

interface User {
  age: number;
}

// 最終 User 包含 name 和 age 屬性
const user: User = {
  name: "Alice",
  age: 30
};

type 不允許重復(fù)聲明，會報錯

3. 類型表達能力

type 能表達更復(fù)雜的類型：

• 聯(lián)合類型：

  type ID = number | string;
  

• 元組類型：

  type Point = [number, number];
  

• 映射類型：

  type Readonly<T> = {
    readonly [P in keyof T]: T[P];
  };
  

• 條件類型：

  type IsString<T> = T extends string ? true : false;
  

4. 類實現(xiàn)（implement）

兩者都可以被類實現(xiàn)，但語法不同：

// 使用 interface
interface ClockInterface {
  currentTime: Date;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
}

// 使用 type
type ClockType = {
  currentTime: Date;
};

class DigitalClock implements ClockType {
  currentTime: Date = new Date();
}

三、使用場景推薦

優(yōu)先使用 interface 的情況

1. 定義對象形狀（尤其是公共 API）

   // 更好的做法
   interface Config {
     apiUrl: string;
     timeout: number;
   }
   

2. 需要聲明合并時

   // 擴展第三方庫類型
   declare module "vue" {
     interface ComponentCustomProperties {
       $filters: Filters;
     }
   }
   

3. 面向?qū)ο缶幊?/strong>（類實現(xiàn)接口）

   interface Serializable {
     serialize(): string;
   }
   
   class Document implements Serializable {
     serialize() {
       return "...";
     }
   }
   

declare namespace Express {
  interface Request {
    user?: User;
  }
}

// 無法這樣擴展第三方類型
type Express.Request = {
  user?: User;
};

type ModalProps = {
  visible: boolean;
  onClose: () => void;
  children?: React.ReactNode;
} & (
  | {
      type: "alert";
      message: string;
    }
  | {
      type: "confirm";
      question: string;
    }
);