TypeScript中type与interface的使用和区别

一、基础概念辨析

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 通过交叉类型） ✅ 均支持类实现（implements） ✅ 现代 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 可表达更复杂类型：

• 联合类型：

  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. 类实现机制

两者均可被类实现，但语法存在差异：

// 使用 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();
}

三、场景推荐指南

优先选用 interface 的场景

1. 定义对象结构（特别是公共 API）

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

2. 需要利用声明合并时

   // 扩展第三方库类型
   declare module "vue" {
     interface ComponentCustomProperties {
       $filters: Filters;
     }
   }
   

3. 面向对象编程（类实现接口）

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

优先选用 type 的场景

1. 需要联合类型时

   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. 项目一致性：团队统一选择一种风格（或制定明确规则）

2. 公共 API：优先使用 interface（提供更友好的错误提示和扩展性）

3. 复杂类型：使用 type 表达高级类型关系

4. React Props & State：

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

六、经典案例对比

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 的使用及区别介绍完毕，更多相关 TypeScript type 与 interface 区别内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！