【TypeScript】对象类型与联合类型详解

TypeScript 是一个构建在 JavaScript 之上的强类型语言，提供了静态类型检查的能力，从而提升了代码的可靠性和可维护性。本文将详细介绍 TypeScript 中对象类型、可选属性以及联合类型的概念和使用场景，帮助开发者更好地理解和应用这些功能。

一、对象类型概述

1. 什么是对象类型

在 TypeScript 中，除了原始类型（如 string、number、boolean）之外，最常见的类型便是对象类型。对象类型指的是 JavaScript 中带有属性的值，几乎所有的 JavaScript 值都可以被视为对象类型。要定义一个对象类型，我们只需列出其属性及对应的类型。

例如，下面是一个接受点（point）对象作为参数的函数：

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

在这个例子中，pt 参数被注解为一个带有 x 和 y 属性的对象类型，且这两个属性的类型都为 number。属性之间可以用逗号（,）或分号（;）分隔，最后的分隔符是可选的。

如果不为某个属性指定类型，TypeScript 会默认为该属性的类型为 any，即可以是任意类型的值。

2. 对象类型的定义和使用

TypeScript 允许通过对象类型来描述更复杂的结构，并确保这些结构在使用时的类型安全性。如下代码所示，定义了一个具有 name 和 age 属性的对象类型：

function describePerson(person: { name: string; age: number }) {
  console.log(`${person.name} is ${person.age} years old.`);
}
describePerson({ name: "Alice", age: 30 });

通过类型注解，我们可以确保传入的 person 对象必须包含 name 和 age 两个属性，且类型分别为 string 和 number。

二、可选属性

1. 定义可选属性

在某些情况下，对象的某些属性是可选的，可能会存在也可能不会。在 TypeScript 中，可以通过在属性名后添加问号（?）来标记该属性为可选属性。

例如，定义一个带有可选 last 属性的 name 对象：

function printName(obj: { first: string; last?: string }) {
  console.log(obj.first);
  if (obj.last !== undefined) {
    console.log(obj.last.toUpperCase());
  }
}
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

在上面的例子中，last 属性是可选的，因此可以只传递 first 属性，而不必每次都提供 last。如果未提供 last 属性，它将默认为 undefined。当读取可选属性时，需要注意处理可能出现的 undefined 值，以避免运行时错误。

2. 可选属性的应用场景

在处理一些具有较多属性但并非每个属性都必须出现的对象时，可选属性非常有用。典型的应用场景包括表单数据、配置对象等。例如，一个用户配置对象可能具有许多可选设置项：

interface UserSettings {
  theme?: string;
  notificationsEnabled?: boolean;
  autoSave?: boolean;
}

function configureSettings(settings: UserSettings) {
  console.log(settings.theme ?? "Default theme");
  console.log(settings.notificationsEnabled ?? true);
}

在这里，每个属性都是可选的，开发者可以根据需求灵活传入所需的配置。

三、联合类型

1. 什么是联合类型

TypeScript 提供了联合类型（Union Types），它允许一个值可以是多种类型之一。联合类型由多个类型组成，表示该值可以是这些类型中的任意一种。联合类型的每个成员都称为联合成员。

例如，定义一个可以接受 number 或 string 类型的 id 参数的函数：

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
printId(101);
printId("202");

在这个例子中，id 可以是数字或字符串，使用联合类型 number | string 来表示。

2. 使用联合类型处理不同类型

使用联合类型时，我们需要处理不同类型的逻辑。例如，如果联合类型包含 string 和 number，我们不能直接对其调用仅属于某一种类型的方法。TypeScript 允许通过类型缩小（Type Narrowing）来区分类型，确保对不同类型进行适当处理。

例如，以下代码通过 typeof 操作符来区分 id 的类型：

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

在上面的例子中，通过检查 id 的类型，TypeScript 能够在 if 分支中确定 id 是 string 类型，因此可以安全地调用 toUpperCase 方法。在 else 分支中，id 则被缩小为 number 类型。

3. 处理具有相同属性的联合类型

有时，联合类型的所有成员都具有某个共同的属性，此时我们可以在不进行类型缩小的情况下使用这些共同属性。比如，字符串数组和字符串都具有 slice 方法：

function getFirstThree(x: number[] | string) {
  return x.slice(0, 3);
}

在此例中，无需进行类型检查，因为 number[] 和 string 都有 slice 方法，TypeScript 能够推断出返回值的类型是 number[] | string。

四、类型别名

1. 定义类型别名

在许多情况下，我们可能会多次使用相同的类型定义。为了避免重复定义，TypeScript 提供了类型别名（Type Aliases）功能，允许我们为任何类型创建一个别名。使用类型别名可以提高代码的可读性和可维护性。

例如，定义一个 Point 类型别名：

type 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);
}

在这个例子中，Point 是一个对象类型的别名，它包含了 x 和 y 两个 number 类型的属性。我们可以使用 Point 来定义函数参数的类型，这样代码看起来更加简洁。

2. 联合类型中的类型别名

类型别名不仅可以用于对象类型，还可以用于联合类型。下面是一个将 number | string 联合类型定义为 ID 类型别名的示例：

type ID = number | string;

function printId(id: ID) {
  console.log("Your ID is: " + id);
}

通过这种方式，我们可以将复杂的类型结构提取出来，赋予它们简短易懂的名称，提升代码的可读性。

五、总结

在 TypeScript 中，对象类型和联合类型是构建类型系统的基础。通过类型注解和联合类型，我们可以有效地描述代码中的复杂结构，确保类型安全性。此外，使用可选属性和类型别名可以使代码更加灵活和易于维护。

推荐：

• JavaScript
• react
• vue

---