TypeScript Interface和Type的异同点解析

前端

2023-12-17 07:50:06

TypeScript 的 Interface 和 Type 都是用于定义和检查类型，它们有很多相似之处，也有一些重要差异。

共同点

Interface 和 Type 都可以用来定义对象的形状，即对象的属性和方法。
Interface 和 Type 都可以用来为函数的参数和返回值指定类型。
Interface 和 Type 都可以用来约束泛型的类型参数。
Interface 和 Type 都可以用来进行类型保护。

区别

Interface 是一个声明，而 Type 是一个别名。这意味着 Interface 不能被实例化，而 Type 可以。
Interface 只允许定义属性和方法，而 Type 还可以定义其他类型的成员，如构造函数、索引签名、调用签名等。
Interface 可以被多个其他类型扩展，而 Type 不能。
Interface 可以被实现，而 Type 不能。
Interface 可以被用作类型别名，而 Type 不行。

使用场景

Interface 更适合用来定义对象和函数的形状，以及为泛型的类型参数指定约束条件。
Type 更适合用来定义其他类型的成员，如构造函数、索引签名、调用签名等。
Type 也更适合用来定义联合类型和元组类型。

示例

interface Person {
  name: string;
  age: number;
}

type PersonType = {
  name: string;
  age: number;
  greet(): void;
};

function greetPerson(person: Person) {
  console.log(`Hello, ${person.name}!`);
}

const person: PersonType = {
  name: 'John Doe',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

greetPerson(person);