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

Jeremy Chone · Accepted Answer · 2017-09-09 01:59:25Z

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.

Daniel Rosenwasser · Accepted Answer · 2016-02-04 21:42:24Z

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.

answered Feb 4, 2016 at 21:42

Daniel Rosenwasser

24.2k14 gold badges54 silver badges66 bronze badges

8 Comments

kuanslove Over a year ago

Thanks, is the first and second code section are in TypeScript or ES6? Cos when I compile it with babel as ES2015, it give me error at greeting = "world"; line, which says Unexpected token.

kuanslove Over a year ago

Thanks, I guess one of my question is if we can not define static variable in ES6, why ES6 allow define static method?

Daniel Rosenwasser Over a year ago

As mentioned above, static properties are just properties that you can assign to in static methods or after the class itself is defined, the same way you would create an instance property in a constructor or regular method.

loganfsmyth Over a year ago

@DanielRosenwasser This code is valid if you are using the proposed experimental class properties syntax, but it is not valid ES6.

Daniel Rosenwasser Over a year ago

Okay, but my understanding is that the question was about TypeScript, and whether you can add an assignment to a property declaration.

|

Collectives™ on Stack Overflow

Class definition confuse in Typescript and ES6

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related