首页
学习
活动
专区
圈层
工具
发布
技术百科首页 >TypeScript >TypeScript 中的 interface 和 type 有什么区别?

TypeScript 中的 interface 和 type 有什么区别?

词条归属:TypeScript

1. 声明合并

  • interface 支持声明合并:同名接口可以被多次声明,TypeScript 会自动合并它们的定义
  • type 不支持重声明:重复定义同名类型别名会导致编译错误
  • 声明合并使得 interface 成为扩展第三方库类型、增强全局类型(如 Window)的首选

2. 表达能力

  • type 可以表示联合类型(A | B)、交叉类型(A & B)、元组类型、映射类型、条件类型等
  • interface 只能描述对象形状,不能直接表示联合类型或映射类型
  • 当需要定义非对象形状的类型时,必须使用 type

3. 扩展语法

  • interface 使用 extends 关键字扩展:interface Dog extends Animal { ... }
  • type 使用 & 交叉运算符组合:type Dog = Animal & { ... }
  • extends 会在扩展时立即检查兼容性并报错;& 在遇到冲突属性时可能静默生成 never 类型

4. 错误信息质量

  • interface 保留名称,编译器错误信息更简洁易读
  • type 在错误信息中会展开为完整的结构描述,复杂类型可能显示冗长

5. 使用建议

  • 定义对象形状、公共 API 契约、类实现契约时,优先使用 interface
  • 需要联合类型、交叉类型、映射类型或条件类型时,使用 type
  • 团队应统一约定并在 ESLint 中配置相应规则,保持一致性比具体选择更重要
相关文章
TypeScript 中 type 和 interface 有什么区别?
大家好,我是前端西瓜哥,今天我们来看看 type 和 interface 的区别。
前端西瓜哥
2022-12-21
1.6K0
Note·TypeScript 中 interface 和 type 区别
interface 和 type 都可以拓展,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 extends interface。虽然效果差不多,但是两者语法不同。
数媒派
2022-12-01
5820
typescript中的class和interface
刚刚的vue3.0一发布,各大网址和社区以及公众号已经被Vue3.0的One Piece版本所霸屏,出现不同的标题有着同样内容的现象,借此热度我们不如好好回顾一下ts基础知识,备战vue3.0的正式使用。
小丑同学
2020-09-27
2.5K0
深入理解TypeScript中type和interface的区别与适用场景
在TypeScript中,type和interface都用于定义自定义类型,但它们在一些细节上有着不同的行为。本文将深入探讨type和interface的主要区别,并通过示例代码演示它们在不同情境下的使用。
啵啵肠
2023-11-16
3K0
TypeScript 基础学习笔记:interface 与 type 的异同
在 TypeScript 中,类型系统是为了增强 JavaScript 的类型安全。interface 和 type 都是创建自定义类型的手段,但它们各自有着独特的应用场景和特点。
Allen_z
2024-06-14
3.1K0
点击加载更多
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
领券