【Angular/Typescript】クラスや型の使い方のサンプル

コンポーネント以外の独自のクラスを作りたいときのメモ
サンプルを動かしてわかった気になりたい人向け

・AbstructClassと継承
・private/protectedの違い
・superの使い方
・リテラル型
・読み込み専用 readonly
…などのメモです。

例として
・動物クラス
・動物クラスを継承した分類クラス
・分類クラスを継承した種類クラス
を作っていきます

AnimalClass

abstract class Animal {
  //private name: string; //constructorの引数で宣言されていたらここに書き出してなくても変数として使える
  //protected canFly: boolean;
  protected color: string;
  protected type: "bird" | "dog" | "cat"; // リテラル型　指定した値以外は入力値にできない
  protected readonly xxx = 1;

  constructor(private name: string, protected canFly: boolean) {}

  setName(name: string) {
    this.name = name; // privateのフィールドは宣言されたクラスの中でなら書き込める
  }
  getParam() {
    return {
      name: this.name,
      color: this.color,
      canFly: this.canFly,
      type: this.type,
      xxx: this.xxx,
    };
  }
}

・abstractは継承して使ってもらうことを前提としたクラスだよ〜、
このクラスを直接使うことはできないよ〜ってこと。
・リテラル型を使うと、number型やstring型よりもより限定的な値を入力できるようにできる
上記の例だと、typeには"bird"または"dog"または"cat"の3つ以外の値が代入されたとき、エラーとなる
・privateは宣言したクラスでしか書き込み、読み込みができない。継承先で利用不可。

BirdClassとCrowClass

abstract class Bird extends Animal {
  constructor(name: string, canFly: boolean) {
    super(name, canFly); // Animalのコンストラクター
    super.type = "bird"; // protectedのフィールドは書き込める
    // super.name = name; // error privateのフィールドは書き込めない
    //super.setName(name); // privateのフィールドに書き込む用のメソッドなどを用意して書き込む
    // super.xxx = 2; // error readonlyは読み込みだけ可
  }
}

class Crow extends Bird {
  constructor() {
    super("crow", true);
    super.color = "black";
    //this.color = "black"; //superはthisでもいい
  }
}

Animalを継承した鳥クラス。そしてそれを継承した具体的な種類のカラスクラス。
・super は継承元のクラスを指す
・protectedで宣言されたフィールドはBirdやCrowクラスでも自由に使える。
・継承元のクラスで宣言されたフィールドを使うときはsuper.かthis.をつける
・privateのフィールドはBirdとCrowどちらからも直接書き込むことはできない
・書き込みたければsuperクラスに書き込むためのメソッドとか用意する必要がある
・readonlyのプロパティは、値を利用することはできるが、新たな値を代入はできない

RabbitClass

class Rabbit extends Animal {
  constructor(name: string, color: string) {
    super(name, false);
    //super.type = "rabbit"; // リテラル型で指定した以外の値なのでerror
    super.color = color;
  }
}

Animalクラスで動物の種類で指定できるのはbird,dog,catの三種類と指定したので
rabbitを代入しようとするとエラーになる

コンポーネント

import { Component, OnInit } from "@angular/core";

export class ClassTestComponent implements OnInit {
  //cat = new Animal(); // error abstractクラスは直接インスタンス化できない
  crow = new Crow();

  constructor() {}

  ngOnInit() {
    console.log(this.crow.getParam());
  }
}

・abstructのクラスはインスタンス化できない