Что происходит внутри этого метода подписки в Angular Tour of Heroes?

Question

Мне не удалось решить, что происходит внутри этого .subscribe метода.

 getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }

Я всегда думал, что this.heroes = heroes присваивается heroes:Hero[] внутри компонента героев. Ну, получается, что это не так. Если я изменю heroes:Hero[] на heroes:boolean или даже полностью удалю heroes:Hero[] из компонента героев, мои герои все равно будут отображаться. И this.heroes все еще получает назначение.

Может кто-нибудь объяснить, как это происходит?

Вот живой пример

Попробуйте сделать то, что я упомянул, и удалите heroes:Hero[] и обратите внимание, как по-прежнему отображаются герои. Если this.heroes = heroes не присваивается heroes:Hero[], то что происходит именно внутри метода подписки?

Answer 1

Когда вы удаляете heroes: Hero[];, он все равно будет отображаться, потому что все это компилируется в JavaScript из TypeScript.

Чтобы легко визуализировать это в более простом примере, это будет очень похоже на следующее, добавлениек объекту, не назначая его сначала.

var exampleObj = {};

exampleObj.heroes = 'batman';

console.log(exampleObj);

Это нормально в JavaScript, и поэтому ваш список по-прежнему отображается, однако это недопустимый TypeScript и приведет к ошибкам компиляции.

Если я поменяю heroes: Hero [] на heroes: boolean или даже если я полностью удалю heroes: Hero [] из компонента heroes, мои герои все равно будут отображаться.И this.heroes по-прежнему получает назначение.

Таким образом, это означает, что он отображается, потому что он добавляется в класс, как только вы определите его из подписки.

Valid JavaScript, Yes.

Действительный TypeScript, №

---

Эта документация может помочь выделить некоторые различия

Answer 2

Я всегда думал, что this.heroes = герои назначаются героям: Hero [] внутри компонента героев

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

Answer 3

Здесь this.heroes = heroes, где this.heores - пустая переменная, назначенная вверху для сохранения данных, получаемых от подписчика (героев).Если вы не присвоили пустую переменную, она выдаст ошибку при использовании this.heores.Ошибка выдаст, как будто 'Свойство' heroes 'не существует для типа' HeroesComponent '

Answer 4

Если вы удаляете свойство heroes при получении данных из сервиса, оно автоматически создает свойство в Javascript и отображает его. Браузер запускает код Javascript, поэтому ошибок нет. Вы будете иметь ошибку времени компиляции TypeScript, если не объявите свойство или тип данных свойства неверен