两者的共同点
1、interface 和 type 都可以用来声明一个对象
interface 声明对象
interface UserInterFace {
name: string;
age: number;
getName: () => string
}
const user: UserInterFace = {
name: 'xx',
age: 20,
getName() { return 'xx' }
}
type 声明对象
type UserType = {
name: string;
age: number;
getName: () => string;
}
const user: UserType = {
name: 'xx',
age: 20,
getName() { return 'xx' }
}
2、interface 和 type 都可以被 class 实现
interface 声明对象,被 class 实现
interface UserInterFace {
name: string;
age: number;
getName: () => string
}
class User implements UserInterFace {
name: string;
age: number;
getName: () => string;
}
type 声明对象,被 class 实现
type UserType = {
name: string;
age: number;
getName: () => string;
}
class User implements UserInterFace {
name: string;
age: number;
getName: () => string;
}
3、interface 和 type 都可以被扩展
interface 扩展 interface 和 type
interface User1 { name: string } // 扩展 interface
type User1 = { name: string } // 扩展 type
interface User2 extends User1 { age: number }
const u2: User2 = { name: 'xxx', age: 12 }
type 扩展 type 和 interface
type T1 = { name: string } // 扩展 type
interface T1 = { name: string } // 扩展 interface
type T3 = T1 & {
age: number
};
const obj2: T3 = { name: 'xxx', age: 123 }
两者的不同点
1、type 可以声明基础类型
type name = string
const str1: name = 'xxx'; // 合法
const str2: name = 12; // 不合法
2、type 可以声明联合类型、交叉类型
type T1 = { name: string }
type T2 = { age: number }
type T3 = T1 | T2; // 联合类型
type T4 = T1 & T2; // 交叉类型
const obj1: T3 = { name: 'xxx' }
const obj2: T4 = { name: 'xxx', age: 123 }
变种:interface 可以参与到 联合类型
或 交叉类型
type T1 = { name: string }
interface T2 { age: number }
type T3 = T1 | T2; // 联合类型
type T4 = T1 & T2; // 交叉类型
const obj1: T3 = { name: 'xxx' }
const obj2: T4 = { name: 'xxx', age: 123 }
3、interface 可以重复声明
interface:支持 声明合并:多次声明同名 interface
会自动合并
interface User { name: string; }
interface User { age: number; }
// 合并为 { name: string; age: number; }
type:不支持声明合并:重复定义同名 type
会报错
type User = { name: string; };
type User = { age: number; }; // Error: Duplicate identifier
4、implements 实现的不同
interface: 类可以直接通过 implements
实现一个 interface
class Admin implements User { /* ... */ }
type 如果 type
定义的是 对象类型或函数签名,类也可以实现
type UserType = { name: string };
class Admin implements UserType { /* 合法 */ }
type MixedType = string | number;
class Foo implements MixedType {} // Error
5、对于复杂类型的支持程度
type:可处理 联合类型、交叉类型、元组 等复杂类型,且支持工具类型操作(如 Partial
、Pick
)
type ErrorCode = string | number;
type PartialUser = Partial<User>;
interface:无法直接定义联合类型或元组,需通过组合其他类型实现
如何选择
- 优先使用
interface
:当需要 声明对象类型 或 利用声明合并 特性时。 - 优先使用
type
:当需要定义 联合类型、元组、工具类型 或 复杂类型操作 时