JSON para TypeScript

Converta automaticamente dados JSON para interfaces TypeScript ou definições de tipo

Entrada JSON
Linhas: 1 | Caracteres: 0
Saída TypeScript
// Definições de tipo TypeScript serão geradas automaticamente
Tipos: 0 | Linhas: 1

O que é JSON para TypeScript?

JSON para TypeScript é uma ferramenta que converte automaticamente dados JSON para definições de tipo TypeScript. Ela analisa a estrutura JSON e gera declarações de interface ou tipo correspondentes, ajudando desenvolvedores a alcançar segurança de tipo e sugestões de código em projetos TypeScript.

Como Usar

  1. Cole dados JSON na caixa de entrada esquerda, ou clique botão de exemplo para carregar um exemplo
  2. Configure opções: defina nome do tipo raiz, escolha estilo interface/type, se adiciona export, etc.
  3. As definições de tipo TypeScript correspondentes são geradas automaticamente à direita
  4. Clique o botão 'Copiar' para copiar as definições de tipo geradas para a área de transferência
  5. Cole as definições de tipo em seu projeto TypeScript para usar

Exemplos

Conversão de Objeto Simples

输入 JSON:
{
  "name": "张三",
  "age": 28,
  "isActive": true
}

输出 TypeScript:
export interface Root {
  name: string;
  age: number;
  isActive: boolean;
}

Conversão de Objeto Aninhado

输入 JSON:
{
  "user": {
    "id": 1,
    "profile": {
      "avatar": "url",
      "bio": "简介"
    }
  }
}

输出 TypeScript:
export interface UserProfile {
  avatar: string;
  bio: string;
}

export interface User {
  id: number;
  profile: UserProfile;
}

export interface Root {
  user: User;
}

FAQ

Q: Como uso os tipos gerados?

A: Copie as definições de tipo geradas para um arquivo .ts, então use-os em seu código. Por exemplo: const data: Root = JSON.parse(response)

Q: Qual a diferença entre interface e type?

A: interface pode ser estendida e implementada, adequada para definir tipos de objeto; type é mais flexível e pode definir tipos union, intersection, etc. Para estruturas de objeto simples, ambos funcionam similarmente.

Q: Como JSON de tipo array é tratado?

A: A ferramenta reconhece automaticamente tipos de elementos de array. Para arrays de objetos, definições de tipo separadas são geradas para elementos do array, então representadas usando ItemType[].

Q: Os tipos gerados podem ser editados?

A: Sim, podem ser livremente editados após geração. Recomendamos ajustar nomes de tipo, adicionar marcadores de campo opcional (?) ou modificar definições de tipo para alguns campos conforme necessário.