TypeScript类型定义中如何让事件处理payload匹配对应事件类型

问题根源 #

你的Handlers类型定义有误，映射遍历每个事件event时，函数参数的payload类型错误引用了全局的联合类型P[E]，而非当前遍历事件对应的P[event]，导致所有事件回调的入参都被推导为全部payload的联合类型。

修正方案 #

仅需要修改Handlers类型定义中的一处参数类型即可，不需要拆分handlers的创建步骤：

// 原错误写法
// [event in E]?:  (payload: P[E]) => any
// 修正后写法
export type Handlers<E extends string, P extends Record<E, any>> = { 
    [event in E]?:  (payload: P[event]) => any
} 

完整可运行代码示例 #

type Events = 'DATA' | 'ABC' | 'DEF'

type PayloadMap = {
    DATA: { x: number }
    ABC: { y: string }
    DEF: null
}

// 修正后的类型定义
export type Handlers<E extends string, P extends Record<E, any>> = { 
    [event in E]?:  (payload: P[event]) => any
} 

const handlers: Handlers<Events, PayloadMap> = {
    DATA: (payload) => {
        // 此时payload自动推导为 { x: number }，无类型报错
        const { x } = payload;
        console.log(x)
        return null
    },
    ABC: (payload) => {
        // payload自动推导为 { y: string }
        const { y } = payload;
        console.log(y)
        return null
    },
    DEF: (payload) => {
        // payload自动推导为 null
        console.log(payload)
        return null
    }
}

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