【TypeScript】接口和类型别名详解

在TypeScript中，接口（Interface）和类型别名（Type Alias）是两种用于定义对象类型的工具。它们在很多情况下功能相似，但也有一些关键区别。在这篇文章中，我们将详细介绍接口的概念、接口与类型别名的区别，以及它们在不同场景中的实际应用。

一、接口基础概念

1. 什么是接口？

接口是一种用于定义对象结构的

机制。它允许我们描述对象应该具有的属性和类型。通过接口，我们可以为复杂的对象类型起一个名字，并用这个名字来约束变量或函数的输入输出。

举个例子，我们可以通过接口定义一个Point类型的对象，它包含x和y两个属性，且这两个属性都是数字类型：

interface Point {
  x: number;
  y: number;
}

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 100, y: 100 });

在上面的代码中，Point接口描述了一个包含x和y属性的对象。printCoord函数接受一个Point类型的参数，并使用这些属性进行输出操作。TypeScript通过接口定义对象的结构，并确保我们传入的对象符合接口的定义。

2. 结构化类型系统

TypeScript采用了一种结构化类型系统，也被称为“鸭子类型”（duck typing）。这意味着只要对象具有预期的结构，TypeScript就会认为它符合接口的要求。例如，在上面的例子中，我们传入了一个对象{ x: 100, y: 100 }，TypeScript只检查这个对象是否拥有x和y属性，而不关心对象的具体来源。

二、接口和类型别名的区别

在TypeScript中，接口和类型别名可以看作是两种不同的方式来定义类型结构。虽然它们在某些情况下功能类似，但它们也有一些重要的区别。

1. 接口的扩展

接口可以通过extends关键字进行扩展，从而添加或继承其他接口的属性。例如，下面的代码展示了如何通过接口继承来扩展已有接口：

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

const bear = getBear();
bear.name;
bear.honey;

在这个例子中，Bear接口继承了Animal接口的属性name，并且添加了一个新的属性honey。

2. 类型别名的交叉类型

类型别名虽然不能使用extends关键字，但它可以通过交叉类型（intersection types）来实现类似的功能。交叉类型允许我们将多个类型合并成一个新类型。例如：

type Animal = {
  name: string;
}

type Bear = Animal & { 
  honey: boolean;
}

const bear = getBear();
bear.name;
bear.honey;

在这个例子中，Bear类型通过交叉类型Animal & { honey: boolean }来扩展Animal类型。交叉类型与接口继承的功能类似，但语法有所不同。

3. 接口的声明合并

TypeScript中的接口支持声明合并（declaration merging）。这意味着我们可以在多个地方声明同一个接口，并且TypeScript会自动将这些声明合并为一个。例如：

interface Window {
  title: string;
}

interface Window {
  ts: TypeScriptAPI;
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

在这个例子中，我们分别在两个地方声明了Window接口，并且它们被合并成一个包含title和ts属性的接口。类型别名则不支持这样的合并：

type Window = {
  title: string;
}

type Window = {
  ts: TypeScriptAPI;
}

// Error: Duplicate identifier 'Window'.

由于类型别名无法进行声明合并，试图重复声明同一个类型别名会导致错误。

4. 错误信息的显示

在错误信息中，接口名称会始终以其原始形式显示，而类型别名有时会被替换为等价的匿名类型。这可能会影响调试体验，因此在一些特定场景下，使用接口可能更有优势。

例如，当我们在代码中出现类型错误时，TypeScript通常会显示接口的名称，而类型别名则可能被转化为具体的结构信息。接口的这种特性使得错误信息更具可读性。

三、类型断言

在某些情况下，我们可能比TypeScript更清楚某个值的具体类型。此时，我们可以使用类型断言来告诉TypeScript这个值的实际类型。

1. 类型断言的用法

假设我们通过document.getElementById方法获取了一个HTML元素。TypeScript只知道它返回的是某种HTMLElement，但我们可能知道这个元素一定是一个HTMLCanvasElement。这时，我们可以使用类型断言来指定一个更具体的类型：

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

这种语法告诉TypeScript，myCanvas是一个HTMLCanvasElement，尽管document.getElementById的返回类型可能更宽泛。

我们还可以使用尖括号语法来进行类型断言，尽管在.tsx文件中这种语法会与JSX语法冲突：

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

无论是使用as语法还是尖括号语法，类型断言都不会影响运行时的行为，它只是在编译时告诉TypeScript如何理解类型。

2. 类型断言的限制

TypeScript不允许进行不合理的类型断言。例如，不能将一个string类型的值断言为number类型：

const x = "hello" as number;
// Error: Conversion of type 'string' to type 'number' may be a mistake.

这种转换是没有意义的，因此TypeScript会抛出错误。

然而，在一些复杂的场景中，类型断言的规则可能过于保守，导致合法的转换被禁止。如果遇到这种情况，我们可以使用两次断言，先将值断言为any类型，然后再断言为目标类型：

const a = expr as any as T;

这种双重断言虽然有效，但也可能带来潜在的风险，因为它绕过了TypeScript的类型检查机制。

四、接口与类型别名的选择

在大多数情况下，接口和类型别名都可以实现相同的功能。那么，我们应该如何选择使用哪一种呢？以下是一些指导原则：

1. 优先使用接口：如果你需要定义对象的结构，并且希望在未来能够扩展这个结构，那么使用接口是更好的选择。接口的声明合并特性使其在大型项目中更具灵活性。
2. 使用类型别名定义复杂类型：如果你需要定义联合类型、交叉类型或者类型别名（例如原始类型的别名），那么类型别名是唯一的选择。类型别名在定义更复杂的类型组合时表现更好。
3. 编译器性能：在某些情况下，使用接口可能比使用交叉类型更具性能优势，尤其是在大型代码库中。

五、总结

TypeScript中的接口和类型别名是定义对象类型的两种重要工具。尽管它们在很多方面类似，但也有一些显著的区别，如接口支持继承和声明合并，而类型别名则支持更灵活的类型组合。在实际开发中，我们可以根据需求和具体场景灵活选择使用接口或类型别名。通过合理运用这些工具，我们可以更好地描述代码的结构，并充分利用TypeScript的类型系统来提高代码的健壮性和可维护性。

推荐：

• JavaScript
• react
• vue

---