Question

所有

我对ES6和打字稿很新，目前并排研究。

当我来到班级定义部分时，有一个问题：

在类声明中它们之间是否有一个主要的语法：

我发现的是：

在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

我认为这里发生了两件事，首先是预期的＆＃34;类型擦除＆＃34; of 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类型是要删除的，并且可以假设＆＃34; greeting：string＆＃34;只是类型信息。

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

所以，这是打字稿

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的角度来看，在类级别允许类型定义并在构造函数中进行初始化会非常奇怪。

希望这能澄清事情。

Answer 2

您确实可以为属性声明添加一个赋值，并且这些赋值基本上恰好在您在构造函数体中编写的其他操作之前发生。

class Greeter {
    greeting = "world!";

    constructor() {
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

console.log(new Greeter().greet()); // Prints "Hello, world!"

另一方面，如果您使用构造函数体中作用域的任何内容，您将收到错误：

class Greeter {
    greeting = message; // Error: 'message' isn't defined here
    constructor(message: string) {
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

TypeScript也允许静态属性声明：

class Greeter {
    private static instancesCreated = 0;

    static getNumInstancesCreated() {
        return Greeter.instancesCreated;
    }

    constructor() {
        Greeter.instancesCreated++;
    }
}

虽然这并不意味着静态方法本身没有用。 ES6没有实例属性声明，但实例方法仍然有用，因为您可以将属性添加到实例上。

有关详细信息，建议您在the TypeScript handbook以及TypeScript Deep Dive中阅读有关TypeScript的课程。

类定义在Typescript和ES6中混淆

2 个答案: