TypeScript 类型 `InstanceType<typeof MyClass>` 和 `: MyClass` 之间的差异

Question

我一直在尝试了解使用

InstanceType

分配类型或仅使用类名称之间是否有任何区别。

特别是考虑到课程：

MyClass {

  public static foo: string = 'abc'

  public makeFoo() {
    // awesome maker
  }

}

当我想使用类的实例时，似乎没有什么区别：

// inside some other Class
private myClassInstance: InstanceType<typeof MyClass> 
...
this.myClassInstance = new MyClass()

和

// inside some other Class
private myClassInstance: MyClass 
...
this.myClassInstance = new MyClass()

至少在 VSCode 中，使用两者中的任何一个都没有任何明显的差异。不过我想如果 TS 实现了

InstanceType<>

，那么一定存在差异。

谁知道有什么区别吗？

Answer 1

InstanceType

辅助类型的存在是因为类名可以代表两件事：

• 类名作为 JavaScript 中的构造函数运行时。
• 类名作为构造函数的返回类型。 （包括构造函数的

  prototype

  和可选的一些实例字段）

在 TypeScript 中，当您声明

class

时，您同时声明了：构造函数（因此其类型）和生成的实例的类型（类字段和方法）。

在您的示例中，两种用法都发生了：

• MyClass

  ：一种包含类字段和方法的接口。

• typeof MyClass

  ：构造函数。 （在本例中，

  MyClass

  指的是运行时类）

由于您没有指定构造函数，因此它的类型是

new () => MyClass

，并且您可以通过

MyClass

从中提取类型

InstanceType

。

---

作为一个现实世界的示例，假设您正在尝试实现一个工厂（返回类实例的函数）。一种简单的实现如下所示：

declare function factory<T>(ctor: T): T;

class A { }

const res = factory(A); // typeof A: not what we expect

这不起作用，因为我们实际上返回构造函数本身的类型。

但是，这个实现是有效的：

type Constructor = new (...args: any[]) => any;

declare function factory<T extends Constructor>(ctor: T): InstanceType<T>;

class A { }

const res = factory(A); // A: what we expect

因为

InstanceType

帮我们声明了返回值类型是构造函数的返回值类型。