如何在TypeScript中实现保留传入类型的辅助函数

需求说明 #

要给现有example函数添加TypeScript类型定义，实现以下效果：

• 输入值允许为string，或是传入函数fn的参数类型
• 返回值自动推断为string，或是fn的返回类型
• 传入不同签名的fn时，自动匹配对应的联合类型（比如传入FnType返回A，传入FnType2返回B）

类型定义与函数实现 #

通过泛型捕获fn的参数和返回类型，就能实现自动推断：

// 直接在函数上声明泛型，简洁实现类型推断
const example = <T, U>(fn: (arg: T) => U) => (value: string | T): string | U => {
  if (typeof value === 'string') return value;
  return fn(value);
};

验证示例 #

示例1：匹配FnType与类型A #

先修正原始类型的语法错误后验证：

type A = {a: number | undefined, b: string} | string;
type FnType = (a: {a: number | null, b: string}) => {a: number | undefined, b: string};

const fn: FnType = (arg) => ({a: arg.a, b: arg.b});
const wrappedFn = example(fn);
// wrappedFn类型自动推断为：(value: string | {a: number | null, b: string}) => string | {a: number | undefined, b: string}
// 完全匹配类型A的结构

示例2：匹配FnType2与类型B #

type B = {a: number | null, b: string} | string;
type FnType2 = (a: {a: number | undefined, b: string}) => {a: number | null, b: string};

const fn2: FnType2 = (arg) => ({a: arg.a ?? null, b: arg.b});
const wrappedFn2 = example(fn2);
// wrappedFn2返回类型自动推断为string | {a: number | null, b: string}，即类型B

示例3：自定义函数的类型推断 #

const testFn = (a: {a: string | undefined}) => ({a: a.a ?? null});
const wrappedTestFn = example(testFn);
// wrappedTestFn参数类型：string | {a: string | undefined}
// wrappedTestFn返回类型：string | {a: string | null}

补充说明 #

如果需要处理深层嵌套的类型转换（比如你提供的mapper示例），可以基于上述泛型扩展递归类型，但当前example函数的核心需求，用上述泛型定义已经完全覆盖。

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