面试题：TypeScript 静态类型系统中联合类型与交叉类型的区别

Question

请详细阐述 TypeScript 中联合类型（Union Types）与交叉类型（Intersection Types）在定义、使用场景及特性上的区别，并各举一个实际代码示例。

Answer 1

定义区别

• 联合类型：表示一个值可以是几种类型之一。语法是使用 | 分隔不同类型，如 let value: string | number;，value 可以是 string 类型或者 number 类型。
• 交叉类型：表示一个值必须同时满足多种类型的要求。语法是使用 & 连接不同类型，如 let obj: {name: string} & {age: number};，obj 必须同时拥有 name 属性（类型为 string）和 age 属性（类型为 number）。

使用场景区别

• 联合类型：
  • 适用于一个变量可能有多种不同类型的情况，比如函数参数可能接受不同类型的值。例如，一个函数可能接受字符串或者数字作为参数来进行不同的处理。
  • 用于描述可能出现的多种状态或类型，增强类型的灵活性。
• 交叉类型：
  • 常用于将多个对象类型合并为一个，使得新类型具有所有参与交叉类型的属性和方法。比如，将一个具有 可打印 功能的类型和一个 可保存 功能的类型交叉，得到一个既 可打印 又 可保存 的新类型。
  • 当需要组合多个现有类型的功能时使用。

特性区别

• 联合类型：
  • 取值只能是联合类型中的某一种类型。比如 let value: string | number; value = 'hello'; 或者 value = 123;，但不能同时是两种类型。
  • 访问联合类型的值的属性或方法时，只能访问所有联合类型共有的属性或方法。例如 let value: string | number; value.length; 会报错，因为 number 类型没有 length 属性。
• 交叉类型：
  • 同时具备所有交叉类型的属性和方法。如 let obj: {name: string} & {age: number}; obj.name = 'John'; obj.age = 30; 都合法。
  • 如果交叉类型中相同属性的类型不一致，会取兼容的类型（通常是更严格的类型）。例如 {a: string} & {a: number} 会报错，因为 string 和 number 不兼容。

代码示例

联合类型示例

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

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

交叉类型示例

interface Printable {
    print(): void;
}

interface Savable {
    save(): void;
}

class Document implements Printable & Savable {
    print() {
        console.log('Printing document...');
    }

    save() {
        console.log('Saving document...');
    }
}

let doc = new Document();
doc.print(); 
doc.save();