typescript - typescript 中的 'static side' 和 'instance side' 到底是什么？

Question

有一个 very similar question ，但是对于文档中提到的静态端和实例端没有直接的答案。

正如我依稀理解的那样，静态端是构造函数，实例端是其他一切？

来自 typescript documentation 的一个例子:

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick(): void;
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

这个例子中的静态端和实例端是什么？为什么需要使用这样的模式？

Answer 1

计算机科学中的命名是出了名的困难。
在 TypeScript 中，我们通常使用同名来指代类的构造函数(它是一个在运行时存在的值)，并作为类的实例的类型(它只在设计时存在，不会发出到JavaScript)。
所以在

class Foo { } 
const foo: Foo = new Foo();

有一个名为 Foo 的类构造函数，它可以用来构造我们称之为 Foo 类型的类实例。
这有点像使用术语“乐高”来指代制造塑料建筑玩具的公司和建筑玩具本身。或者像“Toyota”作为公司名称和他们制造的车辆的名称。我们说“Toyota 制造和销售丰田汽车”或“Lego 制造和销售乐高积木玩具”没有误解，但类似的“ Foo 构造 Foo 实例”可能会令人困惑。就这样吧，我猜。

当我们谈论一个类时，我们可能会谈论它的静态方面，这与构造函数有关(通常是单数，“ 构造函数”，因为只有一个，对所有实例都是一样的)，或者我们可能正在谈论它的实例方面，这与类的实例有关(通常是复数，“实例 s ”，因为单个构造函数可以创建多个实例，每个实例可能具有与其他实例不同的状态或属性) .
从类型系统的角度来看，类型 Foo 对应于实例侧的形状。要获取静态端的类型，我们可以使用 typeof type query operator 对名为 Foo 的构造函数值进行操作: typeof Foo 。所以， Foo 是实例端类型， typeof Foo 是静态端类型。
让我们增加 Foo 来展示它是如何工作的:

class Foo {

  instanceProp: string;

  constructor(constructorArgument: string) {
    this.instanceProp = constructorArgument;
  }

  instanceMethod(): void {
    console.log("Instance method called on " + this.instanceProp)
  }

  static staticProp: string = "Static Thing";

  static staticMethod(): void {
    console.log("Static method called on " + this.staticProp)
  }

}

这是一个单一的类定义，但它有静态端和实例端。 Foo 的静态部分，即与其构造函数有关的内容，包括:

构造函数本身，其签名为 {new(constructorArgument: string): Foo}

staticProp 属性，其类型为 string 和

staticMethod 方法，其签名为 {(): void} 。

这种类型称为 typeof Foo ，但您实际上可以根据需要为其定义自己的接口(interface)，如下所示:

interface StaticSideOfFoo {
  new(constructorArgument: string): Foo;
  staticProp: string;
  staticMethod(): void;
}

Foo 的实例端，即与其实例相关的内容，包括:

instanceProp 属性，其类型为 string 和

instanceMethod 方法，其签名为 {(): void} 。

这种类型称为 Foo ，您也可以为此定义自己的接口(interface):

interface InstanceSideOfFoo {
  instanceProp: string;
  instanceMethod(): void;
}

让我们确保我们了解差异:

const foo1 = new Foo("Number 1");
console.log(foo1.instanceProp); // Number 1
foo1.instanceMethod(); // Instance method called on Number 1

const foo2 = new Foo("Number 2");
console.log(foo2.instanceProp); // Number 2
foo2.instanceMethod(); // Instance method called on Number 2

console.log(Foo.staticProp); // Static Thing
Foo.staticMethod(); // Static method called on Static Thing

请注意， foo1 和 foo2 无法直接访问构造函数签名或 staticProp 或 staticMethod :

new foo1("oops"); // error!
foo1.staticProp; // error!
foo1.staticMethod(); // error!

并且 Foo 不能直接访问 instanceProp 或 instanceMethod :

Foo.instanceProp; // error!
Foo.instanceMethod(); // error!

foo1 和 foo2 的类型为 Foo ，类似于 InstanceSideOfFoo ，而值 Foo 的类型为 typeof Foo ，类似于 StaticSideOfFoo 。我们可以在这里验证:

const instanceSideOfFoo: InstanceSideOfFoo = foo1; // okay
const instanceSideOfFooOops: InstanceSideOfFoo = Foo; // error!

const staticSideOfFoo: StaticSideOfFoo = Foo; // okay
const staticSideOfFooOops: StaticSideOfFoo = foo1; // error!

能够谈论这些不同的方面会有所帮助，因为它们具有不同的形状和不同的用途。如果你想制作一个接受 Foo 构造函数的函数，你想谈论 typeof Foo 或 StaticSideOfFoo 或 new (x: string)=>Foo ，而如果你想制作一个接受 Foo 实例的函数，你想谈论 Foo 或 InstanceSideOfFoo 或 {instanceProp: string} ，等等。
如果没有这样的区别，你最终可能会试图为你的 child 购买乐高公司，或者成为 1997 年丰田凯美瑞的股东。或者也许不是，但是 TypeScript 中的类似错误太容易犯了。我能说什么，命名事情很难。
好的，希望有帮助；祝你好运!
Link to code