【TypeScript】多余属性检查与类型扩展详解

在TypeScript中，类型系统的强大功能之一就是其对对象进行更严格的检查，这其中最具代表性的是多余属性检查（Excess Property Checks）。当我们在创建并将对象分配给某个对象类型时，TypeScript 会进行额外的检查，以确保对象的属性与目标类型匹配。本文将详细介绍多余属性检查的工作机制、绕过这些检查的方法，以及在实际项目中如何利用这一特性提升代码质量。此外，还将介绍类型扩展与交叉类型等概念，帮助开发者在复杂项目中灵活运用类型系统。

一、什么是多余属性检查？

多余属性检查是TypeScript对对象字面量的一种特殊处理，它通过严格验证对象字面量的属性，确保其只包含目标类型中定义的属性。若对象字面量包含了目标类型未定义的属性，TypeScript 将抛出错误。

示例：多余属性检查的基本使用

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
  return {
    color: config.color || "red",
    area: config.width ? config.width * config.width : 20,
  };
}

let mySquare = createSquare({ colour: "red", width: 100 }); 
// 错误: 对象字面量可能只指定已知属性，'colour' 不存在于 'SquareConfig' 类型中

在这个例子中，传递给createSquare函数的参数是一个对象字面量，它具有colour属性，而不是SquareConfig中定义的color属性。TypeScript 在此检查出该对象包含了一个未在SquareConfig中声明的属性，并抛出了错误。

1.1 为什么TypeScript会进行这种检查？

在JavaScript中，传递额外的属性通常是允许的，这不会导致编译错误，甚至在运行时也不会报错。然而，TypeScript选择通过多余属性检查来防止潜在的错误，因为额外的属性很可能是拼写错误或错误的对象结构。

1.2 如何绕过多余属性检查？

虽然TypeScript通过多余属性检查提高了代码的安全性，但在某些情况下，我们可能希望允许一些额外的属性。以下是几种常用的绕过多余属性检查的方法：

1.2.1 使用类型断言

最简单的方式是使用类型断言，通过明确声明对象的类型来绕过检查。

let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

在这个例子中，opacity是一个未在SquareConfig中定义的属性，但是通过as SquareConfig，我们告诉TypeScript这个对象应该被视为SquareConfig类型，从而绕过了多余属性检查。

1.2.2 添加字符串索引签名

如果我们明确知道对象可能有一些额外的属性，并且希望这些属性可以被灵活使用，那么可以通过字符串索引签名来解决这个问题。

interface SquareConfig {
  color?: string;
  width?: number;
  [propName: string]: unknown;
}

通过在接口中定义索引签名[propName: string]: unknown;，我们允许SquareConfig接收任意数量的属性，只要这些属性的类型为unknown。这使得我们可以向对象添加更多的属性而不会抛出错误。

1.2.3 赋值给中间变量

另一种绕过多余属性检查的方式是将对象字面量赋值给一个变量，然后将该变量传递给函数。

let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

在这种情况下，由于squareOptions是一个变量而不是对象字面量，TypeScript不会对其进行多余属性检查。这种方式适用于当我们有一些需要处理的对象，但它并不完全符合目标类型的情况。

1.3 多余属性检查的限制

需要注意的是，虽然上述方法可以绕过多余属性检查，但并不总是建议这样做。多余属性检查的目的在于捕获代码中的潜在错误，例如拼写错误或不必要的属性。因此，合理使用这些绕过检查的方法尤为重要。

二、类型扩展（Extending Types）

在实际开发中，很多时候我们需要定义比已有类型更为具体的类型。在TypeScript中，类型扩展可以帮助我们在不重复定义相同字段的情况下，创建更加具体的类型。

2.1 接口继承（Interface Extension）

通过接口继承，我们可以从一个现有的接口派生出新的接口，并在新的接口中添加额外的字段，而无需重复定义所有属性。

interface BasicAddress {
  name?: string;
  street: string;
  city: string;
  country: string;
  postalCode: string;
}

interface AddressWithUnit extends BasicAddress {
  unit: string;
}

在这个例子中，AddressWithUnit继承了BasicAddress的所有字段，并在此基础上增加了unit字段。这种方式可以有效减少代码冗余，同时清晰地表明两者之间的关系。

2.2 多重继承

TypeScript中的接口不仅可以从一个接口继承，还可以从多个接口继承。

interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

interface ColorfulCircle extends Colorful, Circle {}

const cc: ColorfulCircle = {
  color: "red",
  radius: 42,
};

通过多重继承，我们可以将多个不同的接口组合成一个新的接口。这种组合方式非常灵活，可以帮助开发者在复杂的项目中实现类型的自由扩展。

三、交叉类型（Intersection Types）

除了接口继承，TypeScript还提供了**交叉类型（Intersection Types）**这一强大工具，用于将多个类型合并成一个新的类型。与接口继承类似，交叉类型通过&运算符来将多个类型组合在一起。

interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

type ColorfulCircle = Colorful & Circle;

在这个例子中，ColorfulCircle既包含Colorful中的color属性，又包含Circle中的radius属性。交叉类型的灵活性使得我们可以在不同场景下，创建拥有不同属性组合的新类型。

3.1 接口继承 vs 交叉类型

虽然接口继承和交叉类型有很多相似之处，但它们在处理冲突时的行为有所不同。当两个接口存在相同的属性但类型不兼容时，接口继承会抛出错误，而交叉类型则会要求属性同时满足所有类型，可能导致属性的类型为never。

interface Person1 {
  name: string;
}

interface Person2 {
  name: number;
}

type Staff = Person1 & Person2;

// Staff的name属性类型为never

在上述例子中，由于Person1和Person2的name属性类型冲突，Staff中的name属性会被推断为never，这在大多数情况下是不可取的。因此，开发者在选择使用接口继承还是交叉类型时，应考虑类型冲突的可能性。

推荐：

• JavaScript
• react
• vue

---