2

When creating a component class in Angular2. Why don't we need var? when declaring a new variable? eg:

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    `
})
export class AppComponent {
  title = 'My title';
}

How come it is not var title = 'My title'; instead?

EDIT: My original question comes when I was reading this, where the original code looked like:

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
davidx1
  • 3,525
  • 9
  • 38
  • 65
  • If you've seen an example using this, there *may* have been minimal scopes involved. It's best practice to use `var` or in your case `const` & `let` to define your variables, unless you're overwriting an existing variable. – Seth Jul 07 '16 at 02:14
  • @Seth Hmm... because I'm just looking through angular 2's documentations [here](https://angular.io/docs/ts/latest/quickstart.html) and they've never used the '`var`' tag under `export class` :/ – davidx1 Jul 07 '16 at 02:25
  • Oh sorry, didn't notice that was a class. I'll elaborate below – Seth Jul 07 '16 at 02:30
  • That's not an ES2015 class. See also [here](http://stackoverflow.com/q/35468538/1048572) – Bergi Jul 07 '16 at 03:09
  • @Bergi It is Typescript right? I think someone edited my original title.. – davidx1 Jul 07 '16 at 03:17
  • That is an ES2015 class if using the proposed spec through the stage-1 plugin that babel provides. Check this out https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-1%2Cstage-2&code=class%20AppComponent%20%7B%0A%20%20title%20%3D%20'My%20title'%3B%0A%7D – Seth Jul 07 '16 at 03:20

1 Answers1

1

That's a TypeScript (and proposed ES2015) shorthand sugar for setting instance variables for the AppComponent object type. Those differ from an actual scoped variable within JavaScript.

Currently this feature is in the proposal stage for ES2015. However since TypeScript is its own language, which is a strict superset of ES, it implements most all of the proposed ESnext standards. The caveat to using this with Babel is that you're required to include the stage-1 plugin (or use a different transpiler that includes this specific ES proposition). But since this is just that, a proposal, it's not standard outside of TypeScript.

This example's vanilla JavaScript counterpart translates to: 

function AppComponent() {
  this.title = 'Tour of Heroes';
  this.hero = 'Windstorm';
}

var appComponent = new AppComponent();
console.log(appComponent);
console.log(appComponent.title);
console.log(appComponent.hero);

Note: Since Angular2 traditionally uses TypeScript, it's helpful to have an online transpiler handy if you choose to use TypeScript in favor of the alternatives.

Seth
  • 10,198
  • 10
  • 45
  • 68
  • So it's typescript, not ES6? – Bergi Jul 07 '16 at 03:08
  • 1
    I think I understand what you're alluding to. Currently it's typescript-only unless you use the `stage-1` plugin with babel (or a different transpiler that includes current ES propositions). But since this is just that, a proposal, it's not standard outside of TypeScript. But the TypeScript language implements most of the proposed ESnext standards. – Seth Jul 07 '16 at 03:17
  • Yes, please emphasise that in your answer. I can also reopen the question if you want – Bergi Jul 07 '16 at 03:34
  • Yes please, If you don't mind. I just cast a nomination to do so. – Seth Jul 07 '16 at 11:38