🐣

Angularの公式チュートリアルをやっていく　その５ - Create an interface

2023/06/11に公開

Angular

Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。

今回やるのは、↓の部分です。

新しい Angular インターフェースを作成

インターフェイスはTypeScriptで使える型定義機能のひとつです。
インターフェイスなど使った強力な型チェックを利用できることがTypeScriptの大きな魅力ですね。

下記のコマンドでインターフェイスを新規の作成します。
Angularではコマンドでインターフェイスも作れるんですね！

ng generate interface housinglocation

実行結果

CREATE src/app/housinglocation.ts (37 bytes)

appフォルダ直下にhousinglocation.tsというファイルが追加されていますね。

housinglocation.tsに記述されているHousinglocationインターフェイスはまだ空の状態です。

housinglocation.ts

export interface Housinglocation {
}

アプリケーションを一度ビルドして、生成に不具合がないか確かめます。

ng serve

問題なくブラウザが表示されたので、インターフェイスの生成は正常に行われたようです。
ここで上手くビルドできずエラーとなってしまったら、Housinglocationインターフェイスの生成が上手くいっていない可能性がありますので、一度生成されたファイルを消して再度生成するか、エラー文を読んで対処しましょう。

新しいインターフェースへプロパティを追加

空のインターフェイスに実装を追加します。

下記のようにhousinglocation.tsを更新します。

housinglocation.ts

 export interface Housinglocation {
+  id: number;
+  name: string;
+  city: string;
+  state: string;
+  photo: string;
+  availableUnits: number;
+  wifi: boolean;
+  laundry: boolean;
 }

更新後に保存してもエラーは出ず、アプリケーションは正常に動作しているため、特に問題はなさそうです。

アプリケーションにテスト用のhouseを作成

home.component.tsに先ほど作成したHousinglocationインターフェイスをインポートして、新しいhouseデータを作成しましょう。
まだこの段階ではデータをclass場に作成するだけで、画面には特に変化はないようです。

下記のようにhome.component.tsを更新します。

home.component.ts

  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { HousingLocationComponent } from '../housing-location/housing-location.component';
+ import { HousingLocation } from '../housinglocation';
  
  @Component({
    selector: 'app-home',
    standalone: true,
    imports: [CommonModule, HousingLocationComponent],
    template: `
      <section>
        <form>
          <input type="text" placeholder="Filter by city" />
          <button class="primary" type="button">Search</button>
        </form>
      </section>
      <section class="results">
        <app-housing-location></app-housing-location>
      </section>
    `,
    styleUrls: ['./home.component.css'],
  })
- export class HomeComponent {}
+ export class HomeComponent {
+   housingLocation: HousingLocation = {
+     id: 9999,
+     name: 'Test Home',
+     city: 'Test city',
+     state: 'ST',
+     photo: 'assets/example-house.jpg',
+     availableUnits: 99,
+     wifi: true,
+     laundry: false,
+   };
  }

おや、下記の部分でエラーが起こっていますね。

home.component.ts

+ import { HousingLocation } from '../housinglocation';

どうやら、自動生成されたインターフェイス名Housinglocationの文字'l(エル)'が小文字であった為エラーが起こっているようです。

このインポートで呼び出そうとしているエルは大文字ですね。

今回はhousinglocation.tsファイルのインターフェス名のエルを大文字にすることで対処します。

housinglocation.ts

- export interface Housinglocation {
+ export interface HousingLocation {

エラーが消えました！

更新後に保存してもエラーは出ず、アプリケーションは正常に動作しているため、特に問題はなさそうですね。

これにてCreate an interfaceは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その４ - Create housing location component
→　次へ　Angularの公式チュートリアルをやっていく　その６ - Add inputs to components

新しい Angular インターフェースを作成

新しいインターフェースへプロパティを追加

アプリケーションにテスト用のhouseを作成

Discussion