TypeScript 中 type 和 interface 的区别详解

2022-12-05 23:10:53

TypeScript 中 Type 与 Interface 的深入剖析：理解异同，优化代码

TypeScript 中的 type 和 interface 都是声明类型的强大工具，它们使您能够为变量、函数和类指定类型。虽然它们具有相似之处，但两者在使用场景、语法和某些功能方面存在着关键差异。本文将深入探讨 type 和 interface 的异同，指导您在 TypeScript 项目中明智地选择使用哪一种。

语法差异

首先，type 和 interface 在语法上有所不同：

type： 使用 type 声明，后跟类型别名和类型定义。
interface： 使用 interface 关键字声明，后跟接口名称和类型定义。

继承性

继承性是 interface 独有的一个重要特性。 interface 可以继承自其他 interface，允许您创建层次结构并重用类型定义。例如：

interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}

在上面的示例中，Dog interface 继承自 Animal interface，这意味着它继承了 name 属性，并添加了额外的 bark() 方法。

合并性

type 支持合并，但 interface 不支持。 这意味着您可以将多个 type 合并为一个新的 type，而不能将多个 interface 合并为一个新的 interface。

// 合并 type
type StringOrNumber = string | number;
type BooleanOrNull = boolean | null;
type CombinedType = StringOrNumber | BooleanOrNull;

// 不能合并 interface
// Error: Duplicate identifier 'CombinedInterface'.
interface StringOrNumber {}
interface BooleanOrNull {}
interface CombinedInterface {}

Type 的应用场景

type 更适合以下场景：

定义简单的类型别名（例如 StringOrNumber）。
定义枚举类型（例如 enum Color { Red, Green, Blue }）。
定义元组类型（例如 type Tuple = [string, number]）。
定义函数类型（例如 type GreetFunction = (name: string) => void）。
定义可调用类型（例如 type Callable = { (): void }）。

Interface 的应用场景

interface 更适合以下场景：

定义复杂的对象类型（例如 interface Person { name: string; age: number }）。
定义具有继承关系的类型（如上文 Animal 和 Dog 的示例所示）。
定义具有多个属性和方法的类型（例如 interface Shape { area(): number; perimeter(): number }）。
定义具有索引签名的类型（例如 interface Dictionary<T> { [key: string]: T }）。
定义具有构造函数的类型（例如 interface Constructor { new(): void }）。

总结

总的来说，type 更适合定义简单的类型别名，而 interface 更适合定义复杂的对象类型。 在实际项目中，您需要根据具体的需求来选择使用 type 还是 interface。

TypeScript 中 Type 与 Interface 的示例

以下是一些使用 type 和 interface 的示例：

// 使用 type 定义一个简单的类型别名
type StringOrNumber = string | number;

// 使用 interface 定义一个复杂的对象类型
interface Person {
  name: string;
  age: number;
}

// 使用 type 定义一个函数类型
type GreetFunction = (name: string) => void;

// 使用 interface 定义一个具有继承关系的类型
interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}