TypeScript泛型函数Component的computed入参类型推断异常问题

问题根因 #

这个推断差异是TypeScript泛型参数的推断优先级顺序和上下文推断边界规则导致的：

• 你定义的Component泛型参数存在多层依赖：TData的入参类型依赖TProperty，TComputed的入参类型又依赖TData的返回值。
• 对于无prop入参的data函数，TypeScript不需要关联TProperty就能直接推断出TData的完整类型为() => {dataA: string}，后续TComputed里的条件推断可以正确提取到TData的返回值类型，交叉后的AllData类型就符合预期。
• 当data函数新增未标注类型的prop入参后，TypeScript需要先确定prop的类型（也就是TProperty）才能完成TData的完整类型推断。但computed的上下文类型推断优先级更高，在TData返回值还未完成推断的阶段，就会先 fallback 到TData泛型约束里定义的返回值上限Record<string, any>，最终就出现了{propA:string} & Record<string, any>的推导结果。

修复方案 #

你可以将TComputed约束里的手动条件推断替换为TS内置的ReturnType工具类型，就能对齐两种场景的推断逻辑：

function Component<
  TProperty, 
  TData extends (prop: TProperty) => Record<string, any>, 
  TComputed extends { 
    [k: string]: (data: TProperty & ReturnType<TData>) => any 
  }
>(opt: { properties: TProperty, data: TData, computed: TComputed })
: TData { return '' as any }

调整后无论data是否携带prop入参，AllData的类型都可以被正确推导。

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