TypeScriptその③

useStateの型宣言

useStateの型宣言は下記にようにします。

const [count, setCount] = useState<number>(0);

API のレスポンス型宣言

APIのレスポンスで受け取った値の型宣言は下記のようにします。

type User = {
  id: number;
  name: string;
  email: string;
};

async function fetchUser(): Promise<User> {
  const response = await fetch("https://example.com/api/user/1");
  return response.json(); // `User` 型のデータが返ることを期待
}

このようにPromiseオブジェクト（非同期処理の結果を受け取るためのオブジェクト）にくっつける形で定義します。

ただ、API データ取得関数は色々なデータを受け取る想定で使い回すことが多いので、その場合は型を後から決める仕組み「ジェネリクス」を使用することがあります。

async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  return response.json();
}

// `User` 型のデータを取得
fetchData<User>("https://example.com/api/user").then((user) => {
  console.log(user.name);
});

// `Post` 型のデータを取得
fetchData<Post>("https://example.com/api/post").then((post) => {
  console.log(post.title);
});

このようにレスポンスの型をどんなデータでも扱えるようにすることで、関数の使い回しができます。

また、fetchData<T>と関数名の後にもジェネリクスをつけていますが、これは「ジェネリクス（T）を使う関数を作る」という意味合いでPromise<T>とセットになっています。