【初心者向け】TypeScriptのフィールド初期化子の使い方

2024-04-02

TypeScriptとフィールド初期化子

コードの冗長性を減らす
型安全性と初期値設定を同時に実現
コンストラクタの記述量を削減
コードの可読性と保守性を向上

フィールド初期化子は、フィールド名の後に = 記号と初期値を記述することで使用できます。初期値には、リテラル値、変数、式などを使用できます。

class Person {
  name: string = "John Doe"; // 初期値を直接指定
  age: number; // 型のみ指定

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

const person = new Person(30);

console.log(person.name); // "John Doe"
console.log(person.age); // 30

より複雑な初期化

フィールド初期化子では、より複雑な処理を実行することもできます。例えば、他のフィールドを参照したり、関数呼び出しを行ったりすることができます。

class Point {
  x: number;
  y: number;

  constructor() {
    this.x = 0;
    this.y = this.generateRandomNumber();
  }

  private generateRandomNumber(): number {
    return Math.floor(Math.random() * 100);
  }
}

const point = new Point();

console.log(point.x); // 0
console.log(point.y); // ランダムな数値

フィールド初期化子は、コンストラクタの前に記述する必要があります。
コンストラクタ内で同じフィールドに値を代入すると、フィールド初期化子の値は上書きされます。
フィールド初期化子は、クラスのインスタンス化時にのみ実行されます。

フィールド初期化子は、TypeScriptにおける便利な機能です。コードの冗長性を減らし、型安全性と初期値設定を同時に実現することができます。また、コンストラクタの記述量を削減し、コードの可読性と保守性を向上させることができます。

シンプルな初期化

class Person {
  name: string = "John Doe";
  age: number = 30;

  constructor() {
    // フィールド初期化子によって、コンストラクタ内で値を代入する必要がない
  }
}

const person = new Person();

console.log(person.name); // "John Doe"
console.log(person.age); // 30

複雑な初期化

class Point {
  x: number = 0;
  y: number = this.generateRandomNumber();

  constructor() {
    // コンストラクタ内で他のフィールドを参照できる
  }

  private generateRandomNumber(): number {
    return Math.floor(Math.random() * 100);
  }
}

const point = new Point();

console.log(point.x); // 0
console.log(point.y); // ランダムな数値

デフォルト値とオプションの初期化

class Car {
  make: string;
  model: string;
  year: number = 2023; // デフォルト値

  constructor(make: string, model: string, year?: number) {
    this.make = make;
    this.model = model;
    this.year = year ?? this.year; // オプションの初期化
  }
}

const car1 = new Car("Toyota", "Camry"); // デフォルト値を使用
console.log(car1.year); // 2023

const car2 = new Car("Honda", "Civic", 2022); // オプションの初期化を使用
console.log(car2.year); // 2022

クラスの別のフィールドを参照する
関数呼び出しを行う
条件分岐を使用する
ループを使用する

フィールド初期化子の代替方法

コンストラクタは、クラスのインスタンス化時に実行される特別なメソッドです。コンストラクタ内でフィールドに値を代入することで、初期値を設定することができます。

class Person {
  name: string;
  age: number;

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

const person = new Person("John Doe", 30);

console.log(person.name); // "John Doe"
console.log(person.age); // 30

デフォルト値

フィールドにデフォルト値を設定することで、コンストラクタで明示的に値を代入しなくても初期値を設定することができます。

class Person {
  name: string = "John Doe";
  age: number;

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

const person = new Person(30);

console.log(person.name); // "John Doe"
console.log(person.age); // 30

プロパティを使用して、フィールドにアクセスおよび設定することができます。プロパティのゲッターで初期値を設定することができます。

class Person {
  private _name: string;

  get name(): string {
    return this._name ?? "John Doe";
  }

  set name(name: string) {
    this._name = name;
  }

  constructor() {}
}

const person = new Person();

console.log(person.name); // "John Doe"

person.name = "Jane Doe";

console.log(person.name); // "Jane Doe"