JSON a TypeScript

Convierte automáticamente datos JSON a interfaces o definiciones de tipo TypeScript

Entrada JSON
Líneas: 1 | Caracteres: 0
Salida TypeScript
// Las definiciones de tipo TypeScript se generarán automáticamente
Tipos: 0 | Líneas: 1

¿Qué es JSON a TypeScript?

JSON a TypeScript es una herramienta que convierte automáticamente datos JSON a definiciones de tipo TypeScript. Analiza la estructura JSON y genera declaraciones de interface o type correspondientes, ayudando a los desarrolladores a lograr seguridad de tipos y sugerencias de código en proyectos TypeScript.

Cómo Usar

  1. Pega datos JSON en el cuadro de entrada izquierdo, o haz clic en el botón de ejemplo para cargar uno
  2. Configura las opciones: establece el nombre del tipo raíz, elige el estilo interface/type, si agregar export, etc.
  3. Las definiciones de tipo TypeScript correspondientes se generan automáticamente a la derecha
  4. Haz clic en el botón 'Copiar' para copiar las definiciones de tipo generadas al portapapeles
  5. Pega las definiciones de tipo en tu proyecto TypeScript para usarlas

Ejemplos

Conversión de Objeto Simple

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

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

Conversión de Objeto Anidado

输入 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;
}

Preguntas Frecuentes

Q: ¿Cómo uso los tipos generados?

A: Copia las definiciones de tipo generadas a un archivo .ts, luego úsalas en tu código. Por ejemplo: const data: Root = JSON.parse(response)

Q: ¿Cuál es la diferencia entre interface y type?

A: interface puede ser extendido e implementado, adecuado para definir tipos de objeto; type es más flexible y puede definir tipos de unión, tipos de intersección, etc. Para estructuras de objeto simples, ambos funcionan de manera similar.

Q: ¿Cómo se manejan los JSON de tipo array?

A: La herramienta reconoce automáticamente los tipos de elementos del array. Para arrays de objetos, se generan definiciones de tipo separadas para los elementos del array, luego se representan usando ItemType[].

Q: ¿Se pueden editar los tipos generados?

A: Sí, se pueden editar libremente después de la generación. Recomendamos ajustar los nombres de los tipos, agregar marcadores de campo opcional (?), o modificar las definiciones de tipo de algunos campos según sea necesario.