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.

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

Ответ 1

Недействительный код typescript. Вы не можете иметь вызовы методов в теле класса.

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

Вместо этого переместите вызов setTimeout в конструкторе класса.

export class AppComponent {
  public n: number = 1;

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

}

Также в typescript вы можете ссылаться на свойства или методы класса только с помощью этого.

Ответ 2

Вы должны поместить свою обработку в конструктор класса или метод подключения OnInit.

Ответ 3

Вы можете обратиться по ссылке ниже, чтобы определить функцию в TypeScript. Это будет полезно для продолжения без каких-либо ошибок.

https://www.typescriptlang.org/docs/handbook/functions.html