面试题：TypeScript中联合类型的基础使用

Question

请描述TypeScript联合类型的定义方式，并举例说明如何在函数参数和返回值中使用联合类型。同时，解释在联合类型上访问属性时会遇到什么问题，以及如何解决。

Answer 1

联合类型定义方式

联合类型使用 | 分隔不同类型来定义，表示一个值可以是这些类型中的任意一种。例如：

let value: string | number;
value = 'hello';
value = 42;

在函数参数和返回值中使用联合类型

函数参数

function printValue(value: string | number) {
    if (typeof value ==='string') {
        console.log(value.length);
    } else {
        console.log(value.toFixed(2));
    }
}

printValue('world');
printValue(123);

函数返回值

function getValue(random: boolean): string | number {
    return random? 'random string' : 456;
}

let result = getValue(true);
if (typeof result ==='string') {
    console.log(result.toUpperCase());
} else {
    console.log(result * 2);
}

在联合类型上访问属性时的问题及解决方法

问题：当在联合类型上直接访问属性时，TypeScript 不知道该值具体属于哪种类型，可能会导致类型错误。例如：

let mixed: string | number;
// mixed.length; // 报错：类型“string | number”上不存在属性“length”

解决方法：

1. 类型守卫：使用 typeof 进行类型判断。如上述 printValue 函数中，通过 typeof value ==='string' 判断 value 类型，然后访问对应类型的属性。
2. 类型断言：如果确定值的类型，可以使用类型断言。例如：

let mixed: string | number;
mixed = 'test';
let length = (mixed as string).length;

但类型断言需要谨慎使用，因为如果断言错误可能导致运行时错误。