TypeScript 中的 Interface 和 Type 的区别与应用场景

前端

2023-09-11 16:14:01

一、Interface 和 Type 的区别

1. 定义方式

Interface 使用 interface 定义，Type 使用 type 关键字定义。
Interface 可以定义多个属性，Type 只可以定义一个属性。

2. 继承

Interface 可以继承其他 Interface，Type 不可以继承其他 Type。
Interface 可以继承多个 Interface，Type 不可以继承多个 Type。

3. 类型检查

Interface 只能用于类型检查，Type 可以用于类型检查和赋值。
Interface 可以用在类、接口和枚举中，Type 只能用在类和接口中。

二、Interface 和 Type 的应用场景

1. Interface

定义对象类型：Interface 可以用来定义一个对象的类型，从而可以对对象的属性和方法进行类型检查。
定义函数类型：Interface 可以用来定义一个函数的类型，从而可以对函数的参数和返回值进行类型检查。
定义类类型：Interface 可以用来定义一个类的类型，从而可以对类的属性和方法进行类型检查。

2. Type

定义别名类型：Type 可以用来定义一个别名类型，从而可以将一个类型赋给另一个名称。
定义联合类型：Type 可以用来定义一个联合类型，从而可以表示一个类型可以是多种类型之一。
定义交叉类型：Type 可以用来定义一个交叉类型，从而可以表示一个类型可以是多种类型的交集。

三、Interface 和 Type 的选择

在实际开发中，我们应该根据具体情况来选择使用 Interface 还是 Type。

如果我们需要定义一个对象类型，那么应该使用 Interface。
如果我们需要定义一个函数类型，那么应该使用 Interface。
如果我们需要定义一个类类型，那么应该使用 Interface。
如果我们需要定义一个别名类型，那么应该使用 Type。
如果我们需要定义一个联合类型，那么应该使用 Type。
如果我们需要定义一个交叉类型，那么应该使用 Type。

四、实例

下面是一个使用 Interface 和 Type 的示例：

// 定义一个对象类型
interface Person {
  name: string;
  age: number;
}

// 定义一个函数类型
type GreetFunction = (person: Person) => void;

// 定义一个类类型
class Student implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// 定义一个别名类型
type NumberOrString = number | string;

// 定义一个联合类型
type UnionType = Person | Student;

// 定义一个交叉类型
type IntersectionType = Person & Student;

// 创建一个 Person 对象
const person: Person = {
  name: 'John',
  age: 30
};

// 调用 GreetFunction 函数
const greetFunction: GreetFunction = (person: Person) => {
  console.log(`Hello, ${person.name}!`);
};

// 创建一个 Student 对象
const student: Student = new Student('Jane', 20);

// 调用 greet 方法
student.greet();

// 使用别名类型
const numberOrString: NumberOrString = 123;

// 使用联合类型
const unionType: UnionType = person;

// 使用交叉类型
const intersectionType: IntersectionType = student;