【Angular】interfaceとextends【TypeScript】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はinterfaceとextendsについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

interfaceがわかる
extendsがわかる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
interface
extends
1. 実際にextendsを使ってみよう！
まとめ

作りたいもの

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

interface

interfaceとは、クラス等に対して定義を強制することです。

■構文

interface インターフェイス名 ｛ 強制したいプロパティや関数 ｝

定義を必須とする

interface User ｛ 
    name: string; 
    age: number; 
};

// Userインターフェイスを型として指定
user: User = {
    name: 'サメハック',
    age: 29,
};

とした場合、User型を使用する際には、
name:string型とage:number型の定義が必須となります。

型として実装

// Userインターフェイスを型として指定
user: User = {
    name: 'サメハック',
    age: 29,
};

/*　
------------エラーとなる記述------------------

// プロパティが足りないのでエラー
user: User = { name: 'サメハック' };

// ageはnumber型にする必要があるためエラー
user: User = { name: 'サメハック', age: '29' };

// User型で定義されていないプロパティがあるためエラー
user: User = { name: 'サメハック', age: 29, job: 'プログラミング' };
*/

定義を任意とする

interface User ｛ 
    name: string; 
    age?: number;     
｝

このようにkey名の後に？をつけると、
そのプロパティの定義は任意になります。

定義自体は任意になるけど、
型はnumber型にする必要があるよ！

実際にinterfaceを作ってみよう！

user.ts

touch ./src/app/user.ts

※右クリック等で作成してもOKです。

// 他のファイルからimportできるように、exportをつける
// ※同一ファイルで定義する場合、exportは不要
export interface User {
  name: string;
  // ageの定義は任意とする  ※定義する場合はnumber型
  age?: number;
}

今回はどこからでもインポートできるように
ルートディレクトリにファイルを作成したよ！

interface用コンポーネントの作成

ng generate component interface

interface.component.ts

import { Component, OnInit } from '@angular/core';
// Userインターフェイスをインポート
import { User } from '../user';

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

  ngOnInit(): void {}

  // Userインターフェイスを型として指定
  user1: User = {
    name: 'サメハック',
    age: 29,
  };

  // Userインターフェイスを型として指定
  user2: User = {
    name: 'いぬハック',
    // ageを未定義とする
    // age: 30,
  };

  /*
    ------------エラーとなる記述------------------

    // プロパティが足りないのでエラー
    user3: User = { name: 'サメハック' };

    // ageはnumber型にする必要があるためエラー
    user4: User = { name: 'サメハック', age: '29' };

    // user型で定義されていないプロパティがあるためエラー
    user5: User = { name: 'サメハック', age: 29, job: 'プログラミング' };
  */

  userList = [this.user1, this.user2];
}

interface.component.html

<div *ngFor="let user of userList">
  <p>
    <span> name: {{ user.name }} </span>
    <!-- ageプロパティの定義の有無により、表示を切り替え -->
    <span *ngIf="user.age; else unknownAge">age: {{ user.age }}</span>
    <ng-template #unknownAge><span>年齢不詳</span> </ng-template>
  </p>
</div>

app.component.html

<app-interface></app-interface>

このように、Userというinterfaceを型とした
オブジェクトを表示することができました。

*ngForや*ngIfについて復習したい方はこちらをご参照ください

【Angular】条件分岐をしよう！【*ngIf】

【Angular】ループ処理を作ろう！【*ngFor】

extends

extendsとは、他のinterfaceの定義を継承することです。

■構文

interface インターフェイス名 extends 継承するインターフェイス｛
    追加したいプロパティや関数 
｝

interface WorkingUser extends User ｛ 
    job: string 
｝

とした場合、WorkingUser型を使用する際には、
Userインターフェイスから継承したnameとageに加え、jobの定義が必須となります。

実際にextendsを使ってみよう！

working-user.ts

touch ./src/app/working-user.ts

※右クリック等で作成してもOKです。

import { User } from './user';
// Userインターフェイスの定義を継承し、固有の定義を追加する
export interface WorkingUser extends User {
  // 定義を追加
  job: string;

  // 以下はUserインターフェイスの定義を継承する
  // name: string;
  // age?: number;
}

Userインターフェイスのnameとageに加えてjobの指定を定義したよ！

extends用コンポーネントの作成

ng generate component extends

extends.component.ts

import { Component, OnInit } from '@angular/core';
// WorkingUserインターフェイスをインポート
import { WorkingUser } from '../working-user';

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

  ngOnInit(): void {}

  // WorkingUserインターフェイスを型として指定
  workingUser1: WorkingUser = {
    name: 'サメハック',
    age: 29,
    job: 'エンジニア',
  };

  // WorkingUserインターフェイスを型として指定
  workingUser2: WorkingUser = {
    name: 'いぬハック',
    job: '不動産',
  };

  workingUserList = [this.workingUser1, this.workingUser2];
}

extends.component.html

<div *ngFor="let user of workingUserList">
  <p>
    <span> name: {{ user.name }} </span>
    <!-- ageプロパティの定義の有無により、表示を切り替え -->
    <span *ngIf="user.age; else unknownAge">age: {{ user.age }}　</span>
    <ng-template #unknownAge><span>年齢不詳　</span> </ng-template>
    <span>job：{{ user.job }}</span>
  </p>
</div>

app.component.html

<app-extends></app-extends>

このようにUserインターフェイスをextendsし、
name ,age ,jobという３つのプロパティを持ったオブジェクトが作れました。

まとめ

interface・・・定義を強制すること
extends・・・他のコンポーネントを継承すること

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram