1、场景
interface 是用来描述对象类型的结构,可以定义对象的属性名和属性值的类型,也可以定义函数类型。
interface User {
name: string;
age: number;
sayHello(): void;
}
const user: User = {
name: "Alice",
age: 30,
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
},
};
这里定义了一个 User 接口,它包含了一个字符串类型的 name 属性、一个数字类型的 age 属性和一个不返回值的函数类型的 sayHello 方法。我们可以用这个接口来定义一个满足这个结构的对象。
type 可以定义任何类型,不仅仅是对象类型,也可以定义基本类型、联合类型、交叉类型等。
type Age = number;
type Person = {
name: string;
age: Age;
};
const alice: Person = {
name: "Alice",
age: 30,
};
这里定义了一个 Age 类型和一个 Person 类型,Person 类型包含了一个字符串类型的 name 属性和一个 Age 类型的 age 属性。我们可以用 type 来定义一个新的类型别名,然后用这个别名来定义一个对象。
2、区别
interface 和 type 的区别在于:
interface只能定义对象类型,而type可以定义任何类型。interface可以被合并(merge),如果多个同名接口存在,它们会被自动合并为一个接口,而type不行。interface支持扩展(extends),可以扩展其他接口;而type不支持扩展。
使用场景:
- 如果需要定义一个对象的类型,应该使用
interface。 - 如果需要定义一个联合类型、交叉类型等,或者需要定义一个类型别名,应该使用
type。 - 如果需要对一个已有的类型进行扩展,或者需要合并多个同名接口,应该使用
interface。
3、type的类型合并
type 可以定义类型别名,它们可以使用 & 运算符合并多个类型,生成一个新的类型。
type Person = {
name: string;
age: number;
};
type Student = {
id: number;
course: string;
};
type CollegeStudent = Person & Student;
const alice: CollegeStudent = {
name: "Alice",
age: 20,
id: 1001,
course: "Computer Science",
};
这里定义了 Person 类型和 Student 类型,然后使用 & 运算符将它们合并为一个新的类型 CollegeStudent。CollegeStudent 包含了 Person 和 Student 的所有成员,可以用它来定义一个具有这些成员的对象。
type Person = {
name: string;
age: number;
gender: "male" | "female";
};
type PersonWithoutGender = Omit<Person, "gender">;
const alice: PersonWithoutGender = {
name: "Alice",
age: 20,
};
这里定义了 Person 类型,它包含了字符串类型的 name 属性、数字类型的 age 属性和 gender 属性,gender 属性的类型是 "male" 或 "female" 字符串字面量类型。然后使用 Omit 工具类型排除 Person 类型中的 gender 成员,生成一个新的类型 PersonWithoutGender。PersonWithoutGender 类型只包含了 name 和 age 成员,可以用它来定义一个没有 gender 成员的对象。