TypeScript泛型函数包装与类型推断异常问题排查

问题背景 #

初始实现的函数包装器可以正常处理泛型函数：

type WrappedFunction<P> = (props: P, children?: string[]) => void
type NonWrappedFunction<P> = (props: P, children: string[]) => void

const wrapFunction = <P>(rawFn: NonWrappedFunction<P>): WrappedFunction<P> => {
    return (props, children) => rawFn(props, children ?? [])
}

// 类型推断正常，wrappedFunction 为 <T>(props: {val: T}, children?: string[]) => void
const wrappedFunction = wrapFunction(<T>(props: {val: T}) => {})

但当修改WrappedFunction为包含无props参数的交叉类型重载后，类型推断失效：

// 修改后的WrappedFunction
type WrappedFunction<P> = ((props: P, children?: string[]) => void) & ((children?: string[]) => void)

// 此处无法正确推断props的类型，出现类型错误
const wrappedFunction = wrapFunction(<T>(props: {val: T}) => {})

问题原因 #

TypeScript的类型推断是双向推断，会同时从函数参数和返回类型推导泛型参数。当返回类型WrappedFunction<P>包含一个不依赖泛型P的签名（即(children?: string[]) => void）时，推断器会认为P可以是任意类型（甚至unknown）——因为这个无props的重载不需要P的约束，导致推断器不再从传入的rawFn参数中提取P的具体类型。

尤其当rawFn本身是泛型函数时，这种冲突会更明显：推断器无法将rawFn的泛型参数与包装器的P建立关联，最终导致类型推断失败。

规避方案 #

方案1：使用函数重载替代交叉类型返回值 #

将包装器定义为函数重载，而非返回交叉类型的函数签名，TypeScript对函数重载的类型推断逻辑更清晰：

type NonWrappedFunction<P> = (props: P, children: string[]) => void

// 定义函数重载
function wrapFunction<P>(rawFn: NonWrappedFunction<P>): (props: P, children?: string[]) => void;
function wrapFunction<P>(rawFn: NonWrappedFunction<P>): (children?: string[]) => void;
function wrapFunction<P>(rawFn: NonWrappedFunction<P>) {
    // 实现重载逻辑：区分第一个参数是props还是children
    const wrapped = (arg1?: P | string[], arg2?: string[]) => {
        if (arg1 !== undefined && !Array.isArray(arg1)) {
            // 第一个参数是props
            rawFn(arg1, arg2 ?? []);
        } else {
            // 第一个参数是children（或无参数）
            // 注意：若P可能是数组类型，需调整判断逻辑，避免误判
            rawFn({} as P, (arg1 as string[]) ?? []);
        }
    };
    return wrapped as typeof wrapFunction<P>;
}

// 类型推断恢复正常
const wrappedFunction = wrapFunction(<T>(props: {val: T}) => {});
// wrappedFunction 拥有两个重载：
// (props: {val: T}, children?: string[]) => void
// (children?: string[]) => void

方案2：约束泛型参数的推断优先级 #

通过给泛型参数P添加显式的推断提示，强制TypeScript优先从rawFn的参数中推断P，而非从返回类型：

type WrappedFunction<P> = ((props: P, children?: string[]) => void) & ((children?: string[]) => void)
type NonWrappedFunction<P> = (props: P, children: string[]) => void

// 使用 infer 强制从 rawFn 的参数推断 P
const wrapFunction = <P, F extends NonWrappedFunction<P>>(rawFn: F): WrappedFunction<P> => {
    return Object.assign(
        (props: P, children?: string[]) => rawFn(props, children ?? []),
        (children?: string[]) => rawFn({} as P, children ?? [])
    ) as WrappedFunction<P>;
}

// 类型推断正常
const wrappedFunction = wrapFunction(<T>(props: {val: T}) => {});

注意：方案2中{} as P的类型断言需要根据实际场景调整，如果P是必填的非空类型，可能需要确保rawFn能接受默认值，或者调整NonWrappedFunction的props为可选类型。

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