Angular2 - TypeScript: увеличение числа после таймаута в AppComponent

Я хочу создать простое приложение Angular2, используя TypeScript. Кажется, довольно просто, но я не могу достичь того, что хотел.

Я хочу показать значение свойства в шаблоне. И я хочу обновить то же самое через 1 секунду, используя setTimeout.

Код Plunkr здесь: Код на Plunkr

Я написал здесь:

import {Component} from 'angular2/core';

interface Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template:`<h1>Number Increment</h1><p>{{n}}</p>`
})
export class AppComponent {
  public n : number = 1;
  setTimeout(function() {
    n = n + 10;
  }, 1000);
}    

Когда я использую этот код, я получаю следующую ошибку:

Uncaught SyntaxError: Unexpected token ;

Почему я не могу получить доступ к n, который находится в той же области, что мы делали в JavaScript. Если я не ошибаюсь, мы можем использовать чистый JavaScript тоже в TypeScript.

Я даже пробовал

export class AppComponent {
  public n : number = 1;
  console.log(n);
}

Но я не могу видеть значение n в консоли.

Когда я попробовал

export class AppComponent {
  public n : number = 1;
  console.log(this);
}

Я получаю ту же ошибку, что и выше. Почему мы не можем получить доступ к этому в этом месте. Я думаю, this относится к текущему контексту, как в JavaScript.

Спасибо заранее.

Ответы

export class AppComponent {
  public n: number = 1;
  setTimeout(function() {
    n = n + 10;
  }, 1000);
}

export class AppComponent {
  public n: number = 1;

  constructor() {
    setTimeout(() => {
      this.n = this.n + 10;
    }, 1000);
  }

}