巧妙运用 TypeScript 联合类型和类型断言，代码严谨乐趣多！

2024-02-15 13:37:46

在 TypeScript 开发中，我们经常会遇到需要处理多种数据类型的情况。比如，一个函数可能需要接受数字或字符串作为参数，或者一个变量可能存储不同类型的对象。这时，TypeScript 的联合类型和类型断言就派上用场了。它们就像瑞士军刀一样，帮助我们灵活地处理各种类型，提高代码的健壮性和可读性。

联合类型：像变色龙一样灵活

联合类型，顾名思义，就是将多个类型“联合”起来形成一个新的类型。你可以把它想象成一个可以根据需要变换形态的变色龙。比如，我们想定义一个变量，它可以存储数字或者字符串，就可以用联合类型来表示：

type NumberOrString = number | string;

let value: NumberOrString = 10; // 可以存储数字
value = "hello"; // 也可以存储字符串

这里，NumberOrString 就是一个联合类型，它表示 value 变量可以是 number 类型，也可以是 string 类型。

联合类型在处理函数参数和返回值时特别有用。例如，一个函数可能需要接受不同类型的参数，并根据参数类型执行不同的操作：

function printValue(value: NumberOrString) {
  if (typeof value === "number") {
    console.log("这是一个数字:", value);
  } else {
    console.log("这是一个字符串:", value);
  }
}

类型断言：告诉编译器“我知道你在想什么”

有时候，TypeScript 编译器无法准确推断出变量的类型，或者我们需要将变量转换成更具体的类型。这时，我们可以使用类型断言来“告诉”编译器变量的实际类型。

类型断言有两种语法：

as 语法： value as Type
尖括号语法： <Type>value

例如，我们从后端获取一个数据，它可能是一个数字或者字符串，但我们知道它一定是一个字符串：

let data: unknown = fetchData(); // fetchData() 返回 unknown 类型

let str: string = data as string; // 使用 as 语法进行类型断言

这里，我们使用 as string 告诉编译器 data 变量实际上是一个字符串类型。

需要注意的是，类型断言并不会真正改变变量的类型，它只是告诉编译器如何对待这个变量。如果断言的类型与实际类型不符，可能会导致运行时错误。

联合类型和类型断言的应用场景

联合类型和类型断言在实际项目中应用广泛，例如：

处理表单输入： 表单输入的值通常是字符串类型，但我们需要将其转换成数字、布尔值等其他类型。
处理 API 返回数据： API 返回的数据类型可能不确定，需要根据实际情况进行类型断言。
定义灵活的数据结构： 联合类型可以用来定义可以存储不同类型数据的数组或对象。

常见问题及解答

联合类型和交叉类型的区别是什么？

联合类型表示一个值可以是多种类型之一，而交叉类型表示一个值必须同时满足多种类型。
什么时候应该使用类型断言？

当编译器无法推断出变量的实际类型，或者我们需要将变量转换成更具体的类型时，可以使用类型断言。
类型断言会改变变量的类型吗？

不会，类型断言只是告诉编译器如何对待这个变量，并不会改变变量本身的类型。
如何避免类型断言带来的风险？

在进行类型断言之前，应该先检查变量的实际类型，确保断言的类型与实际类型一致。
联合类型和类型断言可以一起使用吗？

可以，联合类型和类型断言可以结合使用，例如，我们可以先使用联合类型定义一个变量，然后根据实际情况使用类型断言将其转换成更具体的类型。