TypeScript ：联合类型中不存在的属性

在本文中，我们将介绍在 TypeScript 中当使用联合类型时，某个属性不存在的情况。联合类型是 TypeScript 中的一种高级类型，用于定义一个变量可以有多个类型之一的情况。

背景

在 TypeScript 中，当我们定义一个联合类型时，可以通过使用 “|” 符号将多个类型组合在一起。例如，我们可以定义一个变量可以是数字或字符串类型的联合类型：

let variable: number | string;

上述代码中，变量 variable 可以是数字或字符串类型。这意味着我们可以将数字赋值给它，也可以将字符串赋值给它。

然而，当我们尝试访问联合类型中某个类型不存在的属性时，TypeScript 将会报错。例如：

function printLength(input: number | string) {
  console.log(input.length);
}

const value: number | string = 123;
printLength(value);

上述代码中，我们定义了一个函数 printLength，它接收一个参数 input，该参数可以是数字或字符串类型。在函数内部，我们尝试访问 input 的 length 属性。然而，由于数字类型并没有 length 属性，TypeScript 将会报错：

Property 'length' does not exist on type 'number'.

解决方法：类型断言

为了解决上述问题，我们可以使用类型断言（Type Assertion）。类型断言允许我们在某些情况下覆盖 TypeScript 的类型检查，告诉编译器我们知道某个变量的确切类型。

在访问联合类型中某个类型不存在的属性时，我们可以使用断言将其指定为另一个类型，以便 TypeScript 不会报错。例如，在上述代码中，我们可以使用断言将 input 指定为字符串类型：

function printLength(input: number | string) {
  console.log((input as string).length);
}

除了使用 as 关键字进行类型断言外，我们还可以使用尖括号（<>）语法进行类型断言：

function printLength(input: number | string) {
  console.log((<string>input).length);
}

使用类型断言后，编译器将会认为 input 是字符串类型，因此不会再报错。

示例说明

下面通过一个示例来更加详细地说明上述问题和解决方法。

type Animal = {
  name: string;
}

type Dog = Animal & {
  breed: string;
}

type Cat = Animal & {
  color: string;
}

function printAnimalName(animal: Dog | Cat) {
  console.log(animal.name);

  if ("breed" in animal) {
    console.log(animal.breed); // 使用类型判断后可以安全地访问 breed 属性
  }

  if ("color" in animal) {
    console.log(animal.color); // 使用类型判断后可以安全地访问 color 属性
  }
}

const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever"
};

const myCat: Cat = {
  name: "Felix",
  color: "Black"
};

printAnimalName(myDog);
printAnimalName(myCat);

上述代码中，我们定义了三个类型：Animal、Dog 和 Cat。Dog 和 Cat 类型都扩展了 Animal 类型，并分别具有自己的额外属性。

在 printAnimalName 函数中，我们接收一个参数 animal，该参数可以是 Dog 或 Cat 类型。我们首先打印 animal 的 name 属性，因为这是 Animal 类型中共有的属性。

接下来，我们使用 in 关键字进行类型判断，判断 animal 是否有 breed 属性或 color 属性。只有当 animal 的类型在运行时与我们的判断相匹配时，才会进入相应的条件语句中。这样，我们就可以安全地访问 breed 和 color 属性，并避免 TypeScript 报错。