面试题：TypeScript 中联合类型与交叉类型的区别及使用场景

Question

请详细阐述 TypeScript 里联合类型（Union Types）和交叉类型（Intersection Types）的区别，并分别举例说明它们在实际前端开发中的使用场景。

Answer 1

联合类型（Union Types）

1. 定义：联合类型表示一个值可以是多种类型中的一种。使用 | 符号分隔不同类型。
2. 区别：取值只能是联合类型中的某一个类型。
3. 举例及场景：
   • 场景：在处理函数参数或返回值可能是不同类型的情况时很有用。比如在前端开发中，一个函数可能接收字符串或者数字类型的参数来显示不同内容。
   • 代码示例：

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

printValue('hello'); 
printValue(123); 

交叉类型（Intersection Types）

1. 定义：交叉类型表示一个值必须同时满足多种类型的要求。使用 & 符号连接不同类型。
2. 区别：取值必须同时符合交叉类型中的所有类型定义。
3. 举例及场景：
   • 场景：当需要合并多个对象类型的属性时，交叉类型很实用。比如在前端开发中，可能有一个基础用户信息类型和一个扩展用户信息类型，合并后得到完整用户信息类型。
   • 代码示例：

type BaseUser = {
    name: string;
};

type ExtendedUser = {
    age: number;
};

type CompleteUser = BaseUser & ExtendedUser;

let user: CompleteUser = { name: 'John', age: 30 };