WechatIMG588.pngTypeScript 中的联合类型（Union Types）允许您将多个不同的类型组合成一个类型，表示一个值可以是这些类型中的任何一个。联合类型使用 | 运算符定义，以下是详细介绍和多个示例：
联合类型的定义
联合类型使用 | 运算符将多个类型组合在一起，如下所示：
type Type1 = number;
type Type2 = string;
type CombinedType = Type1 | Type2;在上面的示例中，CombinedType 是 Type1 和 Type2 的联合类型，表示它可以是一个数字或一个字符串。
1、处理不同类型的输入
代码语言：typescript复制function display(value: number | string) {
console.log(value);
}
display(42); // 输出 42
display("Hello"); // 输出 "Hello"在这个示例中，display 函数接受一个联合类型的参数，可以是数字或字符串中的任何一个。
2、处理不同类型的数组
代码语言：typescript复制function processArray(arr: (number | string)[]) {
for (const item of arr) {
if (typeof item === "number") {
console.log(`Number: ${item}`);
} else {
console.log(`String: ${item}`);
}
}
}
const mixedArray: (number | string)[] = [42, "Hello", 100, "World"];
processArray(mixedArray);在这个示例中，processArray 函数接受一个联合类型数组，它可以包含数字和字符串，并根据元素的类型执行不同的操作。
3、处理不同类型的返回值
代码语言：typescript复制function getValue(): number | string {
if (Math.random() < 0.5) {
return 42;
} else {
return "Hello";
}
}
const result = getValue();
if (typeof result === "number") {
console.log(`Number: ${result}`);
} else {
console.log(`String: ${result}`);
}在这个示例中，getValue 函数返回一个联合类型的值，可以是数字或字符串，然后根据返回值的类型执行不同的操作。
4、用于实现函数重载
代码语言：typescript复制function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: number | string, b: number | string): number | string {
if (typeof a === "number" && typeof b === "number") {
return a b;
} else if (typeof a === "string" && typeof b === "string") {
return a b;
} else {
throw new Error("Invalid arguments");
}
}
const result1 = add(5, 3); // 返回数字 8
const result2 = add("Hello, ", "World"); // 返回字符串 "Hello, World"在这个示例中，我们使用联合类型定义了 add 函数的多个重载，以处理不同类型的参数和返回值。
5、处理可选值和null
代码语言：typescript复制function formatName(name: string | null | undefined): string {
if (name) {
return name.trim();
}
return "No name";
}
const name1: string = formatName("Alice"); // 返回 "Alice"
const name2: string = formatName(null); // 返回 "No name"
const name3: string = formatName(undefined); // 返回 "No name"
const name4: string = formatName(" Bob "); // 返回 "Bob"在这个示例中，formatName 函数接受一个联合类型的参数，可以是字符串、null 或 undefined，并返回格式化后的名称。
6、处理不同类型的事件监听器
代码语言：typescript复制type EventListener = (event: MouseEvent | KeyboardEvent) => void;
function handleEvent(callback: EventListener) {
// 处理事件逻辑
}
const mouseHandler: EventListener = (event) => {
console.log("Mouse event:", event.type);
};
const keyboardHandler: EventListener = (event) => {
console.log("Keyboard event:", event.type);
};
handleEvent(mouseHandler); // 处理鼠标事件
handleEvent(keyboardHandler); // 处理键盘事件在这个示例中，handleEvent 函数接受一个 EventListener 类型的回调，该回调可以处理鼠标事件或键盘事件，因为它是一个联合类型。
7、处理不同类型的选项配置
代码语言：typescript复制type Option = {
type: "number";
value: number;
} | {
type: "string";
value: string;
} | {
type: "boolean";
value: boolean;
};
function processOption(option: Option) {
switch (option.type) {
case "number":
console.log("Number option:", option.value);
break;
case "string":
console.log("String option:", option.value);
break;
case "boolean":
console.log("Boolean option:", option.value);
break;
}
}
processOption({ type: "number", value: 42 }); // 输出 "Number option: 42"
processOption({ type: "string", value: "Hello" }); // 输出 "String option: Hello"
processOption({ type: "boolean", value: true }); // 输出 "Boolean option: true"在这个示例中，processOption 函数接受一个联合类型的选项，该选项可以是数字、字符串或布尔值，然后根据选项的类型执行不同的操作。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
