面试题：TypeScript基于复杂API规范生成类型的策略优化

Question

给定一个API规范，它返回一个包含多种数据结构的响应，其中有一个数组，数组元素可能是对象，对象结构会根据不同的条件而变化（比如根据某个标志位，可能是简单对象只有id字段，也可能是复杂对象包含id、name、description等多个字段）。请阐述如何通过TypeScript生成合适的类型，以准确描述这个API的返回值，并写出关键代码示例。

Answer 1

1. 定义联合类型来处理对象结构的变化：
   • 首先定义不同结构的对象类型，然后使用联合类型来表示数组元素可能的类型。
   • 假设标志位为 flag，根据 flag 的值来决定对象结构。

// 简单对象类型
type SimpleObject = {
    id: number;
};

// 复杂对象类型
type ComplexObject = {
    id: number;
    name: string;
    description: string;
};

// 联合类型表示数组元素可能的类型
type ArrayElement = SimpleObject | ComplexObject;

// API返回值类型
type ApiResponse = {
    // 假设还有其他数据结构，这里用any代替，实际应具体定义
    otherData: any; 
    arrayField: ArrayElement[];
};

// 模拟API调用函数
function mockApiCall(): ApiResponse {
    // 这里简单模拟返回值，实际应调用真实API
    const flag = Math.random() > 0.5;
    const arrayField: ArrayElement[] = [];
    if (flag) {
        arrayField.push({id: 1, name: 'example', description: 'a complex object'});
    } else {
        arrayField.push({id: 2});
    }
    return {
        otherData: {},
        arrayField
    };
}

// 使用API返回值
const response = mockApiCall();
response.arrayField.forEach((element) => {
    if ('name' in element) {
        console.log(element.name);
    } else {
        console.log(element.id);
    }
});

2. 使用类型守卫：
   • 在处理数组元素时，通过类型守卫来确定当前元素是哪种具体类型，从而安全地访问其属性。
   • 如上面代码中，使用 'name' in element 作为类型守卫来判断 element 是 ComplexObject 还是 SimpleObject。这确保在访问属性时不会出现类型错误。