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 であるため、値を変更することができないからです。
TypeScript の readonly プロパティは、コードの可読性、保守性、およびセキュリティを向上させるために役立つ強力なツールです。オブジェクトの状態を不変に保ち、意図しないプロパティの変更を防ぐために使用することができます。
TypeScript の 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' は読み取り専用です
オブジェクトリテラルでの初期化
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 修飾子は、他の修飾子と組み合わせて使用することができます。
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 キーワードを使用して変数を宣言すると、その変数の値は 宣言時に一度だけ 設定できます。一度設定された値は、再代入することはできません。
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' は書き込み専用です
この例では、Person クラスに getName という getter メソッドを定義しています。このメソッドは、name プロパティの値を 読み取る ことができますが、書き換える ことはできません。
TypeScript の readonly プロパティ以外にも、オブジェクトのプロパティを書き込み不可にする方法はいくつかあります。それぞれの方法には、それぞれ異なる利点と欠点があります。状況に応じて、適切な方法を選択する必要があります。
typescript
