0Pricing
TypeScript Academy · Aula

Tipando respostas de fetch com wrappers genéricos

Escreva um auxiliar fetch tipado que retorne tipos seguros

Tipando respostas de fetch com wrappers genéricos é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

Boas-vindas

Escreva funções auxiliares de fetch tipadas para consumir APIs HTTP com segurança.

O problema com fetch

A API fetch retorna Promise e .json() retorna Promise. Sem tipos, você perde toda a segurança.
const res = await fetch('/api/user');
const data = await res.json(); // data: any — unsafe

Wrapper genérico de fetch

Crie um auxiliar de fetch tipado que presume o formato da resposta.
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>;
}

Usando o wrapper

Chame o wrapper com um argumento de tipo explícito.
interface User { id: number; name: string; }
const user = await fetchJson<User>('/api/users/1');
console.log(user.name); // typed as string

Adicionando tratamento de erros

Estenda o wrapper para retornar um tipo Resultado.
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); }
}

Tipagem das opções da solicitação

Defina os tipos das opções de fetch para solicitações POST/PUT.
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>;
}

Validação da resposta

Valide o formato da resposta antes de retorná-la como o valor tipado.

Tipagem de AbortController

Defina os tipos de AbortController e AbortSignal para solicitações que possam ser canceladas.
const ctrl = new AbortController();
const data = await fetchJson<User>('/api/users/1', { signal: ctrl.signal });
setTimeout(() => ctrl.abort(), 5000);

Interceptor de URL base

Crie uma classe de cliente HTTP com uma URL base.
class ApiClient {
  constructor(private baseUrl: string) {}
  get<T>(path: string): Promise<T> {
    return fetchJson<T>(`${this.baseUrl}${path}`);
  }
}

Cabeçalhos tipados

Defina os tipos dos cabeçalhos da solicitação e da resposta.
const headers: Record<string, string> = {
  Authorization: `Bearer ${token}`,
  'Content-Type': 'application/json',
};

Tipos de paginação

Defina o tipo das respostas paginadas da API.
interface Paginated<T> { data: T[]; page: number; total: number; }
const result = await fetchJson<Paginated<User>>('/api/users?page=1');

Verificação rápida

O que `res.json() as Promise` faz em um wrapper de fetch tipado?

Recapitulação

Tipagem de respostas de fetch com wrappers genéricos: você dominou os principais conceitos e padrões.

Perguntas Frequentes

A aula “Tipando respostas de fetch com wrappers genéricos” é grátis?

Sim — o texto completo de “Tipando respostas de fetch com wrappers genéricos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Tipando respostas de fetch com wrappers genéricos”?

Escreva um auxiliar fetch tipado que retorne tipos seguros Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Tipando respostas de fetch com wrappers genéricos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Tipando respostas de fetch com wrappers genéricos
  2. Validação em tempo de execução com Zod
  3. Geração de código OpenAPI: tipos gerados automaticamente
  4. Visão geral do cliente tRPC com segurança de tipos
← Voltar para TypeScript Academy