TypeScript中函数联合类型意外转为参数交叉类型问题

问题原因 #

你遇到的TS2345错误，本质是TypeScript无法自动关联message.body.type和handlers中对应回调的参数类型。当你通过handlers[message.body.type]获取回调时，TypeScript会把它推断为所有可能回调的联合类型（((msg: BroadcastMessage) => void) | ((msg: InitMessage) => void)）。而联合类型的函数调用时，要求参数必须满足所有函数参数的交叉类型（也就是BroadcastMessage & InitMessage），但你的message是BroadcastMessage | InitMessage，自然无法赋值给这个交叉类型，所以报错。

解决方案 #

方案1：用泛型绑定类型关联

通过泛型参数跟踪消息的type字段，让TypeScript明确message和对应handler的类型匹配关系：

export const handle = <T extends Body['type']>(message: Extract<Message, { body: { type: T } }>) => {
    if (message.body.type === 'init') {
        console.log('Initialized');
    }
    // 断言handler为当前message类型的回调
    const handler = handlers[message.body.type] as (msg: typeof message) => void;
    if (!handler) {
        console.warn('Unable to handle type', message.body.type);
        return;
    }
    handler(message);
};

这个方案扩展性强，新增消息类型时不需要修改handle函数本身。

方案2：switch case类型窄化

通过switch语句明确每个type对应的处理逻辑，TypeScript会自动窄化message和handler的类型：

export const handle = (message: Message) => {
    if (message.body.type === 'init') {
        console.log('Initialized');
    }
    switch (message.body.type) {
        case 'broadcast':
            handlers['broadcast']?.(message);
            break;
        case 'init':
            handlers['init']?.(message);
            break;
        default:
            console.warn('Unable to handle type', message.body.type);
    }
};

这个方案类型安全性最高，但新增消息类型时需要同步更新switch分支。

方案3：类型断言（快速解决但需注意风险）

直接把handler断言为能接收所有Message类型的函数，跳过TypeScript的类型检查：

export const handle = (message: Message) => {
    if (message.body.type === 'init') {
        console.log('Initialized');
    }
    const handler = handlers[message.body.type];
    if (!handler) {
        console.warn('Unable to handle type', message.body.type);
        return;
    }
    (handler as (msg: Message) => void)(message);
};

这个方案最简单，但如果handlers中注册的回调参数类型和实际消息不匹配，TypeScript不会给出警告，存在类型安全风险。

内容的提问来源于stack exchange，提问作者Sughosh