【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"의 세 가지 이외의 값이 할당되면 오류가 발생합니다.
・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.를 붙인다
· 개인 필드는 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의 3 종류로 지정했으므로
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 클래스는 인스턴스화할 수 없다.