TypeScriptのReadonly型でデータの不変性を確保しよう

作成日 2025.02.06
TypeScript
TypeScript

TypeScriptでは、データの不変性を確保するためにReadonly型を使用することができます。Readonly型は、オブジェクトや配列のプロパティが変更できないようにするために活用され、予期しない変更からコードを守る手段を提供します。

1. Readonly型とは？
2. Readonly型の基本的な使い方
3. Readonly型の効果的な活用法
4. ReadonlyArray型の使用
5. Readonly型とObject.freeze()の違い
6. Readonly型とオブジェクトの継承
7. Readonly型の応用例
8. Readonly型を使ったデータ管理
9. Readonly型の制限と活用のバランス
10. Readonly型と非同期処理
11. Readonly型と型の合成
12. まとめ

Readonly型とは？

Readonly型は、TypeScriptにおいて、オブジェクトや配列のプロパティを読み取り専用にするユーティリティ型です。これにより、オブジェクトのプロパティを変更できないように制限することができます。

Readonly型の基本的な使い方

Readonly型を使うと、オブジェクトのすべてのプロパティを変更不可にすることができます。例えば、次のようにして使用します。

interface User {
    name: string;
    age: number;
}

const user: Readonly<User> = { name: "Alice", age: 25 };

// user.name = "Bob"; // エラー: プロパティ 'name' は読み取り専用です
// user.age = 30; // エラー: プロパティ 'age' は読み取り専用です

Readonly型の効果的な活用法

Readonly型は、関数の引数や戻り値に対しても活用できます。例えば、オブジェクトを変更せずに値を渡す必要がある場合などに非常に役立ちます。

function printUserInfo(user: Readonly<User>) {
    console.log(user.name, user.age);
}

const user2: User = { name: "Bob", age: 30 };
printUserInfo(user2); // 名前と年齢を表示

// user2.age = 35; // エラー: プロパティ 'age' は読み取り専用です

ReadonlyArray型の使用

配列に対してもReadonly型を適用することができます。ReadonlyArray型を使うことで、配列の内容を変更できないようにすることができます。

const numbers: ReadonlyArray<number> = [1, 2, 3];

// numbers[0] = 10; // エラー: 配列要素は読み取り専用です
// numbers.push(4); // エラー: 配列は変更できません

Readonly型とObject.freeze()の違い

Object.freeze()を使ってオブジェクトの変更を防ぐ方法もありますが、Readonly型はコンパイル時に型の安全性を提供するため、より強力で開発時にエラーを早期に発見できます。

Readonly型とオブジェクトの継承

Readonly型を使うと、オブジェクトが継承したプロパティにも影響を与えます。例えば、親クラスのプロパティも変更不可にできます。

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

interface ReadonlyPerson extends Readonly<Person> {
    address: string;
}

const person: ReadonlyPerson = { name: "Charlie", age: 40, address: "123 Main St" };

// person.name = "David"; // エラー: プロパティ 'name' は読み取り専用です

Readonly型の応用例

Readonly型は、関数やクラスの設計において、データの不変性を強制するために広く使われています。たとえば、設定オブジェクトを変更不可にしたい場合などに役立ちます。

interface Config {
    apiUrl: string;
    timeout: number;
}

const config: Readonly<Config> = { apiUrl: "https://api.example.com", timeout: 5000 };

// config.apiUrl = "https://api.newurl.com"; // エラー: プロパティ 'apiUrl' は読み取り専用です

Readonly型を使ったデータ管理

データの不変性を保つことで、アプリケーションの状態が予測可能になり、バグの原因となる副作用を避けることができます。特に状態管理の場面で役立ちます。

Readonly型の制限と活用のバランス

Readonly型は非常に便利ですが、すべてのオブジェクトに適用すると柔軟性が欠けることがあります。適切な場所で使用し、必要に応じて読み取り専用にすることが大切です。

Readonly型と非同期処理

非同期処理の中でもReadonly型は役立ちます。例えば、非同期のAPIレスポンスオブジェクトを変更不可にすることで、意図しない変更を防ぐことができます。

interface ApiResponse {
    data: string;
    status: number;
}

function fetchData(): Promise<Readonly<ApiResponse>> {
    return Promise.resolve({ data: "Success", status: 200 });
}

fetchData().then(response => {
    console.log(response.data, response.status);
    // response.data = "Error"; // エラー: プロパティ 'data' は読み取り専用です
});

Readonly型と型の合成

Readonly型は他の型と組み合わせることで、より強力な型管理を実現できます。例えば、Partial型と組み合わせて、部分的に変更不可のオブジェクトを作成することもできます。

type ReadonlyPartialUser = Readonly<Partial<User>>;

const partialUser: ReadonlyPartialUser = { name: "Eve" };

// partialUser.age = 30; // エラー: プロパティ 'age' は読み取り専用です

まとめ

Readonly型を使用することで、データの不変性を確保し、アプリケーションの予測可能性を高めることができます。特に状態管理やAPIレスポンスなどの場面で非常に有効なツールです。