TypeScript如何基于传入函数返回类型用泛型推导结果函数类型

这个需求完全可以通过TypeScript泛型实现，全程不需要使用any丢失类型信息。

实现代码 #

直接给高阶函数增加泛型参数捕获传入函数的返回值类型即可，改造后的processOrNull代码如下：

const processOrNull = <T>(func: (params: IParams) => T): (params: IParams) => T | null => {
    const newFunc = (params: IParams): T | null => {
        // 原有校验逻辑：校验不通过直接返回null，校验通过执行传入的原函数
        return func(params);
    }
    return newFunc;
}

// 导出的函数不需要手动标注类型，TS会自动完成类型推导
export const processCarOrNull = processOrNull(processCar);  // 推导类型：(params: IParams) => Car | null
export const processBoatOrNull = processOrNull(processBoat); // 推导类型：(params: IParams) => Boat | null

原理说明 #

• 泛型参数<T>会自动根据传入函数的返回值做类型推断：传入processCar时T被推断为Car，传入processBoat时T被推断为Boat，不需要手动指定泛型参数
• 入参func的类型定义为(params: IParams) => T，和现有两个处理函数的签名完全匹配，传错参数类型时TS会直接抛错
• 返回的包装函数类型固定为(params: IParams) => T | null，正好符合要求的类型匹配规则

如果后续需要让这个高阶函数适配任意入参类型的处理函数，可以把入参也抽为泛型，做通用版本封装：

// 通用版本，不限制入参类型
const processOrNull = <TParams, TReturn>(func: (params: TParams) => TReturn) => {
    return (params: TParams): TReturn | null => {
        // 校验逻辑
        return func(params);
    }
}

这个版本不管传入的处理函数参数是什么类型，都能正确推导包装后的函数类型，复用性更强。

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