typescript - Typescript 和 ES6 中的类定义混淆

Question

全部:

我对 ES6 和 typescript 还很陌生，目前正在同时学习这两者。

当我来到类定义部分时，有一个问题:

在类声明中它们之间是否有主要语法:

我发现的是:

在 ES6 中，只能声明方法，不能声明成员:

class Greeter {
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

在 TypeScript 中，它也允许声明成员变量:

class Greeter {
    // although it declare a variable "greeting" here, but I am not sure if it allows assignment initialization
    greeting: string; 
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

我不确定这是否是主要的语法差异(加上访问修饰符，有一个关于修饰符的相关问题:我读到 ES6 类不能定义静态成员，那么允许定义静态方法有什么意义？)他们之间？

如果不止于此，还需要注意什么？

谢谢

Answer 1

我认为这里发生了两件事，首先，Typescript 的预期“类型删除”含义:

typescript

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

将转换为 es6

class Greeter {
  constructor(message) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

这是有道理的，因为 TypeScript 类型是要被删除的，并且可以公平地假设“问候语:字符串”只是类型信息。

作为在类级别声明属性类型的自然扩展，TypeScript 允许初始化属性，这是 ES6 所不允许的(需要在构造函数中定义/初始化这些属性)。

所以，这是 typescript

class Greeter {
  greeting = "stranger";
  constructor(message: string) {
    this.greeting = message || this.greeting;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

这将被转译为 es6:

class Greeter {
  constructor(message) {
    this.greeting = "stranger";
    this.greeting = message || this.greeting;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

不确定为什么 es6 不允许类定义中的属性，但从 TypeScript 的角度来看，允许在类级别定义类型并在构造函数中初始化是非常奇怪的。

希望这能澄清事情。