title: TypeScript : Colon vs Equal To ( Angular Tutorial )
body: <p>I am learning Angular4 and going through the tutorial examples. </p>
  
  <p><a href="https://angular.io/docs/ts/latest/tutorial/toh-pt1.html" rel="noreferrer">https://angular.io/docs/ts/latest/tutorial/toh-pt1.html</a></p>
  
  <p>I have the below code in the tutorial.</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `&lt;h1&gt;{{title}}&lt;/h1&gt;&lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;`
  })
  export class AppComponent { 
      title = 'Tour of Heroes'; // *1
        hero: Hero = {
        id: 1,
        name: 'Windstorm'
      };
    }
  
  export class Hero {
    id: number; // *2
    name: string;
  }
  </code></pre>
  
  <p>In the code 2 classes are defined, AppComponent and Hero. I am not able to understand why for member declaration of a class, AppComponent follows the style <strong>property = value</strong> while class Hero uses style <strong><em>property : value</em></strong> </p>
  
  <p>If I change the class AppComponent to the below, the code doesn't work as expected.</p>
  
  <pre><code>export class AppComponent { 
      title : 'Tour of Heroes', 
        hero: Hero : {
        id: 1,
        name: 'Windstorm'
      };
    }
  </code></pre>
  
  <p>I would like to know whats the difference between using <code>:</code> and using <code>=</code> and when what should be used ?</p>