Why Angular ngFor does not check if the iterable object existing? - angularjs

Question

I am complete new to Angular 2. My understanding of Angular 2 is that it is based on TypeScript which compiles the source code to Javascript. As a compile language, I would expect it is able to catch any undefined variable, but it seems that it is not the case for ngFor. For example, in the following code (I am using VS Code), ngFor is used for iterate object heroes, it does not give me any error if heroes is not defined (when I defined heroes, I got a typo and defined it as heros, last second line):
import { Component } from '#angular/core';
*export class Hero {
id: number;
name: string;
}
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
#Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes" >
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
`
})
export class AppComponent {
name = 'Angular';
title = 'Tour of Heroes';
heros = HEROES;
}*
Could somebody kindly explain to me why? Do I expect too much?

Answer 1

If the property referenced by *ngFor to iterate over is null or undefined, *ngFor just doesn't do anything. You won't get an error for this.
TypeScript is a superset of JavaScript and undefined is a perfectly valid value for a property in JS and TS.
Angular2 for Dart however produces an error for such cases.