Type-lessクラスでvar-less変数が意味することは何ですか？

Question

Angular2でコンポーネントクラスを作成するとき。なぜvarが必要なのですか？新しい変数を宣言するとき？例：

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

どうして代わりにvar title = 'My title';が来ないのですか？ AppComponentオブジェクト型のインスタンス変数を設定するための活字体（および提案ES2015）速記砂糖だ

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' 
    }; 
} 

Answer 1

：

編集：私は、元のコードは次のように見えたthisを、読んでいたとき、私の元の質問が来ます。それらはJavaScript内の実際のスコープ付き変数とは異なります。

現在、この機能はES2015の提案段階にあります。しかし、TypeScriptはESの厳密なスーパーセットである独自の言語であるため、提案されているESnext標準のほとんどすべてを実装しています。 Babelでこれを使用する際の注意点は、ステージ1プラグインを含める必要があることです（または、この特定のES命題を含む別のトランスバータを使用する必要があります）。しかし、これは単なる提案なので、TypeScript以外の標準ではありません。

は、この例のvanilla JavaScript counterpartはに変換：

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);

注：Angular2は伝統的に活字体を使用しているので、それはあなたがの賛成で活字体を使用することを選択した場合online transpiler便利を持っていると便利です代替案。