面试题：TypeScript交叉与联合类型在复杂对象场景应用

Question

假设有两个接口 `UserInfo` 包含属性 `name: string` 和 `age: number`，`UserRole` 包含属性 `role: string` 和 `permissions: string[]`。现在要定义一个函数 `handleUser`，它接受一个参数，这个参数要么是 `UserInfo` 类型，要么是 `UserRole` 类型，同时还要实现一个函数 `mergeUser`，它接受一个 `UserInfo` 类型和一个 `UserRole` 类型的参数，并返回一个同时具备两者属性的新对象。请用TypeScript实现这两个函数，并解释其中交叉类型和联合类型的使用逻辑。

Answer 1

interface UserInfo {
    name: string;
    age: number;
}

interface UserRole {
    role: string;
    permissions: string[];
}

function handleUser(user: UserInfo | UserRole) {
    if ('name' in user) {
        console.log(`User name is ${user.name}`);
    } else {
        console.log(`User role is ${user.role}`);
    }
}

function mergeUser(userInfo: UserInfo, userRole: UserRole): UserInfo & UserRole {
    return {
       ...userInfo,
       ...userRole
    };
}

交叉类型和联合类型的使用逻辑解释

1. 联合类型（|）：在 handleUser 函数中，参数 user 的类型是 UserInfo | UserRole，这是一个联合类型。它表示 user 可以是 UserInfo 类型或者 UserRole 类型中的任意一种。在函数内部，通过 in 操作符进行类型保护，以确保在访问属性时类型安全。
2. 交叉类型（&）：在 mergeUser 函数中，返回值类型是 UserInfo & UserRole，这是一个交叉类型。交叉类型表示一个对象同时具有 UserInfo 和 UserRole 两种类型的所有属性。通过对象展开运算符（...），将 userInfo 和 userRole 的属性合并到一个新对象中，这个新对象就具有了 UserInfo 和 UserRole 的所有属性。