Typescript中这部分代码的重点是什么?

时间:2016-01-12 22:12:37

标签: 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!";

我在这里缺少什么?

3 个答案:

答案 0 :(得分:2)

这部分文档似乎试图解释一种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上的第二个匿名类型。 (这是有效的,因为类型存在于一个单独的并行命名空间中,不会与生成的代码中的变量名冲突。)

使用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

答案 1 :(得分:1)

这在TS的输入系统中工作,以获取对类的引用,而不将greeterMaker声明为直接持有类(我想可能不允许foo: class)。

理论上,即使右边的值不是Greeter,它也会起作用,但是其他类具有相似的语义和相同的公共静态字段。它可以允许您动态提供不同的类并使用它,但在此示例中,并不是特别有用。

答案 2 :(得分:0)

如果你运行代码,你会看到"你好,那里"应显示在警告框中。接下来是"嘿那里!"。

如果不创建新的on作为Typeof,则不能在Greeter类中更改静态变量。

如果您尝试添加行 greeter.standardGreeting ="嘿那里!&#34 ;;

会出错。