TypeScript インターフェースで readonly プロパティを定義する方法

TypeScript インターフェースにおける readonly プロパティ

TypeScript では、インターフェースを使用してオブジェクトの構造を定義することができます。インターフェースには、オブジェクトが持つべきプロパティと、それぞれのプロパティの型を定義することができます。

さらに、readonly 修飾子を使用して、プロパティを 読み取り専用 にすることができます。つまり、そのプロパティの値は、一度設定されたら 変更できない ことを意味します。

readonly プロパティの利点

• 意図しないプロパティの変更を防ぎ、 エラーを削減 することができます。
• オブジェクトの状態を 不変 に保つことができます。
• コードの 可読性 と 保守性 を向上させることができます。

インターフェースで readonly プロパティを定義するには、以下の構文を使用します。

interface MyInterface {
  readonly myProperty: string;
}

この例では、MyInterface インターフェースには myProperty という名前の readonly プロパティがあることを定義しています。このプロパティの型は string であり、一度設定されたら値を変更することはできません。

• オブジェクトリテラルを使用して readonly プロパティを持つオブジェクトを作成する場合、すべてのプロパティを初期化する必要があります。
• 一度設定された readonly プロパティの値は、再代入することはできません。
• readonly プロパティは、初期化時にのみ 値を設定することができます。

以下の例は、readonly プロパティを使用した簡単なコード例です。

interface Person {
  readonly name: string;
  age: number;
}

const person: Person = {
  name: 'John Doe',
  age: 30
};

console.log(person.name); // 'John Doe'
person.name = 'Jane Doe'; // エラー: 'name' は読み取り専用です

この例では、Person インターフェースには name という名前の readonly プロパティと age という名前のプロパティがあることを定義しています。

person オブジェクトを作成し、name プロパティに 'John Doe'、age プロパティに 30 を設定します。

その後、console.log(person.name) で name プロパティの値を出力すると、'John Doe' が出力されます。

しかし、person.name = 'Jane Doe' で name プロパティの値を変更しようとすると、エラーが発生します。これは、name プロパティが readonly であるため、値を変更することができないからです。

この例では、Person インターフェースを使用して、名前と年齢を持つ人物を表すオブジェクトを定義します。name プロパティは readonly であるため、一度設定されたら変更できません。

interface Person {
  readonly name: string;
  age: number;
}

const person: Person = {
  name: 'John Doe',
  age: 30
};

console.log(person.name); // 'John Doe'
person.name = 'Jane Doe'; // エラー: 'name' は読み取り専用です

オブジェクトリテラルでの初期化

この例では、オブジェクトリテラルを使用して Person オブジェクトを作成します。すべてのプロパティを初期化する必要があります。

interface Person {
  readonly name: string;
  age: number;
}

const person: Person = {
  name: 'John Doe',
  age: 30
};

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

コンストラクターでの初期化

この例では、コンストラクターを使用して Person オブジェクトを作成します。

class Person {
  readonly 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'

型エイリアス

この例では、ReadonlyPerson 型エイリアスを使用して、readonly プロパティを持つ Person オブジェクトの型を定義します。

type Person = {
  name: string;
  age: number;
};

type ReadonlyPerson = Readonly<Person>;

const person: ReadonlyPerson = {
  name: 'John Doe',
  age: 30
};

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

ネストされたオブジェクト

この例では、ネストされたオブジェクト内のプロパティを readonly にします。

interface Address {
  readonly street: string;
  city: string;
}

interface Person {
  readonly name: string;
  age: number;
  address: Address;
}

const person: Person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
};

console.log(person.name); // 'John Doe'
person.address.street = '456 Elm St'; // エラー: 'street' は読み取り専用です

readonly 修飾子の組み合わせ

readonly 修飾子は、他の修飾子と組み合わせて使用することができます。

interface Person {
  readonly name: string;
  private age: number;
}

const person: Person = {
  name: 'John Doe',
  age: 30
};

console.log(person.name); // 'John Doe'
person.age = 31; // エラー: 'age' はプライベートです

この例では、name プロパティは readonly であるため、一度設定されたら変更できません。さらに、age プロパティは private であるため、外部からアクセスできません。

const キーワードを使用して変数を宣言すると、その変数の値は 宣言時に一度だけ 設定できます。一度設定された値は、再代入することはできません。

const person = {
  name: 'John Doe',
  age: 30
};

person.name = 'Jane Doe'; // エラー: 'person' は読み取り専用です

この例では、person オブジェクトは const で宣言されているため、オブジェクトのプロパティを変更することはできません。

オブジェクトリテラルの短縮形を使用すると、プロパティ名の前に : を省略することができます。

const person = {
  name: 'John Doe',
  age: 30
};

person.name = 'Jane Doe'; // エラー: 'person' は読み取り専用です

この例では、person オブジェクトは短縮形を使用して宣言されています。これは、name プロパティの前に : を省略していることを意味します。短縮形で宣言されたオブジェクトのプロパティも、書き込み不可になります。

フリーズメソッド

Object.freeze() メソッドを使用して、オブジェクトを フリーズ することができます。フリーズされたオブジェクトのプロパティは、変更したり削除したりすることができなくなります。

const person = {
  name: 'John Doe',
  age: 30
};

Object.freeze(person);

person.name = 'Jane Doe'; // エラー: 'person' は読み取り専用です

この例では、Object.freeze() メソッドを使用して person オブジェクトをフリーズしています。フリーズされたオブジェクトのプロパティは、書き込み不可になります。

getter メソッド

getter メソッドを使用して、オブジェクトのプロパティの値を取得することができます。getter メソッドは、プロパティの値を 読み取る ことができますが、書き換える ことはできません。

class Person {
  private name: string;

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

  get getName(): string {
    return this.name;
  }
}

const person = new Person('John Doe');

console.log(person.getName); // 'John Doe'
person.getName = 'Jane Doe'; // エラー: 'getName' は書き込み専用です