如何在TypeScript中为自定义getMethod实现精准参数类型提示？

需求背景 #

我希望通过调用this.getMethod访问对象中的方法属性，示例JavaScript代码如下：

function defineObj(params) {
    // `enhanced` 会给 params.__prop__ 添加 `getMethod` 方法
    return enhanced(params)
}

let obj = defineObj({
    methods: {
        foo: (num) => num,
        bar() {
            this.getMethod('foo', 1) // 实际会调用 `this.methods.foo(1)`
        }
    }
}) 

现在要将代码迁移到TypeScript，要求实现精准类型提示：当调用this.getMethod('foo', '1')时，IDE能提示应传入number而非string。

尝试的代码（未达预期） #

我尝试通过CtrlContext约束方法的this上下文，但目前仅能获取第一个参数的类型提示，输入方法名后，后续参数无法得到正确的类型约束：

type CtrlContext<M> = {
    getMethod: <T extends keyof M>(name: T, ...params:  M[T] extends (...arg: infer S2) => infer S1 ? S2 : any[] ) => any
}

type Methods<M> = {
    [K in keyof M]: (this: CtrlContext<M>, ...params: any) => ReturnType<any>
}

type Ctrls<M> = {
    methods: Methods<M>
}

function defineObj<M>(params: Ctrls<M>) {
    return params
}

defineObj({
    methods: {
        foo: (num: number) => num,
        foo2: (num1: number, str: string) => num,
        bar() {
            this.getMethod("foo", ) // 第二个参数类型为any，而非预期的number
        }
    }
})

export default {}

问题 #

getMethod的第一个参数有类型提示，但输入方法名后，后续参数无法获得对应方法的类型约束，该如何解决？

解决方案 #

问题核心在于Methods类型用any覆盖了原始方法的参数和返回值类型，导致TypeScript无法推断准确信息。调整类型定义，保留原始方法的类型特征，同时绑定正确的this上下文即可解决：

// 定义上下文类型，根据方法名自动推断参数和返回值
type CtrlContext<M> = {
  getMethod: <T extends keyof M>(
    name: T,
    ...params: Parameters<M[T]>
  ) => ReturnType<M[T]>;
};

// 转换方法类型：绑定this上下文，同时保留原方法的参数和返回值类型
type Methods<M> = {
  [K in keyof M]: M[K] extends (...args: infer Args) => infer R
    ? (this: CtrlContext<M>, ...args: Args) => R
    : never;
};

type Ctrls<M> = {
  methods: Methods<M>;
};

// 约束泛型M为函数集合，避免非函数值干扰类型推断
function defineObj<M extends Record<string, (...args: any[]) => any>>(params: Ctrls<M>) {
  return params;
}

defineObj({
  methods: {
    foo: (num: number) => num,
    foo2: (num1: number, str: string) => num1 + str.length,
    bar() {
      this.getMethod("foo", 1); // 正确提示第二个参数为number
      this.getMethod("foo2", 2, "test"); // 正确提示参数类型为(number, string)
      // this.getMethod("foo", "1"); // 传入错误类型会触发报错，符合预期
    },
  },
});

关键调整点 #

1. Methods类型优化：通过条件类型M[K] extends (...args: infer Args) => infer R提取原始方法的参数(Args)和返回值(R)，同时给this绑定CtrlContext<M>，不再用any覆盖类型信息。
2. getMethod类型简化：直接使用Parameters<M[T]>和ReturnType<M[T]>获取目标方法的参数与返回值类型，替代冗余的条件推断，更简洁准确。
3. 泛型约束增强：给M添加extends Record<string, (...args: any[]) => any>约束，确保传入的methods均为函数类型，避免非函数值导致的类型错误。

调整后，调用this.getMethod时，输入方法名后会自动触发对应方法的参数类型提示，传入错误类型会即时触发TypeScript报错。

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