3.6 interface 与 type 的区别 - 全栈应用开发修炼手册课程

🎯 学习目标

理解 interface 和 type 的核心差异
掌握声明合并特性
学会在不同场景选择合适的方式
了解最佳实践建议

📊 核心差异对比

特性	interface	type
语法	interface Name {}	type Name = ...
扩展	extends	& 交叉类型
声明合并	✅ 支持	❌ 不支持
联合类型	❌ 不支持	✅ 支持
元组类型	❌ 不支持	✅ 支持
映射类型	❌ 不支持	✅ 支持
条件类型	❌ 不支持	✅ 支持

🔄 声明合并

// interface 支持声明合并
interface User {
  name: string;
}

interface User {
  age: number;
}

// 合并后的接口
const user: User = {
  name: 'Alice',
  age: 30
};

// type 不支持声明合并
type Person = {
  name: string;
};

type Person = {  // Error: 重复标识符
  age: number;
};
      

💡

声明合并用途

声明合并常用于扩展第三方库的类型定义，如为 window 对象添加新属性。

🔀 扩展语法对比

interface extends

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}
          

type 交叉类型

type Animal = {
  name: string;
}

type Dog = Animal & {
  breed: string;
}
          

✅ 最佳实践

// ✅ 对象类型：优先使用 interface
interface User {
  id: string;
  name: string;
}

// ✅ 联合类型：使用 type
type Status = 'active' | 'inactive';
type ID = string | number;

// ✅ 元组：使用 type
type Point = [number, number];

// ✅ 工具类型：使用 type
type ReadonlyUser = Readonly<User>;

// ✅ 需要扩展第三方类型：使用 interface
declare global {
  interface Window {
    myCustomProperty: string;
  }
}
      

💡

选择建议

对象类型优先使用 interface，其他复杂类型（联合、元组、工具类型）使用 type。

📝 本节小结

✅

• interface 支持声明合并，type 更灵活
• 对象类型优先使用 interface
• 联合类型、元组、工具类型使用 type
• 两者在大多数场景可以互换