Readonly<T>

Readonly<T>は、オブジェクト型Tのプロパティをすべて読み取り専用にするユーティリティ型です。

Readonly<T>の型引数

T

型引数Tにはオブジェクト型を代入します。

Readonlyの使用例

ts
type Person = {
  surname: string;
  middleName?: string;
  givenName: string;
};
type ReadonlyPerson = Readonly<Person>;
           
type ReadonlyPerson = {
    readonly surname: string;
    readonly middleName?: string | undefined;
    readonly givenName: string;
}

ts
type Person = {
  surname: string;
  middleName?: string;
  givenName: string;
};
type ReadonlyPerson = Readonly<Person>;
           
type ReadonlyPerson = {
    readonly surname: string;
    readonly middleName?: string | undefined;
    readonly givenName: string;
}

上のReadonlyPersonは次の型と同じになります。

ts
type ReadonlyPerson = {
  readonly surname: string;
  readonly middleName?: string;
  readonly givenName: string;
};

ts
type ReadonlyPerson = {
  readonly surname: string;
  readonly middleName?: string;
  readonly givenName: string;
};

Readonlyの効果は再帰的ではない

Readonly<T>が読み取り専用にするのは、オブジェクト型T直下のプロパティのみです。プロパティがオブジェクトだった場合、それが持つプロパティまでは読み取り専用にならないので注意してください。

関連情報

📄️ オブジェクト型のreadonlyプロパティ

TypeScriptでは、オブジェクトのプロパティを読み取り専用にすることができます。読み取り専用にしたいプロパティにはreadonly修飾子をつけます。読み取り専用のプロパティに値を代入しようとすると、TypeScriptコンパイラーが代入不可の旨を警告するようになります。

📄️ クラスのreadonly修飾子

TypeScriptでは、フィールドにreadonly修飾子をつけると、そのフィールドを読み取り専用にできます。

📄️ インターフェースのreadonly修飾子

TypeScriptのインターフェースでは、フィールドにreadonly修飾子をつけることで読み取り専用のフィールドが定義できます。

📄️ readonlyとconstの違い

JavaScriptでは、constで宣言した変数は代入不可になります。TypeScriptではオブジェクト型のプロパティにreadonly修飾子をつけると、そのプロパティが代入不可になります。これら2つの機能は「代入不可」という点では似ています。ではこれらの違いは何でしょうか。