TypeScript 中interface 和 type 的区别和应用场景。

2,572 阅读2分钟

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、区别

interfacetype 的区别在于:

  • 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 类型,然后使用 & 运算符将它们合并为一个新的类型 CollegeStudentCollegeStudent 包含了 PersonStudent 的所有成员,可以用它来定义一个具有这些成员的对象。

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 成员,生成一个新的类型 PersonWithoutGenderPersonWithoutGender 类型只包含了 nameage 成员,可以用它来定义一个没有 gender 成员的对象。