TypeScript无法传递与函数参数同类型的返回值问题排查

问题描述 #

这段代码在JavaScript中可正常运行，但TypeScript编译不通过——无法将参数生成函数的返回值传递给包装函数。需求是支持任意数量的可变参数，只要参数生成函数的返回值与目标函数参数匹配即可。

复现代码 #

// 接受带未知参数的函数，返回接收相同参数的函数
const wrapFunc =
  <T extends (...args: never[]) => Promise<unknown>>(f: T): ((...args: Parameters<T>) => void) =>
  (...args: Parameters<T>) => {
    f(...args)
      .then((result) => console.log(result))
      .catch((error) => console.log(error))
  }

// 返回传入字符串的Promise
const promise = async (word: string) => word

wrapFunc(promise)('works!')

// 接收wrapFunc兼容的Promise函数，以及返回该函数参数类型的生成函数，将生成值传入包装函数
const passThrough = <
  T extends (...args: never[]) => Promise<unknown>,
  U extends () => Parameters<T>,
>(
  f: T,
  paramsGenerator: U,
) => {
  const wrapped = wrapFunc(f)
  wrapped(paramsGenerator())
}

passThrough(promise, () => '运行正常但编译失败!')

编译后JavaScript输出 #

"use strict";
// accept a function with unknown parameters and return a function that takes in those same paramters
const wrapFunc = (f) => (...args) => {
    f(...args)
        .then((result) => console.log(result))
        .catch((error) => console.log(error));
};
// a simple promise returning whatever string is given to it
const promise = async (word) => word;
wrapFunc(promise)('works!');
// this accepts a promise that is the same type that wrapFunc does and gives the promise to wrapFunc
// it also accepts a function that returns the same type of parameter that the promise takes and passes
// the return value from the second function to the wrapped version of the first
const passThrough = (f, paramsGenerator) => {
    const wrapped = wrapFunc(f);
    wrapped(paramsGenerator());
};
passThrough(promise, () => 'this works when ran but fails compilation!');

编译选项 #

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "target": "ES2017",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node"
  }
}

问题根源 #

1. 类型不匹配：Parameters<T>对于单参数函数返回的是[string]这类元组类型，但传入的参数生成函数返回的是字符串，不是元组，类型约束不满足。
2. 参数传递方式错误：wrapped函数期望接收分散的参数（如wrapped('str')），即使参数生成函数返回元组，也需要用扩展运算符展开才能正确传递。

解决方案 #

基础类型安全方案 #

调整类型定义，让参数生成函数返回严格匹配的元组类型，并在调用时展开参数：

const passThrough = <
  T extends (...args: never[]) => Promise<unknown>,
>(
  f: T,
  paramsGenerator: () => Parameters<T>,
) => {
  const wrapped = wrapFunc(f);
  // 用扩展运算符展开元组参数
  wrapped(...paramsGenerator());
};

// 调用时参数生成函数返回元组
passThrough(promise, () => ['运行正常且编译通过!']);

兼容单参数直接返回的方案 #

通过条件类型处理单参数场景，同时保留多参数的元组支持，让调用更灵活：

// 单参数时允许返回单个值，多参数时返回元组
type ParamsOrSingle<T extends unknown[]> = T extends [infer P] ? P : T;

const passThrough = <
  T extends (...args: never[]) => Promise<unknown>,
  U extends () => ParamsOrSingle<Parameters<T>>,
>(
  f: T,
  paramsGenerator: U,
) => {
  const wrapped = wrapFunc(f);
  const params = paramsGenerator();
  // 区分单参数和多参数的传递逻辑
  if (Array.isArray(params)) {
    wrapped(...params);
  } else {
    wrapped(params as Parameters<T>[0]);
  }
};

// 两种调用方式均支持
passThrough(promise, () => '单参数直接返回');
passThrough((a: number, b: string) => Promise.resolve(a + b), () => [123, 'abc']);

不理想方案说明 #

之前尝试的Parameter<T>类型仅提取第一个参数，且类型约束宽松，会接受任意函数，无法保证类型安全：

type Parameter<T extends (args: unknown) => unknown> = T extends (arg: infer P) => unknown ? P : never

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