为什么Angular2 Component属性没有显示在我的页面中？

Question

This is my code:

import {Component} from "@angular/core";

@Component({
  selector: 'my-app',
  template: `
      <h1>{{title}}</h1>
      <h2>{{secondTitle}}</h2>
      <main-page></main-page>
     `
})

export class AppComponent {
  title = 'Lovely Jubbly';
  secondTitle: 'Bummer...'
}

title 'Lovely Jubbly' appears on my site, but secondTitle 'Bummer...' doesn't show. Only difference is how I initialized those variables. I'm TypeScript and Angular2 noob so it might be an obvious mistake. Could anyone direct me to some docs that could explain this behaviour?

Answer 1

TypeScript is interpreting Bummer... as a type (eg, a string that can only be "Bummer..." ). When it becomes JavaScript, it will still be initialized to null.

If you're wondering, those types can be useful for certain enum-like variables. eg:

var trafficLightState:'RED' | 'GREEN' | 'YELLOW' = 'RED';
trafficLightState = 'Melon'; // ERROR!