JavaScript classes vs TypeScript classes

Question

I am new to TypeScript and JavaScript classes!

I was learning TypeScript where I created something as simple as this

class User {
  name: string;
  email: string;

  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }
}

let newUser = new User("Rohit Bhatia", "[email protected]");

and this was given to me as equivalence

var User = /** @class */ (function () {
    function User(name, email) {
        this.name = name;
        this.email = email;
    }
    return User;
}());
var newUser = new User("Rohit Bhatia", "[email protected]");

Now, I have three questions

what is @class (or @ in general in JavaScript)? var User = /** @class */ (function () {
classes are in JavaScript as well? So why doesn't TypeScript transform them into JS classes?
in TS class we can do something like this

class User { name: string; email: string;

but can't we do something like this in JavaScript? Or what is the difference between JS classes and TS classes?

Classes weren't added to JS until the ES2015 version of the spec - the code outputted by the TypeScript compiler is functionally identical to a JS class (as JS classes are just syntax sugar for functions), but will work on browsers that do not support them. If you set the TypeScript compiler to output ES2015 code via the target option, I believe the class will be output as a proper JS class. — Joe Clay
– Joe Clay, Commented Feb 23, 2019 at 12:12

Paolo · Accepted Answer · 2022-02-19 00:35:17Z

6

Answering your questions:

@class is a kind of annotation/comment that nothing as to do with the standard.
In ES5 (let's say "classic JavaScript") there are no classes, but there is a way to simulate their behaviour, also when TypeScript code is transpiled to ES5. That way to code "classes" (remember that they aren't there) is a bit harder compared to new specifications.
See answer 2 too. Also:

Since the modern JavaScript ECMAScript 6 specification (ES6), now JavaScript has classes. TypeScript is a kind of evolution of ES6. In ES6, it would be like this:

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
}

var newUser = new User('Rohit Bhatia', '[email protected]');

edited Feb 19, 2022 at 0:35

Paolo

21.4k21 gold badges78 silver badges124 bronze badges

answered Feb 23, 2019 at 12:20

José Antonio Postigo

3,02430 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paolo · Accepted Answer · 2022-02-19 00:36:09Z

6

/** @class */ is just a comment
TypeScript's default target is ES5 so it transpiles to JS code that can execute on browsers as old as IE11. If you set ES6 as target, you'll notice that JS classes will be used
ES5 way for writing classes is to use a function as a constructor, but the result when executing the code is exactly the same as ES6 classes

edited Feb 19, 2022 at 0:36

Paolo

21.4k21 gold badges78 silver badges124 bronze badges

answered Feb 23, 2019 at 12:16

Guerric P

32k6 gold badges61 silver badges109 bronze badges

2 Comments

Goran_Ilic_Ilke Over a year ago

So,conclusion,classes in ts === classes in js?

Guerric P Over a year ago

Yes, or constructor function if ES5 is set as transpilation target

Paolo · Accepted Answer · 2022-02-19 00:39:08Z

1

I'm answering to complete the third question.

In ECMAScript standard, what is between /* and */ is just a comment, but it's possible that TypeScript transpiler or debugger use this annotations for something more.
As said in the other answers, by default TypeScript transpile for ECMAScript 5 (ES5), for better compatibility with old browsers, and that it's a way to do something like class in ES5.
The ES6 classes are similar to TypeScript classes, but TypeScript also has public/protected/private modifiers, that there aren't in ES6 classes. Also, in TypeScript you will have advantages by the stronger typing, which includes even better autocomplete in some editors (like Visual Studio Code, of course it depends of the editor).

edited Feb 19, 2022 at 0:39

Paolo

21.4k21 gold badges78 silver badges124 bronze badges

answered Jan 8, 2021 at 18:30

felipeaf

4144 silver badges11 bronze badges

Collectives™ on Stack Overflow

JavaScript classes vs TypeScript classes

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related