Typescript 中这段代码的意义何在？答案

【问题标题】：What's the point of this section of code in Typescript?Typescript 中这段代码的意义何在？
【发布时间】：2016-01-12 22:12:36
【问题描述】：

我正在阅读 Typescript 手册，我注意到（对我而言）毫无意义的代码部分。有人能解释一下这样做的目的吗？

取自docs：

class Greeter {
    static standardGreeting = "Hello, there";
    greeting: string;
    greet() {
        if (this.greeting) {
            return "Hello, " + this.greeting;
        }
        else {
            return Greeter.standardGreeting;
        }
    }
}

var greeter1: Greeter;
greeter1 = new Greeter();
alert(greeter1.greet());

var greeterMaker: typeof Greeter = Greeter; // This line
greeterMaker.standardGreeting = "Hey there!"; // This line
var greeter2:Greeter = new greeterMaker(); // And this line
alert(greeter2.greet());

所以，文档所说的是var greeterMaker: typeof Greeter = Greeter“将持有该类本身。”我也不完全确定这意味着什么

然后它会这样做：

greeterMaker.standardGreeting = "Hey there!";

// Which does the exact same thing as this:
Greeter.standardGreeting = "Hey there!";

我在这里错过了什么？

【问题讨论】：

我认为您没有遗漏任何东西。它们在变量中保存对类的引用。他们使用该变量来修改类。这只是间接的。在这种情况下，可以通过 Greeter.standardGreeting = "Hey there!"; 来避免这种情况，但想象一下将类传递给一些不知道它的模块，你就会明白这一点。

标签： javascript typescript ecmascript-6

【解决方案1】：

这部分文档似乎试图解释Greeting 类型和typeof Greeting 类型之间的区别。

要理解这两件事，您首先必须了解 TypeScript 类是结合了 (1) 构造函数和 (2) 描述由该构造函数生成的实例的接口的语法糖。

所以，当你看到这个时：

class Greeter {
    static standardGreeting = "Hello, there";
    greeting: string;
    greet() {
        // ... code ...
    }
}

你实际上在做的是定义一些东西，用手写的方式写出来，看起来更像这样：

interface Greeter {
  greet(): void;
}

var Greeter: {
  new(): Greeter;
  prototype: Greeter;
  standardGreeting: string;
};

Greeter = function () {};
Greeter.prototype.greet = function () {
  // ...code...
};

换句话说，您已经编写了一个描述 Greeter 实例的接口 Greeter，以及一个描述构造函数的变量 Greeter 上的第二个 anonymous 类型。（这是因为类型存在于单独的并行命名空间中，不会与生成的代码中的变量名冲突。）

使用Greeter 接口类型很明显——只要写Greeter——但是如何访问这个附加到Greeter 变量的匿名类型呢？答案是typeof 类型修饰符。写typeof Greeter 表示“使用变量 Getter 的类型”，这让我们可以访问分配给包含构造函数的变量Greeter 的匿名类型。

这就是文档试图解释的内容。希望这个解释更清楚，我们现在可以理解这部分代码：

// This creates an alias called `greeterMaker` to the
// Greeter constructor function
// (functions are objects, and objects are always handled
// by-reference in JavaScript)
var greeterMaker: typeof Greeter = Greeter;

// This modifies the `standardGreeting` property of the
// function through the alias
greeterMaker.standardGreeting = "Hey there!";

// This invokes the constructor function through the alias,
// constructing a new instance of a Greeter
var greeter2:Greeter = new greeterMaker(); // And this line

【讨论】：

【解决方案2】：

这是在 TS 的打字系统中工作以获取对该类的引用，而无需将 greeterMaker 直接声明为持有一个类（我想 foo: class 可能是不允许的）。

理论上，即使右侧的值不是Greeter，而是具有相似语义和相同公共静态字段的其他类，这也将起作用。它可以让您动态提供不同的类并使用它，但在本示例中，它并不是特别有用。

【讨论】：

【解决方案3】：

如果您运行代码，您将看到“Hello, there”应该显示在警报框中。紧随其后的是“嘿！”。

在类 Greeter 中不能更改静态变量，除非创建一个新的 on 作为 Typeof。

如果您尝试添加行 greeter.standardGreeting = "你好！";

会出错。

【讨论】：