面试题：TypeScript 中联合类型与交叉类型的应用区别

Question

请解释 TypeScript 中联合类型（Union Types）和交叉类型（Intersection Types）的概念，并分别给出至少两个应用实例说明它们的区别。

Answer 1

联合类型（Union Types）

联合类型表示一个值可以是几种类型之一。使用 | 来分隔不同的类型。

应用实例

1. 函数参数的多种类型 假设我们有一个函数，它可以接受字符串或者数字作为参数，并返回其长度或值本身（数字没有长度概念，这里只是示例）。

function printLengthOrValue(value: string | number) {
    if (typeof value ==='string') {
        return value.length;
    } else {
        return value;
    }
}

console.log(printLengthOrValue('hello')); 
console.log(printLengthOrValue(123)); 

2. DOM 元素操作 在操作 DOM 时，我们可能获取到不同类型的元素，比如 HTMLButtonElement 或者 HTMLInputElement。

function handleClick(element: HTMLButtonElement | HTMLInputElement) {
    if ('click' in element) {
        element.click();
    }
}

const button = document.createElement('button');
const input = document.createElement('input');

handleClick(button); 
handleClick(input); 

交叉类型（Intersection Types）

交叉类型表示一个值必须同时满足多种类型的要求。使用 & 来连接不同的类型。

应用实例

1. 合并对象类型 假设有两个对象类型，一个表示用户基本信息，另一个表示用户权限信息，我们可以通过交叉类型来创建一个同时包含这两种信息的新类型。

type UserInfo = {
    name: string;
    age: number;
};

type UserPermissions = {
    canRead: boolean;
    canWrite: boolean;
};

type AdminUser = UserInfo & UserPermissions;

const admin: AdminUser = {
    name: 'John',
    age: 30,
    canRead: true,
    canWrite: true
};

2. 扩展现有类型 我们有一个基本的 Rectangle 类型，然后通过交叉类型添加一个 color 属性来创建一个新的 ColoredRectangle 类型。

type Rectangle = {
    width: number;
    height: number;
};

type ColoredRectangle = Rectangle & {
    color: string;
};

const coloredRect: ColoredRectangle = {
    width: 100,
    height: 50,
    color:'red'
};

区别总结

• 联合类型：一个值可以是多种类型中的某一种，取值范围是 “或” 的关系。
• 交叉类型：一个值必须同时满足多种类型的所有要求，取值范围是 “且” 的关系。