TypeScript中 type 与 interface 的区别详解

1. 基础定义与适用范围

type 关键字可以为任何现有类型创建一个新的名字，其适用范围比 interface 更广：

• 基本类型别名：type 可以将字符串、数字等基础类型重命名，而 interface 仅能描述对象类型。
• 联合类型：使用 | 定义联合类型是 type 的特有功能。
• 元组类型：利用 [] 或泛组形式定义有序集合。
• 其他高级类型：如映射类型、条件类型等通常通过 type 实现。

// type 示例：涵盖基本、联合、对象及元组
type UserName = string;
type UserId = string | number; 
type Person = { id: UserId, name: UserName, age: number };
type Tuple = [number, string];
// const p: Tuple = [1, "abc"];

2. 核心区别

第1步：检查声明合并能力（Extendability）

interface 具有“开放封闭”的特性，同名接口可以自动合并。这在处理第三方库扩展时非常有用。如果代码中对同一接口名进行多次声明，TypeScript 会将它们的属性叠加：

// interface 声明合并示例
interface Person { name: string }
interface Person { age: number } // 自动合并，Person 现在包含 name 和 age
// const p: Person = { name: 'Tolu', age: 0 };

如果使用 type 定义同名类型，再次定义会导致编译错误：

// type 重复声明报错示例
type Person { name: string };
type Person { age: number }; // Error: 标识符“Person”重复。ts(2300)

第2步：验证索引签名兼容性

当需要将一个具体类型的对象赋值给带索引签名的接口时，type 往往比 interface 更具灵活性。

// 定义带索引签名的类型/接口
type PropType = { [key: string]: string };
interface IPropType { [key: string]: string };

const dataObj = { title: "订单页面" }; 
// dataType 使用 type 定义的具体对象结构
type DataType = typeof dataObj; 
// dataType1 使用 interface 定义的结构
interface DataType1 { title: string; }

let props: PropType;
props = dataObj;     // ✅ 成功
props = data1 as any; // ❌ 失败：index signature missing (DataType1 缺少显式索引签名)
// 注意：实际测试中 interface 定义的具名属性对象也可被接受，但若需强制兼容动态键值，type 组合类型更容易控制

出现上述差异的原因是：interface 由于支持合并，编译器无法确定该接口最终会添加哪些未知成员，因此在严格模式下校验不通过；而 type 一旦定义即为静态快照，没有后续变数。

3. 相似之处

第3步：了解共同支持的高级特性

尽管有区别，二者在处理面向对象结构和函数签名方面是完全一致的：

描述对象和函数

// Type 定义函数签名
type SetPoint = (x: number, y: number) => void;

// Interface 定义函数签名
interface SetPointFunc {
    (x: number, y: number): void;
}

继承方式

extends 关键字可用于 interface 对 interface 或 type 的继承；而在 type 中继承需要借助交叉类型（Intersection Types &）：

// Interface 互继承
type BaseA = { a: string };
interface Sub extends BaseA { b: number };

// Type 互继承
type BaseB = { a: string };
type SubType = BaseB & { b: number };

类实现（Implements）

Class 可以实现 interface 和 type 定义的类型。但需注意，如果 type 定义为联合类型（Union Type），则无法被 Class 直接 implements：

// ❌ 联合类型的 type 不能被 implements
type UnionType = { x: number } | { y: number };
class Foo implements UnionType { ... } 

4. 最佳实践建议

根据官方推荐和社区经验，遵循以下原则可保持代码风格统一：

1. 优先使用 interface：在大多数面向对象的场景下，interface 语义更清晰，且支持通过模块声明（Declaration Merging）灵活扩展第三方库的类型定义。
2. 使用 type 处理特殊情况：需要使用联合类型（Union）、交叉类型（Intersection）、映射类型或简单的变量重命名时，必须选用 type。
3. 组件 Props 管理：在 React/Vue 等框架中，对于组件输入输出（Props），推荐使用 type，这能有效防止开发者意外向类型中添加额外属性，确保接口契约不被破坏。

以上就是详解TypeScript中type与interface的区别的详细内容，更多关于TypeScript type interface区别的资料请关注本站其它相关文章！