面试题：TypeScript 数据可视化库类型扩展与复杂业务逻辑的融合

类型别名定义：

首先定义不同维度对应的数据结构类型别名。

type TimeData = { timestamp: number; metric: number }[];
type RegionData = { region: string; count: number }[];

类型保护设计：

为了实现类型保护，我们可以在函数外部进行判断，然后调用generateData函数。
定义一个类型保护函数来缩小返回值的类型范围。

function isTimeData(data: any): data is TimeData {
    return Array.isArray(data) && data.length > 0 && 'timestamp' in data[0] &&'metric' in data[0];
}
function isRegionData(data: any): data is RegionData {
    return Array.isArray(data) && data.length > 0 &&'region' in data[0] && 'count' in data[0];
}

使用类型保护和类型别名：

在调用generateData函数的地方，根据dimension的值进行不同的类型处理。

function generateData(dimension: string): any {
    // 模拟数据生成逻辑
    if (dimension === 'time') {
        return [{ timestamp: 1679323200, metric: 100 }];
    } else if (dimension ==='region') {
        return [{ region: 'North', count: 50 }];
    }
    return [];
}
function processData(dimension: string) {
    const data = generateData(dimension);
    if (dimension === 'time') {
        if (isTimeData(data)) {
            // 这里 data 的类型被缩小为 TimeData
            console.log(data[0].timestamp);
        }
    } else if (dimension ==='region') {
        if (isRegionData(data)) {
            // 这里 data 的类型被缩小为 RegionData
            console.log(data[0].region);
        }
    }
}

确保类型一致性和正确性：
- 使用严格的类型检查：在项目中开启严格的 TypeScript 编译选项，如strict: true，这样 TypeScript 会在编译时对代码进行更严格的类型检查，捕获潜在的类型错误。
- 明确函数参数和返回类型：除了generateData函数由于题目要求返回类型不确定外，其他函数都应该明确其参数和返回类型，这样在调用函数时，TypeScript 可以检查传入参数的类型是否正确以及返回值是否符合预期。
- 文档化类型：为类型别名和类型保护函数添加 JSDoc 注释，清晰地说明每个类型的含义和用途，这样有助于其他开发者理解代码，并在使用相关类型时遵循正确的方式，从而确保整个项目代码的类型一致性和正确性。例如：
```
/**
 * 表示时间维度的数据结构
 */
type TimeData = { timestamp: number; metric: number }[];
/**
 * 类型保护函数，判断数据是否为 TimeData 类型
 * @param data 要检查的数据
 * @returns 是否为 TimeData 类型
 */
function isTimeData(data: any): data is TimeData {
    return Array.isArray(data) && data.length > 0 && 'timestamp' in data[0] &&'metric' in data[0];
}
```

星途面试题库

面试题：TypeScript 数据可视化库类型扩展与复杂业务逻辑的融合

知识考点

面试题答案