なぜ両方とも同じ結果を表示できないのですか？我々はのConstを削除する場合は、リンク1で

Question

Link

Link

は、プログラムが文句を言わない実行します。どうして？
リンク2のリンク1の配列実装を使用する場合、またはその逆の場合も同様です。 それは動作しません。
これは機能します。 両方の実装の違いは何ですか？

Answer 1

リンク＃1は、変数としてHEROESを定義します。型宣言の変数宣言は、(var|let|const)で始まります。情報はhttps://www.typescriptlang.org/docs/handbook/variable-declarations.htmlです。 "const"宣言を削除すると、タイプスクリプトの定義が無効になります。したがって、コンソールの「予期しないトークン」のエラーです。

リンク＃2は、プロパティとしてheroesを定義します。接頭辞の宣言がなければ、このプロパティはデフォルトで公開されています。 あなたは以下の文を明確にしてくださいすることができ：ここでは、クラスとtypescriptですhttps://www.typescriptlang.org/docs/handbook/classes.html

のプロパティの更新についての情報があります。

また、リンク2のリンク実装を使用している場合、またはその逆の場合は の逆もあります。 これは動作しません

リンク＃1の配列宣言スタイルは、リンク＃2の例で動作します。同様に：

import { Component } from '@angular/core'; 

import { Hero } from './hero'; 

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 favorite hero is: {{myHero.name}}</h2> 
    <p>Heroes:</p> 
    <ul> 
    <li *ngFor="let hero of heroes"> 
     {{ hero.name }} 
     </li> 
    </ul> 
    <p *ngIf="heroes.length > 3">There are many heroes!</p> 
` 
}) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
    heroes = HEROES; 
    myHero = this.heroes[0]; 
} 

Answer 2

私はあなたの2番目の質問に答えることができます。最初のリンクでは、Heroクラスの内部にコンストラクタはありません。 2番目のリンクのような配列を作成すると、オブジェクトが作成されますが、値は初期化されません。しかし、2番目のリンクで最初のリンク配列の作成を使用するとうまくいきます。

最初の質問では、クラス外で宣言しているので、varまたはconstのいずれかの変数型を指定するか、ローカル変数として動作させる必要があります。