TypeScript中约束函数参数类型以构建返回目标函数的管道

问题背景 #

我正在构建一个函数管道，它能创建一系列检查/守卫逻辑，最终接收一个函数并返回新函数——新函数要么提前返回，要么调用传入的函数。核心需求是让管道适配任意类型的函数，且finally方法需要满足：

• 传入函数与目标函数类型的返回类型一致
• 传入函数既接收目标函数的原有参数，也接收管道生成的额外命名参数

当前的最小实现存在两个编译错误：

1. 返回的函数无法赋值给FunctionType：'(...args: any[]) => ReturnType<FunctionType>' is assignable to the constraint of type 'FunctionType', but 'FunctionType' could be instantiated with a different subtype of constraint '(...args: any[]) => any'
2. 参数类型不匹配：Argument of type 'any[]' is not assignable to parameter of type 'Parameters<FunctionType>'

错误的最小实现代码：

class FunctionPipeline<FunctionType extends (...args: any[]) => any> {
  finally(
    fn: (...args: Parameters<FunctionType>) => ReturnType<FunctionType>
  ): FunctionType {
    return (...args) => {
      return fn(...args);
    };
  }
}

interface LoaderFunction {
  ({ name }: { name: string }): string;
}

const goalFunction = new FunctionPipeline<LoaderFunction>().finally(
  ({ name }) => {
    const result = `Hello ${name}`;
    console.log(result);
    return result;
  }
);

const app = document.getElementById("app");
if (app) app.innerHTML = goalFunction({ name: "World" });

正确实现方案 #

通过新增泛型跟踪管道生成的参数类型，同时严格约束finally方法的参数与返回值类型，解决编译错误并满足需求：

// 泛型参数：FunctionType为目标函数类型，GeneratedArgs为管道生成的参数类型
class FunctionPipeline<
  FunctionType extends (...args: any[]) => any,
  GeneratedArgs = {}
> {
  // 存储管道生成的参数
  private generatedArgs: GeneratedArgs = {} as GeneratedArgs;

  // 示例：生成参数的方法（可根据需求扩展更多检查/生成方法）
  provideName(name: string): FunctionPipeline<FunctionType, { name: string }> {
    this.generatedArgs = { name } as GeneratedArgs & { name: string };
    return this as unknown as FunctionPipeline<FunctionType, { name: string }>;
  }

  finally(
    // 传入的函数先接收管道生成的参数，再接收目标函数的原有参数
    fn: (generatedArgs: GeneratedArgs, ...args: Parameters<FunctionType>) => ReturnType<FunctionType>
  ): FunctionType {
    // 严格匹配目标函数的参数类型，解决类型不兼容问题
    return ((...args: Parameters<FunctionType>) => {
      return fn(this.generatedArgs, ...args);
    }) as FunctionType;
  }
}

// 目标函数类型：无参数，返回字符串
interface GoalFunctionType {
  (): string;
}

// 使用管道：生成name参数后传入最终函数
const p = new FunctionPipeline<GoalFunctionType>();
const passedInFunction = ({ name }) => `Hello ${name}`;
const goalFunction: GoalFunctionType = p.provideName("Nathan").finally(passedInFunction);

// 调用目标函数，无需传入管道生成的参数
console.log(goalFunction()); // 输出：Hello Nathan

关键解决点 #

• 新增GeneratedArgs泛型，让类型检查器能跟踪管道生成的参数类型，确保finally中传入的函数能正确识别这些参数
• 明确finally方法中传入函数的参数顺序：先管道生成参数，再目标函数原有参数，符合需求中的“额外参数作为第一个命名参数”要求
• 返回函数时，通过as FunctionType断言并严格约束参数为Parameters<FunctionType>，解决返回值类型不兼容的错误
• 内部调用传入函数时，正确传递管道生成的参数和原函数参数，解决参数类型不匹配的错误

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