TypeScript 联合类型

在 TypeScript 中，联合类型（Union Types）允许一个变量具有多种不同类型。这意味着一个变量可以存储多种类型的值，而不限定于单一类型。

基本语法

要声明一个联合类型，可以使用竖线 | 分隔每个可能的类型。例如：

let myVar: string | number;

上面的代码表示 myVar 可以是 string 类型或 number 类型。当我们给 myVar 赋值时，可以是字符串或数字，如：

myVar = "Hello";
myVar = 123;

使用联合类型的场景

函数参数

联合类型在函数参数中非常有用。例如，我们有一个函数 printId，接受一个字符串或数字作为参数，并打印出该参数的值。

function printId(id: string | number) {
    console.log(id);
}

printId("abc"); // 输出：abc
printId(123);   // 输出：123

可选属性

当我们需要一个属性可以是多种类型或 undefined 时，可以使用联合类型。例如，一个对象可能有一个 age 属性，可以是数字或 undefined。

// www.javascriptcn.com code example
interface Person {
    name: string;
    age?: number | undefined;
}

let person1: Person = { name: "Alice" };
let person2: Person = { name: "Bob", age: 30 };

console.log(person1); // 输出：{ name: 'Alice' }
console.log(person2); // 输出：{ name: 'Bob', age: 30 }

类型保护

在使用联合类型时，我们可能需要对变量进行类型检查，以确保在使用变量时不会出现类型错误。可以使用类型保护来实现这一点。

类型断言

类型断言是一种告诉编译器某个值的类型的方法。在使用联合类型时，可以使用类型断言来明确告诉编译器变量的类型。

let myVar: string | number = "Hello";
if ((myVar as string).toUpperCase) {
    console.log((myVar as string).toUpperCase());
}

typeof 类型保护

使用 typeof 关键字可以进行类型保护，例如：

// www.javascriptcn.com code example
function printValue(value: string | number) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else {
        console.log(value.toFixed(2));
    }
}

printValue("hello"); // 输出：HELLO
printValue(3.14159); // 输出：3.14

总结

联合类型是 TypeScript 中强大且灵活的特性，能够帮助我们更好地处理多种类型的情况。通过合理地运用联合类型，可以使代码更加健壮和灵活。