Javascript（Typescript）クラス基本

基本

private name: string;は this.nameの型 name: stringは初期化時の引数の型

class Greeter {
  // プロパティの定義（デフォルトで public）
  private name: string;  // ここで肩を定義

  // コンストラクタの定義
  constructor(name: string) {
    this.name = name;
  }

  // メソッドの定義（デフォルトで public）
  greet() { // メソッドには型をつけていない
    console.log(`Hello, ${this.name}`);
  }
}

基本用語

プロパティ（this.name）
メソッド（hello()）
ゲッターセッター（privateのプロパティにインスタンスでアクセスする）
静的メソッド（まだよくわからない）
super

ゲッター・セッター

class Book {
  private _title: string = '';

  set title(value: string) {
    console.log('setter が呼ばれたよ');
    this._title = value;
  }

  get title(): string {
    console.log('getter が呼ばれたよ');
    return this._title;
  }
}

const b = new Book();
b.title = 'タイトル';  // setter が呼ばれたよ
console.log(b.title);  // getter が呼ばれたよ → タイトル

下記が自分で作ったやつ勘違いしていたのが、ゲッタは実行時に()をつけない

インスタンス.geteveningが正しい

class Hello {
   morning:boolean;
   private evening: boolean;
   constructor() {
       this.morning = false
       this.evening = false
   }

   get getevening() {
    return this.evening;
   }
}



const hello1 = new Hello

console.log(hello1.morning)
console.log(hello1.getevening)

ちょっと複雑なプロパティの型定義

class Hello {
   state: {lists: number[]}
   constructor() {
       this.state = {
           lists: [1,2,3,4]
       }
   }

}

super

親のconstructorメソッドを呼び出す

class Parent {
    constructor(...args: any) {
        console.log("Parentコンストラクタの処理", ...args);
    }
}
// Parentを継承したChildクラスの定義
class Child extends Parent {
    constructor(...args:any) {
        // Parentのコンストラクタ処理を呼び出す
        super(...args);
        console.log("Childコンストラクタの処理", ...args);
    }
}
const child = new Child("引数1", "引数2");
console.log(child)

出力結果

[LOG]: "Parentコンストラクタの処理",  "引数1",  "引数2" 
[LOG]: "Childコンストラクタの処理",  "引数1",  "引数2" 
[LOG]: Child: {}

要点

クラスは、プロパティの型定義と、初期化時の型大義が必要
初期化時のプロパティはthis.プロパティ名で値を入れる
ゲッターは()をつけて呼ばない

参考記事

maku.blog

jsprimer.net