TypeScript Academy · Aula

Tipos de Valores JSON

Defina um tipo completo e seguro para valores JSON.

Tipos de Valores JSON é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 3 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.

O que é um valor JSON?

JSON permite um conjunto fixo de formatos de valor: textos, números, booleanos, nulo, vetores e objetos. Um tipo recursivo pode descrever exatamente esse conjunto.

type Json =
  | string
  | number
  | boolean
  | null
  | Json[]
  | { [k: string]: Json };
// arrays and objects nest Json again.

O tipo JSON recursivo

A ideia principal: os vetores contêm Json e os valores dos objetos são Json, portanto o tipo referencia a si mesmo para dados aninhados.

type Json =
  | string | number | boolean | null
  | Json[]
  | { [k: string]: Json };
const x: Json = { name: "Ada", tags: ["a", "b"], active: true };
console.log(x);

Valores JSON primitivos

Os valores JSON mais simples são primitivos. Cada um pode ser atribuído diretamente a Json.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const a: Json = "hello";
const b: Json = 42;
const c: Json = true;
const d: Json = null;
console.log(a, b, c, d);

Vetores JSON

Um vetor JSON é Json[], portanto pode conter uma mistura de quaisquer valores JSON, incluindo vetores e objetos aninhados.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const arr: Json = [1, "two", true, null, [3, 4]];
console.log(Array.isArray(arr));

Objetos JSON

Um objeto JSON associa chaves de texto a valores Json por meio de uma assinatura de índice, permitindo aninhamento arbitrário.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const obj: Json = {
  user: { name: "Ada", age: 36 },
  scores: [10, 20, 30]
};
console.log(obj);

JSON profundamente aninhado

Como o tipo é recursivo, estruturas profundamente aninhadas são totalmente tipadas sem nenhuma declaração adicional.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
  a: { b: { c: [1, { d: true }] } }
};
console.log(deep);

O que JSON não inclui

O tipo Json rejeita corretamente valores que JSON não pode representar, como undefined, funções ou objetos Date.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
// const bad: Json = undefined; // Error
// const fn: Json = () => 1;   // Error
const good: Json = { ok: true };
console.log(good);

Validando formatos JSON em tempo de execução

O tipo descreve JSON válido, mas você ainda precisa validar entradas não confiáveis em tempo de execução. Uma proteção recursiva verifica cada nível.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function isJson(v: unknown): v is Json {
  if (v === null) return true;
  const t = typeof v;
  if (t === "string" || t === "number" || t === "boolean") return true;
  if (Array.isArray(v)) return v.every(isJson);
  if (t === "object") return Object.values(v as object).every(isJson);
  return false;
}
console.log(isJson({ a: [1, 2], b: "x" }));

Analisando em um tipo Json

JSON.parse retorna any, portanto converta o resultado analisado para Json somente depois de validá-lo, ou tipifique a variável e valide-a.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const raw = "{ \"id\": 1, \"tags\": [\"a\"] }";
const parsed = JSON.parse(raw) as Json;
console.log(parsed);

Percorrendo um valor Json

Um percurso recursivo pode atravessar qualquer valor JSON, tratando primitivos, vetores e objetos ao verificar o formato em tempo de execução.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function countLeaves(v: Json): number {
  if (Array.isArray(v)) return v.reduce((a, x) => a + countLeaves(x), 0);
  if (v !== null && typeof v === "object") return Object.values(v).reduce((a, x) => a + countLeaves(x), 0);
  return 1;
}
console.log(countLeaves({ a: [1, 2], b: "x" }));

Por que o tipo Json é útil

Um tipo Json preciso documenta exatamente o que pode atravessar o limite da sua API, detectando em tempo de compilação tentativas de serializar valores que não são JSON.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function send(payload: Json): string {
  return JSON.stringify(payload);
}
console.log(send({ ok: true, items: [1, 2, 3] }));

Verificação rápida: tipos de valores JSON

Teste sua compreensão sobre os tipos de valores JSON.

Recapitulação: tipos de valores JSON

Você definiu um tipo recursivo Json que abrange primitivos, vetores e objetos, aprendeu o que ele exclui e validou entradas não confiáveis com uma proteção de tipo recursiva.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const data: Json = { id: 1, tags: ["a", "b"] };
console.log(JSON.stringify(data));

Perguntas Frequentes

A aula “Tipos de Valores JSON” é grátis?

Sim — o texto completo de “Tipos de Valores 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 4 aulas no total.

O que vou aprender em “Tipos de Valores JSON”?

Defina um tipo completo e seguro para valores JSON. 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 3 de 4.

Quanto tempo leva a aula “Tipos de Valores 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

← Voltar para TypeScript Academy