CODEWITHSUNDEEP
javascriptangularjstypescript
user4641842
user4641842

Reputation: 53

What is the use of the class in typescript

This is app.component.ts of angular tour of hero tutorial

import { Component } from '@angular/core';

export class Hero{
 name : string;
 id : number;
}

const HEROES : Hero[] = [
    {name : 'jhon snow', id : 1},
    {name : 'wiz kahlifa',id : 2},
    {name : 'superman',id : 3},
    {name : 'batman',id : 4},
    {name : 'supersyian', id : 5}
];

I was wondering how the class work in type script i checked out app.component.js and saw the following line of code

var Hero = (function () {
 function Hero() {
 }
 return Hero;
}());
exports.Hero = Hero;
var HEROES = [
 { name: 'jhon snow', id: 1 },
 { name: 'wiz kahlifa', id: 2 },
 { name: 'superman', id: 3 },
 { name: 'batman', id: 4 },
 { name: 'supersyian', id: 5 }
];

I am not able to understand the use of class as in the app.component.js there is no link between the HEROES array and the Hero class i created in app.component.ts

Upvotes: 2

Views: 337

Answers (2)

Paleo
Paleo

Reputation: 23692

I am not able to understand the use of class as in the app.component.js there is no link between the HEROES array and the Hero class i created in app.component.ts

You're right. It should. I suggest to not focus on the compiled code for old browsers. You could compile for modern JavaScript engine: the keyword class would remain and your question would still remain too.

The following code declares an ES6 class (with TypeScript syntactic sugar):

export class Hero {
  name: string;
  id: number;
}

Then, the only way to instantiate the class is with the new operator:

However, you can only invoke a class via new (source: exploringjs from Dr. Axel Rauschmayer)

The following code is misleading:

const HEROES : Hero[] = [
  {name : 'jhon snow', id : 1},
  {name : 'wiz kahlifa',id : 2},
  // ...
];

It declares an array of type Hero[]. But the constructor is not executed. It is filled with objects that are not instances of the class.

Valid ways

With an interface:

export interface Hero {
  name: string;
  id: number;
}
const HEROES : Hero[] = [
  {name : 'jhon snow', id : 1},
  {name : 'wiz kahlifa', id : 2},
  // ...
];

With a class:

export class Hero {
  constructor (public name: string, public id: number) {
  }
}
const HEROES : Hero[] = [
  new Hero('jhon snow', 1),
  new Hero('wiz kahlifa', 2),
  // ...
];

Upvotes: 1

camccar
camccar

Reputation: 730

So the Transpiler here is converting the Type script class into javascript 5 or ES5 compatible code. In ES5 you don't use class syntax when defining "classes" you use function syntax. for example

function car() { } //This defines a "class" called car but it doesnt do anything yet

//This defines a function of car that returns the max speed
car.prototype.maxSpeed = function() {
 return "70 MPH";
}

As you can see, there are no types here because javascript is dynamically typed. Nothing needs to be declared yet after the class is declared.

In your example you don't see Name and ID because those are used for compile time error checking in typescript. They wouldn't exist in their javascript transpilled classes.

As for your const heroes. Those are just javascript objects that take the shape your class would take in javascript after it is instantiated.

Upvotes: 0

Related Questions