记录接口的属性是 class 而不是 class 的实例

Question

我有一些遗留 AngularJs 代码，我正在尝试使用 Typescript 为我们的一个新项目记录这些代码，但我运行遇到了一些奇怪的情况，我正面临问题。

本质上我们有一个“class”的Service/Instance，它有一些属性，这些属性实际上是classes。一个基本示例可能如下所示：

function MySingletonService() {
  function SomeClass(...) {
    ...
  }
  SomeClass.parse= function() {
    ...
    return new SomeClass(...);
  };
  this.SomeClass = SomeClass;
}
angular.module(...).service('MySingletonService', MySingletonService);
// Inside a RUN call here, for demonstrative purposes in this issue, it would be used as:
// The actual use in the legacy project happens in other services, directives, components etc.
angular.run(['MySingletonService', function(service) {
  var instance1OfClass = new service.SomeClass();
  var instance2OfClass = new service.SomeClass();
  var instance3OfClass = service.SomeClass.parse(...);
}]);

但我对如何在打字稿 .d.ts 文件中记录“MySingletonService”有点不知所措。通常我会为服务声明 classes 和接口，像这样：

export declare class SomeClass {
  constructor(...);
  static parse(...):SomeClass;
}

export declare interface IMySingletonService {
  SomeClass: ???;
}

如果我将其定义为 SomeClass: SomeClass，那么显然我们将其视为 class 的一个实例，但这里是分配给 [=39] 的实际 class =].因此，我无法找到一个看起来像我所拥有的例子。

事实证明，仅此搜索有点困难，因为它基本上以如何将属性定义为 class 实例的示例结束。

如果我接受必须像这样“双文档化”我的代码，看起来我可以相当接近：

export declare class SomeClass {
  constructor(...);
  static parse(...):SomeClass;
}

export declare interface IMySingletonService {
  SomeClass: {
    new (...): SomeClass;
    parse(...): SomeClass;
  };
}

但是有没有更好的办法呢？

Answer 1

`typeof SomeClass`

类型 SomeClass 描述了 SomeClass 的实例。为了描述 class 本身 你应该使用 typeof SomeClass.

此类型包括构造函数和所有静态方法。所以你可以调用 new service.SomeClass() 也可以调用 service.SomeClass.parse().

declare class SomeClass {
    constructor();
    static parse(): SomeClass;
}

export declare interface IMySingletonService {
    SomeClass: typeof SomeClass;
}

declare const service: IMySingletonService;

const obj = new service.SomeClass(); // obj has type SomeClass

const parsed = service.SomeClass.parse(); // parsed has type: SomeClass

Typescript Playground Link

根据 the docs (previous version):

Next, we then use the class directly. Here we create a new variable called greeterMaker. This variable will hold the class itself, or said another way its constructor function. Here we use typeof Greeter, that is “give me the type of the Greeter class itself” rather than the instance type. Or, more precisely, “give me the type of the symbol called Greeter,” which is the type of the constructor function. This type will contain all of the static members of Greeter along with the constructor that creates instances of the Greeter class. We show this by using new on greeterMaker, creating new instances of Greeter and invoking them as before.

记录接口的属性是 class 而不是 class 的实例

Document that property of interface is a class and not instance of class

angularjs

typescript

`typeof SomeClass`

记录接口的 属性 是 class 而不是 class 的实例

Document that property of interface is a class and not instance of class

angularjs

typescript

typeof SomeClass

记录接口的属性是 class 而不是 class 的实例

`typeof SomeClass`