javascript - Typescript 中这段代码的意义何在?

标签 javascript typescript ecmascript-6

我正在阅读 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!";

我在这里错过了什么?

最佳答案

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

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

所以,当你看到这个时:

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 实例的接口(interface) Greeter,以及变量 Greeter 上的第二个匿名 类型描述了构造函数。 (这是有效的,因为类型存在于一个单独的并行命名空间中,该命名空间与生成的代码中的变量名称不冲突。)

使用 Greeter 接口(interface)类型是很明显的——只需编写 Greeter——但是如何访问附加到 Greeter 变量的匿名类型?答案是 typeof 类型修饰符。编写 typeof Greeter 表示“使用 variable 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

关于javascript - Typescript 中这段代码的意义何在?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34754727/

相关文章:

javascript - 在 DraftJS 中设置自定义类型

typescript - VSCode 中的 Nativescript 共享模式总是用错误 "experimental support for decorators..."错误标记类

即使在 .filter 函数删除 undefined 之后, typescript 类型 ( string | undefined ) 也不能分配给 string[] 类型

function - 具有多个调用签名的 TypeScript 接口(interface)

javascript - 如何将变量从 JavaScript 传递到 HTML?

javascript - 使用 for 循环将 javascript 变量插入 json 编码的 php 变量

javascript - 尝试使用 Ajax 和 PHP 将 JSON 数据写入 txt 文件

javascript - 现在移动应用程序使用原生 ES6 安全吗?

javascript删除对象数组的多个值

javascript - es6 map 的替代方案