面试题：TypeScript类型守卫在复杂异步场景下的应用及性能优化

架构设计思路

数据接口定义：为每个数据源的数据结构定义对应的TypeScript接口，对于重叠字段，提取公共接口。
类型守卫函数：创建类型守卫函数，用于判断接收到的数据属于哪种数据源结构。
统一处理函数：基于类型守卫的结果，调用不同的处理逻辑函数，对数据进行统一处理。
性能优化：尽量复用已有的类型判断逻辑，避免重复检查。对于频繁处理的数据类型，优先进行判断。

核心代码示例

// 定义不同数据源的数据结构接口
interface WebSocketData {
    type: 'websocket';
    data: {
        id: number;
        message: string;
        timestamp: number;
    };
}

interface HttpLongPollingData {
    type: 'http-long-polling';
    data: {
        id: number;
        content: string;
        time: number;
    };
}

// 公共接口，提取重叠字段
interface CommonData {
    id: number;
    timestamp: number;
}

// 类型守卫函数
function isWebSocketData(data: any): data is WebSocketData {
    return typeof data === 'object' && 'type' in data && data.type === 'websocket';
}

function isHttpLongPollingData(data: any): data is HttpLongPollingData {
    return typeof data === 'object' && 'type' in data && data.type === 'http-long-polling';
}

// 数据处理函数
function processWebSocketData(data: WebSocketData): CommonData {
    return {
        id: data.data.id,
        timestamp: data.data.timestamp
    };
}

function processHttpLongPollingData(data: HttpLongPollingData): CommonData {
    return {
        id: data.data.id,
        timestamp: data.data.time
    };
}

// 统一处理函数
function processData(data: any): CommonData | null {
    if (isWebSocketData(data)) {
        return processWebSocketData(data);
    } else if (isHttpLongPollingData(data)) {
        return processHttpLongPollingData(data);
    }
    return null;
}

// 模拟数据接收
const webSocketData: WebSocketData = {
    type: 'websocket',
    data: {
        id: 1,
        message: 'Hello from WebSocket',
        timestamp: Date.now()
    }
};

const httpLongPollingData: HttpLongPollingData = {
    type: 'http-long-polling',
    data: {
        id: 2,
        content: 'Hello from HTTP long polling',
        time: Date.now()
    }
};

console.log(processData(webSocketData));
console.log(processData(httpLongPollingData));

类型守卫使用和性能优化思路

类型守卫使用：通过定义明确的类型守卫函数，TypeScript能够在运行时准确判断数据类型，确保类型安全。在processData函数中，使用类型守卫函数来决定调用哪个具体的数据处理函数。
性能优化：
- 减少重复判断：类型守卫函数内的判断逻辑尽量简洁，避免重复计算。例如在isWebSocketData和isHttpLongPollingData中，只进行必要的属性和类型检查。
- 优先处理高频数据：如果知道某些数据源的数据出现频率更高，可以将对应的类型守卫判断放在前面，减少不必要的判断次数。
- 缓存结果：对于一些复杂且不常变化的类型判断，可以考虑缓存结果，避免每次都重新判断。但在实时数据处理系统中，需权衡缓存带来的内存开销和性能提升。

面试题：TypeScript类型守卫在复杂异步场景下的应用及性能优化

知识考点

面试题答案

架构设计思路

核心代码示例

类型守卫使用和性能优化思路