TypeScript 5带参数方法装饰器类型推断异常问题求助

问题原因 #

你遇到的隐式any类型错误，本质是TypeScript在装饰器工厂的参数推断流程中存在上下文类型关联断裂的问题：

• 虽然你实现的ParamsToFunc能正确处理参数类型，但当mappers以数组形式传入装饰器工厂时，TypeScript无法自动将数组中每个mapper的参数类型，与目标方法对应位置的参数类型做强绑定。
• 编辑器hover时显示的正确类型，是编辑器基于装饰器最终关联的方法参数做的补全提示，但编译阶段的类型推断没有完整传递这个上下文，导致单个mapper的参数被降级为any。

优化方案 #

核心思路是显式建立mappers数组与目标方法参数类型的一一对应约束，让TypeScript能明确推断每个mapper的参数类型。以下是两种可行的实现方式：

方式1：先传mappers再绑定方法参数类型 #

通过装饰器工厂的双层泛型，先接收mappers并约束其类型，再返回一个泛型装饰器绑定目标方法的参数类型：

// 单个参数映射器的类型：接收对应位置的参数，返回任意值
type ParamMapper<T> = (param: T) => unknown;
// 映射器数组类型：与目标方法的参数类型严格一一对应
type ParamMappers<T extends any[]> = { [K in keyof T]: ParamMapper<T[K]> };

// 装饰器工厂：先接收映射器数组，再返回绑定方法参数的装饰器
function log<M extends any[]>(mappers: ParamMappers<M>) {
  return function <T extends (...args: M) => any>(
    target: any,
    propertyKey: string | symbol,
    descriptor: TypedPropertyDescriptor<T>
  ) {
    const originalMethod = descriptor.value!;

    descriptor.value = function (...args: M) {
      // 执行参数映射
      const mappedArgs = args.map((arg, index) => mappers[index](arg));
      console.log("映射后的参数:", mappedArgs);
      // 调用原方法
      return originalMethod.apply(this, args);
    } as T;

    return descriptor;
  };
}

使用示例：

class Demo {
  @log([
    (v: number) => v * 2, // 可手动指定类型，也可让TS自动推断
    (v: string) => v.toUpperCase()
  ])
  test(num: number, str: string) {
    console.log("原始参数:", num, str);
  }
}

const demo = new Demo();
demo.test(123, "hello");
// 输出：
// 映射后的参数: [246, "HELLO"]
// 原始参数: 123 hello

方式2：先绑定方法参数类型再推断mappers #

调整泛型顺序，让装饰器先捕获目标方法的参数类型，再自动推断每个mapper的参数类型：

// 装饰器工厂：直接泛型绑定目标方法的参数类型
function log<T extends any[]>(
  mappers: { [K in keyof T]: (param: T[K]) => unknown }
) {
  return function (
    target: any,
    propertyKey: string | symbol,
    descriptor: TypedPropertyDescriptor<(...args: T) => any>
  ) {
    const originalMethod = descriptor.value!;

    descriptor.value = function (...args: T) {
      const mappedArgs = args.map((arg, i) => mappers[i](arg));
      console.log("映射后的参数:", mappedArgs);
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

使用示例（无需手动指定mapper参数类型）：

class Demo {
  @log([
    (v) => v * 2, // TS自动推断v为number
    (v) => v.toUpperCase() // TS自动推断v为string
  ])
  test(num: number, str: string) {
    console.log("原始参数:", num, str);
  }
}

关键改进点 #

• 通过{ [K in keyof T]: ... }的索引类型，强制mappers数组的每个元素类型，与目标方法对应位置的参数类型完全匹配。
• 利用双层泛型或直接绑定方法参数类型，让TypeScript的类型推断链完整传递，避免上下文丢失导致的any类型降级。

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