ジェネリックラッパーによるFetchレスポンスの型付け

ようこそ

fetchの問題点

const res = await fetch('/api/user');
const data = await res.json(); // data: any — unsafe

ジェネリックfetchラッパー

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
  return res.json() as Promise<T>;
}

ラッパーの使用

interface User { id: number; name: string; }
const user = await fetchJson<User>('/api/users/1');
console.log(user.name); // typed as string

エラーハンドリングの追加

async function safeFetch<T>(url: string): Promise<Result<T>> {
  try {
    const res = await fetch(url);
    if (!res.ok) return err(new Error(`HTTP ${res.status}`));
    return ok(await res.json() as T);
  } catch (e) { return err(e as Error); }
}

リクエストオプションの型付け

async function postJson<T, B>(url: string, body: B): Promise<T> {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  return res.json() as Promise<T>;
}

レスポンスの検証

AbortControllerの型付け

const ctrl = new AbortController();
const data = await fetchJson<User>('/api/users/1', { signal: ctrl.signal });
setTimeout(() => ctrl.abort(), 5000);

ベースURLインターセプター

class ApiClient {
  constructor(private baseUrl: string) {}
  get<T>(path: string): Promise<T> {
    return fetchJson<T>(`${this.baseUrl}${path}`);
  }
}

型付きヘッダー

const headers: Record<string, string> = {
  Authorization: `Bearer ${token}`,
  'Content-Type': 'application/json',
};

ページネーションの型

interface Paginated<T> { data: T[]; page: number; total: number; }
const result = await fetchJson<Paginated<User>>('/api/users?page=1');

確認問題

まとめ