TypeScript 泛型函数内无法按预期收窄类型是什么原因

问题原因 #

你遇到的两个场景的报错都不属于代码逻辑错误，是当前TypeScript类型系统的能力限制导致的：TS暂不支持对泛型参数关联的索引类型做联动收窄。

run1报错解释

当你在泛型函数中通过if (eventName === EventType.A)收窄了泛型参数eventName的类型时，TS无法将这个收窄逻辑同步到和T关联的EventParams[T]类型上，param只会被识别为EventParams所有值类型的联合，不会自动对应到当前eventName的参数类型，因此访问param.name会提示属性不存在。

run2报错解释

同理，callbacks[eventName]的类型会被识别为所有回调函数的联合，TS无法证明这个回调的入参类型和当前传入的param类型完全匹配，因此调用callback(param)会报参数不兼容的错误。

常用解决方案 #

这里提供3种可以正常运行且保证类型安全的改造方案：

方案1：短平快的类型断言

适合小型业务场景，在确定逻辑安全的前提下直接加断言跳过TS校验：

const run1 = function <T extends EventType>(eventName: T, param: EventParams[T]) {
    if (eventName === EventType.A) {
        // 断言为A对应的参数类型
        console.log((param as EventParams[EventType.A]).name)
    }
}

const run2 = function <T extends EventType>(eventName: T, param: EventParams[T]) {
    const callback = callbacks[eventName];
    // 断言回调和参数类型匹配
    (callback as (param: EventParams[T]) => any)(param);
}

方案2：改用联合类型入参

TS对普通联合类型的收窄支持非常完善，将入参封装为联合类型的对象即可自动收窄：

// 定义事件入参的联合类型
type EventUnion = 
  | { eventName: EventType.A, param: EventParams[EventType.A] }
  | { eventName: EventType.B, param: EventParams[EventType.B] }

const run1 = function (event: EventUnion) {
    if (event.eventName === EventType.A) {
        // 无需断言，可直接访问对应属性
        console.log(event.param.name)
    }
}

const run2 = function (event: EventUnion) {
    const callback = callbacks[event.eventName];
    // 无需断言，可直接调用
    callback(event.param);
}

方案3：使用函数重载

适合对外暴露公共API的场景，保证外部调用完全类型安全，内部仅需少量断言：

// 重载声明
function run2(eventName: EventType.A, param: EventParams[EventType.A]): void
function run2(eventName: EventType.B, param: EventParams[EventType.B]): void
// 内部实现
function run2(eventName: EventType, param: EventParams[EventType]) {
  const callback = callbacks[eventName];
  (callback as (p: typeof param) => any)(param);
}

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