Reactアプリケーションでデータを取得する際には、非同期処理が不可欠です。TypeScriptを活用することで、非同期関数やAPIレスポンスに型を付けることができ、型安全なコードを記述できます。この章では、非同期関数の型定義、Axiosを用いたAPIリクエスト、型を使用してデータの形状を保証する方法を解説します。

非同期関数の型定義

非同期関数に型を付けることで、戻り値の型を明確にし、関数の安全性を高めることができます。

基本例

以下は、fetchData関数に型を付けた例です。

const fetchData = async (): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Hello, TypeScript!"), 1000);
  });
};

const App = async () => {
  const data = await fetchData();
  console.log(data); // "Hello, TypeScript!"
  return <div>{data}</div>;
};

export default App;

解説

• Promise<T>: 非同期関数の戻り値として使用する型。
• 非同期関数の型は常にPromise型を返すことを意識する。

---

Axiosなどを用いたAPIリクエスト

外部APIと通信する際にAxiosを使用することが一般的です。TypeScriptを組み合わせることで、APIレスポンスの型を厳密に管理できます。

Axiosの基本的な型付け

以下は、Axiosを用いたデータ取得の例です。

import axios from 'axios';

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

const fetchUsers = async (): Promise<User[]> => {
  const response = await axios.get<User[]>('https://jsonplaceholder.typicode.com/users');
  return response.data;
};

const App = async () => {
  const users = await fetchUsers();
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

解説

• ジェネリクス <User[]>: axios.getに期待されるレスポンスの型を指定。
• レスポンスの型安全性: APIの戻り値が型に一致しない場合にエラーを発生させる。

---

型でデータの形状を保証する

APIからのレスポンスは、サーバー側の変更により形状が変わる可能性があります。TypeScriptの型を使用することで、これらの変更を検知できます。

型チェックによる安全性の向上

以下は、レスポンスデータのバリデーションを組み込んだ例です。

import axios from 'axios';
import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
});

type User = z.infer<typeof UserSchema>;

const fetchUsers = async (): Promise<User[]> => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/users');

  // バリデーション
  const validatedData = response.data.map((user: unknown) => {
    return UserSchema.parse(user);
  });

  return validatedData;
};

const App = async () => {
  const users = await fetchUsers();
  return (
    <div>
      <h1>Validated Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

解説

• zodライブラリ: データの型チェックとバリデーションを行うライブラリ。
• z.infer: スキーマからTypeScriptの型を自動生成。
• 安全性: サーバーからのレスポンスデータを確実に期待通りの形状に変換。