Typescript 在推断参数的同时使用方法类型

发布于06月19日

Use Case

我有一个类，它是通过传入方法列表来构造的，然后允许您通过该类调用这些方法(该类添加了一些附加功能).这些方法在调用时将类(Foo)绑定为其上下文.所以我有FooMethod型.

class Foo {
  public constructor(methods) {}
}

const myMethod: FooMethod<number> = function(value: number): number {
  return value
}

const myMethods = [myMethod]

const foo = new Foo(myMethods)

type FooMethod<T> = (this: typeof foo, ...args: any[]) => T

type MyMethodParameters = Parameters<typeof myMethod> // any[]

Issue

将类型FooMethod<number>添加到myMethod常量.我无法再通过执行Parameters<typeof myMethod>来获取函数的参数类型

Question

有没有办法让FooMethod类型仍然推断参数？我希望能做到Parameters<typeof myMethod>分，但仍能得到[number]分

推荐答案

这是因为在type FooMethod<T>中，您将rest参数声明为any[].

可以将参数作为泛型添加到类型中:

type FooMethodNew<Args extends any[], ReturnValue> = (this: typeof foo, ...args: Args) => ReturnValue

但在实践中可能是多余的/冗长的

const myMethodNew: FooMethodNew<[value: number], number> = function(value: number): number {...}

相反，您可以使用助手函数来帮助利用函数的推断能力

const fooMethodBuilder = <Args extends any[], ReturnValue>(func: FooMethodNew<Args, ReturnValue>) {
    return func
}

const myMethodBuilt = fooMethodBuilder(function(value: number): number {
    console.log(this)
    return value
})

type MyMethodParameters3 = Parameters<typeof myMethodBuilt> // [value: number]

View this on TS Playground

Typescript 在推断参数的同时使用方法类型

Use Case

Issue

Question

推荐答案

Typescript相关问答推荐

如何在不使用变量的情况下静态判断运算式的类型？

界面中这种类型的界面界面中的多态性

在React中实现具有独立页面的嵌套路径的最佳实践是什么？

用泛型类型覆盖父类函数导致类型y中的Property x不能赋给基类型Parent中的相同属性."'''''' "

如何使用一个字段输入对象，其中每个键只能是数组中对象的id属性，而数组是另一个字段？

无法绑定ngModel.条件ngSwitchCase中的错误

状态更新后未触发特定元素的Reaction CSS转换

部分类型化非 struct 化对象参数

在嵌套属性中使用Required

路由链接不会导航到指定router-outlet 的延迟加载模块

带下拉菜单的Angular 响应式选项卡

一个打字类型可以实现一个接口吗？

在VSCode中显示eslint错误，但在终端中运行eslint命令时不显示？(Vite，React，TypeScript)

刷新时保持当前名称的Angular

17个Angular 的延迟观察.如何在模板中转义@符号？

是否可以定义引用另一行中的类型参数的类型？

如何调整项目数组，但允许权重影响顺序

仅当定义了值时才按值筛选数组

如何在没有空接口的情况下实现求和类型功能？

使用 TypeScript 在 SolidJS 中绘制 D3 力图