TypeScript：为函数入参Record内的函数参数添加类型约束

问题描述 #

需要实现一个registerListeners函数，接收Record类型参数，其中每个值为事件监听回调，要求每个回调的第一个参数必须是CustomEvent<T>类型，且T必须符合EventPayload（string | number）的约束。此前三种实现均存在问题：

错误实现1：全局统一泛型T #

type EventPayload = string | number;
interface CustomEvent<T> { payload: T }

function registerListeners<T extends EventPayload>(
  listeners: Record<string, (e: CustomEvent<T>) => void>
) {}

// 报错：类型'"hello"'无法赋值给类型'2'
registerListeners({
    eventOne: (event: CustomEvent<'hello'>) => {},
    eventTwo: (event: CustomEvent<2>) => {}
})

问题：泛型T被推断为第一个回调的'hello'，导致第二个回调的2类型不匹配。

错误实现2：回调为泛型函数 #

function registerListeners(
  listeners: Record<string, <T extends EventPayload>(e: CustomEvent<T>) => void>
) {}

// 报错：类型'EventPayload'无法赋值给类型'"hello"'
registerListeners({
    eventOne: (event: CustomEvent<'hello'>) => {},
    eventTwo: (event: CustomEvent<2>) => {}
})

问题：要求每个回调必须接受任意EventPayload类型的CustomEvent，但实际回调仅接受特定子类型，类型不兼容。

错误实现3：使用any失去约束 #

function registerListeners(listeners: Record<string, (e: CustomEvent<any>) => void>) {}

// 无报错，但允许不符合EventPayload的类型传入
registerListeners({
    eventOne: (event: CustomEvent<'hello'>) => {},
    eventTwo: (event: CustomEvent<{a: string}>) => {}
})

问题：无法约束T必须属于EventPayload，失去类型检查意义。

正确实现 #

通过工具类型约束单个回调，再用泛型约束整个Record的属性类型，允许每个回调使用独立的符合要求的T：

type EventPayload = string | number;
interface CustomEvent<T> { payload: T }

// 工具类型：约束回调参数为符合要求的CustomEvent
type ValidEventListener<T extends EventPayload = EventPayload> = (e: CustomEvent<T>) => void;

// 泛型L约束为Record<string, ValidEventListener>的子类型
function registerListeners<L extends Record<string, ValidEventListener>>(listeners: L) {}

测试验证 #

// ✅ 正确：两个回调的payload均符合EventPayload约束
registerListeners({
    eventOne: (event: CustomEvent<'hello'>) => {},
    eventTwo: (event: CustomEvent<2>) => {}
})

// ❌ 错误：{a: string}不属于EventPayload，触发类型检查报错
registerListeners({
    eventOne: (event: CustomEvent<'hello'>) => {},
    eventTwo: (event: CustomEvent<{a: string}>) => {}
})

原理说明 #

• ValidEventListener工具类型确保单个回调的参数是CustomEvent<T>，且T必须是EventPayload的子类型。
• 泛型L允许每个事件回调使用各自独立的T，同时整体约束所有回调都符合ValidEventListener要求，既保留了单个回调的类型特异性，又保证了全局的类型约束。

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