Class definition confuse in Typescript and ES6

Question

All:

I am pretty new to ES6 and typescript and currently study both side by side.

When I come to Class definition part, there is one question:

Is there a major syntax between them in class declaration:

What I find out is:

In ES6, there is only method can be declared but no member :

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

While in TypeScript, it allows to declare the member variable as well:

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;
    }
}

I am not sure if this is the major syntax diff(plus access modifier, there is one related question about modifier: I read that ES6 class can not define static member, then what is the point to allow define static method?) between them?

If more than this, what else need to pay attention?

Thanks

Answer 1

I think there are two things happening here, first, the expected "type erasure" of Typescript meaning:

Typescript

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

will transpile to es6

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

Which makes sense since TypeScript types are meant to be erased, and it is fair to assume that the "greeting: string" was just type information.

As a natural extension of declaring property type at the class level, TypeScript allows to initialize properties, which is something ES6 does not (requires to define/initialize those properties in the constructor).

So, this in typescript

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

which will get transpiled to es6:

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

Not sure why es6 did not allow properties in the class definition, but from a TypeScript perspective it would have been very odd allow type definition in at the class level, and initialize in the constructor.

Hope this clarifies things.

Answer 2

You can indeed add an assignment to property declarations, and those assignments basically occur right before other operations you've written in the constructor body.

class Greeter {
    greeting = "world!";

    constructor() {
    }

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

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

The flip side is you'll get an error if you use anything that's scoped in the constructor body:

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

TypeScript allows static property declarations as well:

class Greeter {
    private static instancesCreated = 0;

    static getNumInstancesCreated() {
        return Greeter.instancesCreated;
    }

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

though that doesn't mean that a static method is not useful on its own. ES6 doesn't have instance property declarations, but instance methods are still useful because you can just tack a property onto the instance.

For more information, I encourage you to read up about classes in TypeScript on the TypeScript handbook as well as in TypeScript Deep Dive.