【TypeScript】ジェネリクスを活用した実用的な例

ジェネリクスとは？

ジェネリクスは、異なる型で機能するコンポーネントを作成するための強力なツールです。これにより、コードの再利用性と型の安全性を同時に高めることができます。

コード例１: APIレスポンスの型定義

Webアプリケーション開発において、さまざまなAPIから異なる形式のデータを取得することがあります。ジェネリクスを使用して、APIレスポンスの型を柔軟に定義する方法を見てみましょう。

import axios from "axios";

interface ApiResponse<T> {
status: number;
payload: T;
}

interface User {
name: string;
email: string;
}

const getUser = async (): Promise<ApiResponse<User>> => {
return await axios.get("https://example.com/user");
};

interface Product {
name: string;
price: number;
}

const getProducts = async (): Promise<ApiResponse<Product[]>> => {
return await axios.get("https://example.com/products");
};

上記の例では、ApiResponseインターフェイスをジェネリクスとして定義しています。これにより、UserやProduct[]など、任意の型をpayloadに持たせることができます。

コード例２: 汎用的なデータストア

次に、任意の型のデータを管理する汎用的なデータストアの例を見てみましょう。

class DataStore<T> {
	private data: T[] = [];

    add(item: T): void {
    	this.data.push(item);
    }

    remove(index: number): T {
    	return this.data.splice(index, 1)[0];
    }

    get(index: number): T {
    	return this.data[index];
    }

}

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

const userStore = new DataStore<User>();
userStore.add({ id: 1, name: "John Doe" });

interface Product {
id: number;
name: string;
price: number;
}

const productStore = new DataStore<Product>();
productStore.add({ id: 1, name: "Table", price: 1000 });

この例では、DataStoreクラスをジェネリクスを用いて定義しています。これにより、User型のデータを管理するストアと、Product型のデータを管理するストアを同じクラス定義から生成できます。

まとめ

ジェネリクスを活用することで、TypeScriptのコードをより実践的かつ効率的に書くことができます。上記のように、APIレスポンスの型定義や汎用的なデータストアの実装など、多岐にわたるシナリオでジェネリクスの強力さを活かすことができます。