TypeScript中的type和interface的区别是什么?
在 TypeScript 里,type
和 interface
都是用来定义类型的,但它们有一些相似之处和重要区别。
1. 相同点
都可以用来描述对象的结构(属性、方法等)。
都支持 可选属性(
?
)、只读属性(readonly
)。都可以被扩展(extend / 继承)。
都能用于函数参数、变量、返回值的类型声明。
例子:
type User1 = {name: string;age: number;
}interface User2 {name: string;age: number;
}const u1: User1 = { name: '张三', age: 18 };
const u2: User2 = { name: '李四', age: 20 };
2. 不同点
① 声明合并
interface
可以重复声明,TypeScript 会自动合并它们的成员。type
不能重复声明(会报错)。
interface Person {name: string;
}
interface Person {age: number;
}
// 合并后:{ name: string; age: number; }
const p: Person = { name: '张三', age: 18 };type PersonType = { name: string; };
// ❌ 重复声明会报错
// type PersonType = { age: number; };
② 表示的范围
type
更广,不仅能表示对象类型,还能表示:基本类型别名
联合类型
交叉类型
条件类型
元组
interface
只能描述对象结构(对象、类、函数)。
// type 可以做这些:
type MyString = string;
type ID = number | string;
type Tuple = [string, number];
type Status<T> = T extends string ? 'ok' : 'fail';// interface 做不了这些:
③ 扩展方式
interface
用extends
来继承。type
用 交叉类型(&
) 来组合。
interface A {name: string;
}
interface B extends A {age: number;
}type C = { name: string };
type D = C & { age: number };
④ 实现类
interface
可以用implements
让类去实现。type
虽然也可以被类用来约束结构,但不能被implements
直接继承联合类型等复杂类型(会有限制)。
interface Animal {name: string;
}
class Dog implements Animal {name = '旺财';
}
3. 如何选择?
如果是定义对象结构(尤其是给类用),推荐用
interface
(可合并、可继承)。如果需要用到联合类型 / 条件类型 / 元组 / 基本类型别名,只能用
type
。项目里混用是常见的:
用
interface
描述数据结构用
type
处理类型变换和复杂组合
📌 记忆口诀:
能用
interface
就用interface
,需要高级类型能力就用type
。
interface
像积木,可以拼接扩展;
type
像模具,可以塑造各种形状。
type
vs interface
对比表
特性 / 能力 | interface | type |
---|---|---|
定义对象结构 | ✅ 支持 | ✅ 支持 |
定义函数类型 | ✅ 支持 | ✅ 支持 |
定义数组 / 元组 | ❌ 不支持 | ✅ 支持 |
定义基本类型别名(如 string , number ) | ❌ 不支持 | ✅ 支持 |
联合类型(|) | ❌ 不支持 | ✅ 支持 |
交叉类型(&) | ✅ 支持(extends ) | ✅ 支持(& ) |
条件类型 | ❌ 不支持 | ✅ 支持 |
可重复声明并合并 | ✅ 支持 | ❌ 不支持 |
泛型支持 | ✅ 支持 | ✅ 支持 |
类 implements | ✅ 支持 | ⚠️ 支持有限(复杂类型可能报错) |
扩展方式 | extends | & 交叉类型 |
适合场景 | 数据结构、面向对象 | 高级类型运算、类型组合 |
📌 口诀版记忆:
interface:更像“乐高积木”,能一块一块拼接(可合并、可继承)。
type:更像“模具”,能塑造各种奇形怪状(元组、联合、条件类型都能搞)。