JSON a TypeScript - Generar Interfaces y Tipos Online
Pega JSON y genera interfaces, tipos y enums TypeScript al instante. Convierte respuestas API a código type-safe — 100% en tu navegador.
Preguntas Frecuentes
Que es un convertidor de JSON a TypeScript?
Un convertidor de JSON a TypeScript es una herramienta que genera automaticamente interfaces o alias de tipo de TypeScript a partir de datos JSON. En lugar de escribir manualmente las definiciones de tipo para tus respuestas de API o archivos de configuracion, pegas un objeto JSON de muestra y la herramienta infiere los tipos correctos de TypeScript para cada campo.
Como genero interfaces de TypeScript a partir de JSON?
Simplemente pega tus datos JSON en el campo de entrada del lado izquierdo. La herramienta generara instantaneamente interfaces de TypeScript en el panel de salida de la derecha. Puedes personalizar la salida configurando el nombre de la interfaz raiz, eligiendo entre la sintaxis 'interface' y 'type', y ajustando otras opciones de formato.
Debo usar interface o type alias de TypeScript?
Ambos funcionan para definir formas de objetos, pero tienen diferencias. Las interfaces son generalmente preferidas para definiciones de objetos porque pueden extenderse con 'extends' y fusionarse con la fusion de declaraciones. Los alias de tipo son mas versatiles y pueden representar uniones, intersecciones y tipos primitivos.
Como maneja el convertidor los objetos JSON anidados?
Cuando la herramienta encuentra un objeto anidado, crea una interfaz nombrada separada para el. Por ejemplo, si tu JSON tiene un objeto 'user' con un sub-objeto 'address', la herramienta genera tanto una interfaz 'User' como una interfaz 'Address'. Tambien puedes elegir 'tipos anidados en linea' en las opciones.
Estan seguros mis datos JSON al usar esta herramienta?
Si, completamente. Esta herramienta procesa todo en tu navegador usando JavaScript del lado del cliente. Tus datos JSON nunca salen de tu computadora - no hay cargas al servidor, no hay llamadas API y no hay almacenamiento de datos.
Como maneja la herramienta los valores null en JSON?
Cuando un campo JSON tiene un valor null, la herramienta genera un tipo union con null, como 'field?: string | null'. La propiedad se marca como opcional con el modificador '?'. Esto asegura que tus tipos de TypeScript representen con precision la naturaleza nullable de los datos.
Que pasa con los arrays que contienen tipos mixtos?
Si un array JSON contiene elementos de diferentes tipos, la herramienta genera un tipo de array union como '(string | number)[]'. Para arrays de objetos con diferentes formas, la herramienta fusiona los tipos de objetos en una sola interfaz con propiedades opcionales. Los arrays vacios se tipan como 'unknown[]'.
Ejemplos de Codigo
// JSON to TypeScript interface generator
function jsonToTypeScript(json, rootName = 'Root') {
const interfaces = [];
function inferType(value, name) {
if (value === null) return 'null';
if (Array.isArray(value)) {
if (value.length === 0) return 'unknown[]';
const types = [...new Set(value.map((item) => inferType(item, name + 'Item')))];
const typeStr = types.length > 1 ? `(${types.join(' | ')})` : types[0];
return `${typeStr}[]`;
}
if (typeof value === 'object') {
const interfaceName = toPascalCase(name);
const properties = Object.entries(value).map(([key, val]) => {
const type = inferType(val, key);
const optional = val === null ? '?' : '';
return ` ${key}${optional}: ${type};`;
});
interfaces.push(`interface ${interfaceName} {\n${properties.join('\n')}\n}`);
return interfaceName;
}
return typeof value;
}
function toPascalCase(str) {
return str.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase());
}
const parsed = JSON.parse(json);
inferType(parsed, rootName);
return interfaces.reverse().join('\n\n');
}
const json = '{"name": "Alice", "age": 30, "address": {"city": "NYC"}}';
console.log(jsonToTypeScript(json));