如何在 TypeScript 中为静态方法链添加函数类型？

Question

Image 我有这个小 class 和 2 个静态方法。像这样，我可以根据需要链接方法。

class MyClass {
  static x() {
    console.log("x");
    return this;
  }

  static y() {
    console.log("y");
    return this;
  }
}

MyClass.x().y();

如果我想为这 2 种方法添加类型，类型会是什么样子？换句话说，我如何定义正确的 return 类型？

class MyClass {
  static x(): MyClass {
    console.log("x");
    return this;
  }

  static y(): MyClass {
    console.log("y");
    return this;
  }
}

MyClass.x().y();

这行不通，但希望能说明我的意思。

Answer 1

名为MyClass的类型对应于MyClassclass的实例，因此没有静态方法，例如 x 或 y.

在静态方法实现中，this 指的是 构造函数本身 ，它（只要你没有 subclasses担心) 将是名为 MyClass 的 value。 MyClass 构造函数的类型不是 MyClass，而是 typeof MyClass，使用 Typescript typeof type query operator.

如果您使用 IntelliSense 检查示例代码中为 x() 和 y() 推断的 return 类型，您将看到：

class MyClass {       
  // (method) MyClass.x(): typeof MyClass
  //     ↓
  static x() {
    console.log("x");
    return this;
  }
}

如果您真的出于某种原因想要注释类型，typeof MyClass 可能是正确的答案：

class MyClass {
  static x(): typeof MyClass {
    console.log("x");
    return this;
  }

  static y(): typeof MyClass {
    console.log("y");
    return this;
  }
}

请注意，如果您有 subclasses 并且您想了解 subclasses 在静态方面也具有继承这一事实，事情会变得有点棘手：

class YourClass extends MyClass {
  static z = 123;
}

YourClass.x().z // error!
// ---------> ~
// not known to exist by TypeScript but exists at runtime

你可能不关心这个，但如果你关心它，这就是 TypeScript 中的一个突出问题；有关讨论和解决方法，请参阅 microsoft/TypeScript#5863。可根据要求提供更多信息。

Playground link to code

如何在 TypeScript 中为静态方法链添加函数类型？

How can I add function typings for static method chaning in TypeScript?

methods

static

types

method-chaining

typescript