TypeScript 类中无 var 的变量是什么意思？

Question

在 Angular2 中创建组件类时。为什么我们不需要var？声明新变量时？例如：

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

怎么不是var title = 'My title';呢？

编辑：当我阅读this 时，我的原始问题出现了，原始代码如下所示：

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

这是一个 TypeScript（和提议的 ES2015）速记糖，用于为 AppComponent 对象类型设置实例变量。这些与 JavaScript 中的实际作用域变量不同。

目前此功能处于 ES2015 的提案阶段。然而，由于 TypeScript 是它自己的语言，它是 ES 的严格超集，它实现了几乎所有提议的 ESnext 标准。使用 Babel 需要注意的是，您需要包含 stage-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 传统上使用 TypeScript，如果您选择使用 TypeScript 来支持替代方案，那么准备好 online transpiler 会很有帮助。