While working with the "Tour of Heroes" tutorial on the Angular website I found the following syntax (shortly):

class Hero {
  id: number,
  name: string,
}

const aHero: Hero = {
  id: 1,
  name: 'Superman'
}

console.log(aHero instanceof Hero); //false

What would be the point in doing this? when if I check the type of "aHero", it is only a common object and not a "Hero" type. Would it be better just initializing an object with a constructor?:

class Hero {
  constructor(id: number, name: string) {}
}

While working with the "Tour of Heroes" tutorial on the Angular website I found the following syntax (shortly):

class Hero {
  id: number,
  name: string,
}

const aHero: Hero = {
  id: 1,
  name: 'Superman'
}

console.log(aHero instanceof Hero); //false

What would be the point in doing this? when if I check the type of "aHero", it is only a common object and not a "Hero" type. Would it be better just initializing an object with a constructor?:

class Hero {
  constructor(id: number, name: string) {}
}

• javascript
• angular
• class
• typescript
• constructor

• 21 Good question. The answer is the tutorial promotes a bad practice. Hero should be an interface. – Aluan Haddad Commented Dec 27, 2017 at 17:41
• 5 Todd Motto has a great article explaining the difference and when/why to use interface vs class – mhodges Commented Dec 27, 2017 at 17:43
• can you add a reference to the section with this code? – Max Koretskyi Commented Dec 27, 2017 at 18:20
• 3 IMO this is a really bad example for newcomers, already reported on github github.com/angular/angular/issues/21186 – Jota.Toledo Commented Dec 27, 2017 at 18:24
• 2 good spot! that's a bad practice - one should be using interfaces in those cases. – tlt Commented Dec 27, 2017 at 19:01

2 Answers 2

You can use class as a type which is the way you're using it. So, whether Hero is an interface or class it doesn't matter because you're using it as a type.

class Hero { id: number; name: string }

or

interface Hero { id: number; name: string }

The following doesn't concern whether Hero is a class or interface

let hero: Hero = { id: 1, name: 'me' }

Where interface and class differentiate is interface is only for you, it doesn't get transpiled into javascript. A class does and you cannot new an interface.

Constructor or no Constructor, if you new it then it is an instanceof. Try it again with this

let hero = new Hero();

Your instanceof log will be true because you did create an instance of Hero with the key word new.

I know this question has been answered before but as far as object oriented code goes it was always like this.

I believe you can do this without a constructor:

let hero: Hero = { ID: 1, Name: 'goku'};

but if you want to instantiate with the constructor you can do this in the class

class Hero
{
    //notice optional parameters. You have more flexibility this way.
    constructor(id?: number, name?: string)
    {  
      this.ID = id;
      this.Name = name;
    }

    ID: number;
    Name: string
}

And do this with the implementation

let hero: Hero = new Hero(1,'goku');
let hero2: Hero = { ID: 2, Name: 'superman' }