TypeScript 联合类型
在TypeScript中,联合类型(Union Types)是一种强大的工具,允许你定义一个变量、参数或返回值可以接受多种类型。通过联合类型,你可以更灵活地处理不同类型的数据,同时保持类型安全。
什么是联合类型?
联合类型使用 |
符号将多个类型组合在一起。例如,string | number
表示一个值可以是 string
类型或 number
类型。联合类型在处理不确定类型的场景时非常有用。
基本语法
typescript
let value: string | number;
value = "Hello"; // 合法
value = 42; // 合法
value = true; // 错误:布尔类型不在联合类型中
在上面的例子中,value
可以是 string
或 number
类型,但不能是其他类型。
联合类型的实际应用
1. 函数参数
联合类型常用于函数参数,允许函数接受多种类型的输入。
typescript
function printId(id: number | string) {
console.log(`ID is: ${id}`);
}
printId(101); // 输出: ID is: 101
printId("ABC123"); // 输出: ID is: ABC123
在这个例子中,printId
函数可以接受 number
或 string
类型的参数。
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
数组可以包含 string
和 number
类型的元素。
实际案例:处理用户输入
假设你正在开发一个表单,用户可以在表单中输入文本或数字。你可以使用联合类型来处理这种不确定的输入。
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中一个非常有用的特性,它允许你定义可以接受多种类型的变量、参数或返回值。通过联合类型,你可以编写更灵活且类型安全的代码。
附加资源
练习
- 编写一个函数
calculateArea
,接受number
或string
类型的参数,并返回计算后的面积。如果参数是string
,则将其转换为number
后再计算。 - 创建一个联合类型
Status
,它可以是"active"
、"inactive"
或number
类型,并编写一个函数来处理这些状态。
通过练习,你可以更好地理解和掌握联合类型的使用。