[TypeScript] 第1529天 请说说在TypeScript中什么是联合类型？

[haizhilin2013]

第1529天 请说说在TypeScript中什么是联合类型？

3+1官网

我也要出题

[llccing]

在 TypeScript 中，联合类型（Union Types）是一种允许变量持有多种类型之一的类型。联合类型使用竖线（|）分隔多个类型，表示一个变量可以是这些类型中的任意一个。

联合类型的定义和使用

1. 基本示例

let value: string | number;

value = "Hello";  // 合法
value = 42;       // 合法
// value = true;  // 不合法，会报错

在这个示例中，value 可以是 string 或 number 类型，但不能是其他类型。

2. 函数参数和返回类型中的联合类型

联合类型常用于函数参数和返回类型，以支持多种输入和输出类型。

function printValue(value: string | number): void {
    console.log(`Value: ${value}`);
}

printValue("Hello");  // 输出: Value: Hello
printValue(42);       // 输出: Value: 42

3. 使用类型保护（Type Guards）

由于联合类型可以是多种类型之一，在操作这样的变量时需要进行类型检查，以确保安全地使用特定类型的特性。类型保护帮助我们在代码中安全地使用联合类型。

function printValueDetailed(value: string | number): void {
    if (typeof value === "string") {
        console.log(`String value: ${value.toUpperCase()}`);
    } else {
        console.log(`Number value: ${value.toFixed(2)}`);
    }
}

printValueDetailed("Hello");  // 输出: String value: HELLO
printValueDetailed(42);       // 输出: Number value: 42.00

4. 更复杂的联合类型

联合类型不仅限于基本类型，可以与其他类型结合使用，包括接口、类和类型别名。

interface Dog {
    kind: "dog";
    bark(): void;
}

interface Cat {
    kind: "cat";
    meow(): void;
}

type Pet = Dog | Cat;

function makeSound(pet: Pet): void {
    if (pet.kind === "dog") {
        pet.bark();
    } else {
        pet.meow();
    }
}

const myDog: Dog = {
    kind: "dog",
    bark: () => console.log("Woof!")
};

const myCat: Cat = {
    kind: "cat",
    meow: () => console.log("Meow!")
};

makeSound(myDog);  // 输出: Woof!
makeSound(myCat);  // 输出: Meow!

总结

联合类型在 TypeScript 中是一种强大的工具，允许更灵活和类型安全的代码。通过使用联合类型和类型保护，你可以确保你的代码能够处理多种可能的类型，同时保持类型安全性和可读性。

以下是联合类型的关键点：

• 使用 | 操作符定义联合类型。
• 可以用于变量、函数参数和返回类型。
• 使用类型保护（如 typeof、instanceof、自定义类型保护函数）来处理联合类型的不同类型情况。
• 支持基本类型和复杂类型（如接口和类）的组合。

这些特性使得 TypeScript 能够更好地描述和处理多态性，增强了代码的灵活性和健壮性。