面试题：TypeScript 联合类型与类型推断在复杂项目架构中的优化

Question

在一个大型前端项目中，有一组 API 接口返回的数据结构较为复杂且存在多种可能的格式。例如，某个接口可能返回一个包含 `userInfo`（对象，其结构根据用户角色不同而不同，有管理员角色和普通用户角色两种不同结构）的对象，或者返回一个错误信息（字符串类型）。现在要求你设计一套基于 TypeScript 联合类型和类型推断的解决方案，使得在调用该 API 后，能够根据返回数据的实际类型，在不同模块中正确地处理数据，同时要考虑代码的可维护性和扩展性，描述你的设计思路并给出关键代码示例。

Answer 1

设计思路

1. 定义联合类型：使用 TypeScript 的联合类型来描述 API 可能返回的不同数据格式。
2. 类型推断：通过函数重载或者类型保护来推断实际返回的数据类型，从而在不同模块中正确处理数据。
3. 可维护性和扩展性：将数据处理逻辑封装成独立的函数，便于维护和扩展。如果有新的返回类型，只需在联合类型中添加，并相应更新类型保护和处理函数。

关键代码示例

// 定义用户信息类型
type AdminUserInfo = {
    role: 'admin';
    adminId: string;
    // 其他管理员特有属性
};

type NormalUserInfo = {
    role: 'normal';
    userId: string;
    // 其他普通用户特有属性
};

// 定义API返回数据的联合类型
type APIResponse = AdminUserInfo | NormalUserInfo | string;

// 处理用户信息的函数
function handleUserInfo(userInfo: AdminUserInfo | NormalUserInfo) {
    if (userInfo.role === 'admin') {
        console.log(`Admin user with id: ${userInfo.adminId}`);
    } else {
        console.log(`Normal user with id: ${userInfo.userId}`);
    }
}

// 处理错误信息的函数
function handleError(error: string) {
    console.error(`Error: ${error}`);
}

// 模拟API调用
function mockAPI(): APIResponse {
    // 这里随机返回一种类型的数据，实际中是真实API返回
    const randomNumber = Math.random();
    if (randomNumber < 0.3) {
        return 'Some error occurred';
    } else if (randomNumber < 0.6) {
        return { role: 'admin', adminId: 'admin123' };
    } else {
        return { role: 'normal', userId: 'user456' };
    }
}

// 调用API并处理返回数据
const response = mockAPI();
if (typeof response ==='string') {
    handleError(response);
} else {
    handleUserInfo(response);
}