一、基本概念對比

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 中性能差異可以忽略

二、關鍵差異詳解

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 不允許重復聲明，會報錯

3. 類型表達能力

type 能表達更復雜的類型：

• 聯(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. 面向對象編程（類實現(xiàn)接口）

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

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

1. 需要聯(lián)合類型時

   type Result = Success | Failure;
   

2. 需要元組類型時

   type Coordinates = [number, number];
   

3. 需要復雜類型運算時

   type Partial<T> = {
     [P in keyof T]?: T[P];
   };
   

4. 需要類型別名簡化時

   type StringOrNumber = string | number;
   

四、性能與編譯差異

五、最佳實踐建議

1. 項目一致性：團隊統(tǒng)一選擇一種風格（或制定明確規(guī)則）

2. 公共 API：優(yōu)先使用 interface（更好的錯誤提示和擴展性）

3. 復雜類型：使用 type 表達高級類型關系

4. React Props & State：

   // 推薦用法
   type Props = {
     visible: boolean;
   };
   
   type State = {
     count: number;
   };
   
   class Component extends React.Component<Props, State> {}
   

六、經(jīng)典案例對比

1. 擴展第三方庫類型

interface 方式（推薦）：

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

type 方式（不可行）：

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

2. 組件 Props 類型

type 方式（推薦）：

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

到此這篇關于TypeScript中type與interface的使用和區(qū)別的文章就介紹到這了,更多相關TypeScript type與interface區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論