Question

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

Answer 1

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

目前此功能处于ES2015的提案阶段。但是，由于TypeScript是它自己的语言，它是ES的严格超集，它实现了大多数提议的ESnext标准。将此与Babel一起使用的警告是，您需要包含stage-1插件（或使用包含此特定ES命题的不同转换器）。但由于这只是一个提案，它在TypeScript之外并不是标准的。

此示例的vanilla JavaScript counterpart转换为：

＆＃13;

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

＆＃13;

注意：由于Angular2传统上使用TypeScript，如果您选择使用TypeScript支持替代方案，那么有online transpiler方便有用。

What do var-less variables mean within TypeScript classes?

1 个答案: