0Pricing
TypeScript Academy · Aula

Tipos da API Fetch; genéricos de Response.json()

Use a API Fetch com os tipos corretos e os genéricos Response.json () para analisar cargas JSON com segurança.

Tipos da API Fetch; genéricos de Response.json() é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 2. 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 2 aulas no total.

Introdução

Objetivo: chame APIs com fetch, trate as respostas com segurança e use genéricos com Response.json().

fetch básico

fetch retorna uma Promise<Response>. Use res.text() para corpos de resposta em texto simples.

async function getText() {
  const res = await fetch("/hello.txt");
  const text = await res.text();
  console.log(text);
}

Padrão de res.json()

res.json() analisa o corpo, mas seu tipo de retorno é any por padrão. Não há segurança em tempo de compilação.

async function getData() {
  const res = await fetch("/data.json");
  const data = await res.json();
  console.log(data);
}

res.json<T>()

Chame res.json<T>() com uma interface. O TS verifica se você usa apenas campos válidos de User.

interface User { id: number; name: string }

async function getUser() {
  const res = await fetch("/user.json");
  const user = await res.json<User>();
  console.log(user.id, user.name);
}

Segurança de tipos

O TypeScript impede o acesso a campos ausentes quando você usa genéricos com json<T>.

interface Product { id: number; price: number }

async function getProduct() {
  const res = await fetch("/product.json");
  const p = await res.json<Product>();
  // console.log(p.unknown); // Error: unknown does not exist
}

Tipagem de matrizes

Os genéricos também funcionam com matrizes, por exemplo, Todo[]. O TS garante que cada item tenha o formato correto.

interface Todo { id: number; done: boolean }

async function getTodos() {
  const res = await fetch("/todos.json");
  const todos = await res.json<Todo[]>();
  todos.forEach(t => console.log(t.id, t.done));
}

Verificação de json<T>()

Verificação rápida: qual é a vantagem de response.json<T>() com um argumento de tipo?

Recapitulação

Recapitulação: fetch retorna Response. Por padrão, json() é any. Adicione o genérico json<T> para obter segurança de tipos.

Perguntas Frequentes

A aula “Tipos da API Fetch; genéricos de Response.json()” é grátis?

Sim — o texto completo de “Tipos da API Fetch; genéricos de Response.json()” é 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 2 aulas no total.

O que vou aprender em “Tipos da API Fetch; genéricos de Response.json()”?

Use a API Fetch com os tipos corretos e os genéricos Response.json () para analisar cargas JSON com segurança. 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 2.

Quanto tempo leva a aula “Tipos da API Fetch; genéricos de Response.json()”?

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. Tipos da API Fetch; genéricos de Response.json()
  2. Validação em tempo de execução com zod (introdução)
← Voltar para TypeScript Academy