跳到主要内容

TypeScript 联合类型

在TypeScript中,联合类型(Union Types)是一种强大的工具,允许你定义一个变量、参数或返回值可以接受多种类型。通过联合类型,你可以更灵活地处理不同类型的数据,同时保持类型安全。

什么是联合类型?

联合类型使用 | 符号将多个类型组合在一起。例如,string | number 表示一个值可以是 string 类型或 number 类型。联合类型在处理不确定类型的场景时非常有用。

基本语法

typescript
let value: string | number;
value = "Hello"; // 合法
value = 42; // 合法
value = true; // 错误:布尔类型不在联合类型中

在上面的例子中,value 可以是 stringnumber 类型,但不能是其他类型。

联合类型的实际应用

1. 函数参数

联合类型常用于函数参数,允许函数接受多种类型的输入。

typescript
function printId(id: number | string) {
console.log(`ID is: ${id}`);
}

printId(101); // 输出: ID is: 101
printId("ABC123"); // 输出: ID is: ABC123

在这个例子中,printId 函数可以接受 numberstring 类型的参数。

2. 类型守卫

当使用联合类型时,TypeScript 需要确保你在操作变量时使用的是正确的类型。这时可以使用类型守卫(Type Guards)来缩小类型范围。

typescript
function printId(id: number | string) {
if (typeof id === "string") {
console.log(`ID is a string: ${id.toUpperCase()}`);
} else {
console.log(`ID is a number: ${id}`);
}
}

printId("abc123"); // 输出: ID is a string: ABC123
printId(456); // 输出: ID is a number: 456

在这个例子中,typeof 操作符用于检查 id 的类型,并根据类型执行不同的操作。

3. 联合类型与数组

联合类型也可以用于数组,允许数组中的元素是多种类型。

typescript
let mixedArray: (string | number)[] = ["Hello", 42, "World", 100];

在这个例子中,mixedArray 数组可以包含 stringnumber 类型的元素。

实际案例:处理用户输入

假设你正在开发一个表单,用户可以在表单中输入文本或数字。你可以使用联合类型来处理这种不确定的输入。

typescript
function processInput(input: string | number) {
if (typeof input === "string") {
console.log(`Input is a string: ${input.trim()}`);
} else {
console.log(`Input is a number: ${input.toFixed(2)}`);
}
}

processInput(" Hello "); // 输出: Input is a string: Hello
processInput(3.14159); // 输出: Input is a number: 3.14

在这个案例中,processInput 函数根据输入的类型执行不同的操作,确保处理逻辑的正确性。

总结

联合类型是TypeScript中一个非常有用的特性,它允许你定义可以接受多种类型的变量、参数或返回值。通过联合类型,你可以编写更灵活且类型安全的代码。

附加资源

练习

  1. 编写一个函数 calculateArea,接受 numberstring 类型的参数,并返回计算后的面积。如果参数是 string,则将其转换为 number 后再计算。
  2. 创建一个联合类型 Status,它可以是 "active""inactive"number 类型,并编写一个函数来处理这些状态。

通过练习,你可以更好地理解和掌握联合类型的使用。