Angularのチュートリアル(tour of heros)でコンパイルエラーの根本原因が分からない

Question

前提・実現したいこと

当方JavaScript初学者です。

Angularを最近知り、チュートリアルを始めようとしたのですが、セクション１の『ヒーローオブジェクトを表示する』の段階でエラーが発生してしまい手詰まりになってしまっています。
(一番初めのヒーローの名前単体をことはできたのですが、リスト形式で出力させようとするとエラーになってしまいます)
どこがエラーの原因なのでしょうか。

チュートリアル：
https://angular.jp/tutorial/toh-pt1
https://codelab.website/angular4-tutorial-2/

発生している問題・エラーメッセージ

Error: src/app/hero.ts:2:3 - error TS2564: Property 'id' has no initializer and is not definitely assigned in the constructor.

2   id: number;
    ~~


Error: src/app/hero.ts:3:3 - error TS2564: Property 'name' has no initializer and is not definitely assigned in the constructor.

3   name: string;

該当のソースコード

フォルダ：/app/heros
heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

heros.component.html

<h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

フォルダ：/app
hero.ts

export class Hero {
  id: number;
  name: string;
}

app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>

試したこと

エラーの文面からして変数を初期化できていないことが原因な気はするのですが、どの部分で対処、修正すればいいのかが分からない状況です。

申し訳ありませんがご協力をお願いいたします。

補足情報（FW/ツールのバージョンなど）

Node.js 14.17.5LTS
angular 12.2.3
npm 6.14.14

Answer 1

チュートリアルではClassではなくinterfaceになっているようです。

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

Classでダメな理由は説明できませんが。

Comments

[hamu_tukareta]

ありがとうございます。１つ目のリンクでは interface になっていて、2つ目のリンクでは class となっていおり、そちら(2つ目)を真似てしまったために発生していたエラーでした