👀

クラス①【個人学習まとめ】

2024/12/04に公開

クラスとは

データとそのデータに関連する機能(メソッド)をまとまりにして定義する。
オブジェクトの設計図として考えるとよい。
基本的な宣言は次の通り。

 class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

Personクラスはnameとageプロパティを持ち、インスタンス化するときに初期化している。
クラスのメンバーはトップクラスで明示的に宣言する必要がある。
プロパティを宣言せずに、コンストラクタ内でプロパティを初期化しようとするとエラーになる。

class errorPerson {
    //ここ(トップクラス)でname,ageを宣言していない 
    constructor(name: string, age: number) {
        this.name = name; //プロパティ 'name' は型 'errorPerson' に存在しません。
        this.age = age; //プロパティ 'age' は型 'errorPerson' に存在しません。
    }
}

余談インスタンス化って？

クラスからオブジェクトを作成すること。newキーワードを使ってクラスからインスタンスを作成する。
端的に言ったら、クラス（設計図）からインスタンス（実体）を作ること。
よく使われるのは newする。

また、コンストラクタ内で初期値されていない場合もエラーになる。

class errorPerson2 {
    name: string;
    age: number; //プロパティ 'age' に初期化子がなく、コンストラクターで明確に割り当てられていません。

    constructor(name: string, age: number) {
        this.name = name;
    }
}

Personクラスからtaroオブジェクトを生成(newする)し、greetメソッドを呼び出す。

const taro = new Person("テスト　太郎", 20);
tarp.greet("こんにちは！！！！！")

greetメソッドを引数無しで呼び出したり、違う型を引数として渡すとエラーとなる。

taro.greet(); //1 個の引数が必要ですが、0 個指定されました。
taro.greet(["こんにちは！"]); //型 'string[]' の引数を型 'string' のパラメーターに割り当てることはできません。

読み取り専用プロパティ

readonlyキーワードを使うことによって、読み取り専用のプロパティとして指定することができる。

class Person {
    readonly name: string; //読み取り専用プロパティとする
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(greeting: string): void {
        console.log(`${greeting} 私の名前は ${this.name} 、年齢は ${this.age}です。`);
    }
}

Personクラスからtaroオブジェクトを生成(newする)し、greetメソッドを呼び出す。

const taro = new Person("テスト　太郎", 20);
taro.greet("こんにちは！");

次のようにnameの値を上書きすることはできない。

taro.name = "次郎"; //readonlyプロパティの`name`に上書きはできない。

型としてのクラス

クラスはインスタンス化するためだけの機能以外にも、型として利用することもできる。

class Person {
  readonly name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(greeting: string): void {
    console.log(
      `${greeting} 私の名前は ${this.name} 、年齢は ${this.age}です。`
    );
  }
}

変数fatherの型としてPersonクラスを指定。

let father: Person;
father = new Person("father Name", 55);

faherはPerson型であるため、string型はエラーとなる。

father = "fater Name2" //型 'string' を型 'Person' に割り当てることはできません。

変数motherの型としてPersonクラスを指定し、greetを呼び出し。

let mother: Person;
mother = {
  name: "mother Name",
  age: 53,
  greet(greeting: string): void {
    console.log(
      `${greeting} 私の名前は ${this.name} 、年齢は ${this.age}です。`
    );
  },
};
mother.greet("yeah");
→ yeah 私の名前は mother Name 、年齢は 53です。

余談　オブジェクトリテラルって？

表示したい内容
//まず、リテラルとは ソースコード内で直接表現される固定の値のことを指す。
//たとえば文字リテラル、数値リテラル、nullリテラルなど。
//https://jsprimer.net/basic/data-type/
//#### 文字リテラル
//"と"で囲まれた範囲が文字リテラルで、文字列型のデータであることを示す。
//次のコードだと、"日本語"が文字リテラルに該当する。
const language = "日本語";
//#### オブジェクトリテラル
//プロパティ名とプロパティに関連付けされたオブジェクトの値のペアを集めたリストのことを指す。
//{と}で囲まれる。
const objSapmple = {
key1: "value1",
key2: "value2",
};
//objSampleのプロパティを参照する方法は次の２種類がある。
//ドット.で参照
console.log(objSapmple.key1);
//ブラケット[]で参照
console.log(objSapmple["key2"]);

クラスとは

読み取り専用プロパティ

型としてのクラス

Discussion