JSON a TypeScript
Eina gratuïta en línia JSON a TypeScript. Inferix automàticament les dades JSON en definicions de tipus d'interfície TS estàndard. Admet sub-interfícies imbricades, tipus d'unió de matrius, camps opcionals i readonly, opció d'indentació 2/4 espais, processament completament local al navegador sense pujada.
Relacionats
Sobre JSON a TypeScript: Convertir Dades JSON Automàticament en Tipus TS
JSON a TypeScript és el procés de convertir dades en format JSON (objectes JSON o matrius JSON) en declaracions de tipus d'interfície TypeScript. JSON (JavaScript Object Notation) com a format de dades estàndard per a API REST, fitxers de configuració i registres és omnipresent en el desenvolupament frontend i backend, mentre que TypeScript és un superconjunt de JavaScript, afegint comprovació de tipus estàtica al codi. En el desenvolupament, sovint cal escriure una interfície TS corresponent per al JSON retornat per l'API, l'escriptura manual és propensa a errors i porta temps — aquesta eina pretén automatitzar aquest procés.
El nucli de l'eina és la inferència automàtica de l'estructura de l'objecte JSON en una interfície TypeScript. Cada clau de l'objecte JSON es converteix en el nom de la propietat de la interfície, cada tipus literal del valor es mapeja al tipus TS corresponent: cadena a `string`, número a `number`, booleà a `boolean`, null a `null`, matriu a `T[]`, objecte imbricat a sub-interfície independent. Tot el procés es completa localment al navegador, sense necessitat de servei backend, en qüestió de segons es genera una definició de tipus completa i utilitzable.
La inferència de tipus és el nucli de la conversió JSON a TypeScript. El propi JSON només té 6 tipus bàsics (null, boolean, number, string, array, object), mentre que el sistema de tipus bàsics de TypeScript inclou string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], tipus d'unió (A | B), etc. La funció getTsType de la nostra eina mapeja segons el typeof i la forma específica del valor: typeof null es mapeja a `null`; typeof undefined a `undefined`; typeof boolean a `boolean`; typeof number a `number`; typeof string a `string`; quan Array.isArray() coincideix, es processa com a matriu.
La gestió d'objectes imbricats és una capacitat clau de l'eina. Quan el JSON conté objectes imbricats, l'eina genera recursivament sub-interfícies independents, evitant la duplicació de tipus. Per exemple, `address: { street, city }` generarà la sub-interfície `RootAddress`, i la interfície principal la referenciarà a través de `address: RootAddress`. La regla de nomenclatura de les sub-interfícies: "nom de la interfície pare + primera lletra del nom del camp en majúscula", mantenint la claredat semàntica. El Set processedTypes s'utilitza per a la desduplicació, els objectes imbricats amb la mateixa estructura només generen la interfície una vegada.
La inferència de tipus de matrius té tres modes de processament. Primer, quan la matriu està buida, es genera `any[]` com a alternativa (perquè no es pot inferir el tipus d'element). Segon, quan tots els elements són del mateix tipus, es genera la forma `T[]` (p. ex. `string[]`, `User[]`). Tercer, quan els tipus d'element no són consistents, es genera una matriu d'unió `(A | B)[]` (p. ex. `(string | number)[]`). Aquesta distinció fa que els tipus generats siguin precisos i llegibles, evitant l'ús excessiu de `any[]`.
Els camps opcionals (?) són una característica important del mode TypeScript strict. Quan s'activa, l'eina escaneja el valor de cada camp, i si és null o undefined, afegeix el modificador `?` a la interfície: `name?: string` indica que el camp és opcional. Això és molt útil per a camps opcionals retornats per l'API del backend, evitant errors en temps d'execució en accedir a camps undefined. Els camps readonly emfatitzen la inmutabilitat, el codi generat té la forma `readonly id: number`, adequat per definir configuracions, instantànies d'estat, DTO, etc.
interface vs type alias és una elecció habitual per als usuaris de TypeScript. Aquesta eina ha triat generar interface de manera coherent, perquè interface és la manera estàndard de descriure tipus d'objectes a TypeScript, admet la fusió de declaracions (declaration merging), la paraula clau implements, l'herència extends, i s'adapta millor als estàndards de codificació dels projectes frontend principals React, Vue, Angular. type alias és més potent a l'hora de descriure tipus d'unió, tipus d'intersecció, tipus de funció, però per a tipus d'objectes es prefereix interface.
La conversió en temps real és una característica pràctica de l'eina. Després que l'usuari introdueixi JSON, el debounce de 400ms activa automàticament la conversió, sense necessitat de fer clic manualment en cap botó. Combinat amb el ressaltat de sintaxi TypeScript de CodeMirror (a través de l'opció typescript: true a @codemirror/lang-javascript), l'usuari pot veure immediatament la interfície generada, modificar l'entrada i observar els canvis de la sortida. Aquesta retroalimentació en temps real millora significativament l'eficiència del disseny de tipus, especialment durant la prova i error ràpida.
L'autoreparació d'errors JSON millora la robustesa de l'eina. A la pràctica, el JSON introduït pels usuaris sovint té petits problemes com comes finals, cometes simples, falta de cometes, comentaris, etc. La funció tryFixJSON integrada intentarà automàticament reparar errors comuns quan JSON.parse falli, notificant l'usuari si la reparació té èxit; si encara no es pot analitzar, es mostra la ubicació i el motiu específic de l'error a la dreta, guiant l'usuari a corregir-ho. Aquest disseny porta la practicitat de l'eina a un nivell superior, eliminant la necessitat d'ajustaments manuals repetits per petits errors.
El processament purament frontend és l'arquitectura central d'aquesta eina. Tota l'anàlisi JSON, la inferència de tipus i la generació d'interfícies s'executen al JavaScript del navegador, sense enviar dades a cap servidor. Aquest disseny té dos beneficis clau: primer, el contingut JSON pot incloure informació sensible de l'usuari (claus API, tokens, dades d'usuari), el processament local elimina completament el risc de filtració; segon, la velocitat de conversió només està limitada per la CPU del dispositiu, JSON de menys d'1MB es converteix gairebé instantàniament, sense esperar el viatge d'anada i tornada de la xarxa. En comparació amb alguns serveis en línia que requereixen registre i inici de sessió, això proporciona una millor protecció de la privadesa i rendiment.
Casos d'ús
- En el desenvolupament frontend, convertir ràpidament respostes JSON de REST API o GraphQL a interfícies TS, evitant escriure definicions de tipus manuals.
- Quan els projectes React/Vue/Angular necessiten declaracions de tipus per a Props, State, paràmetres de components, generar en qüestió de segons a partir de JSON de mostra.
- En projectes TypeScript full-stack, quan el frontend i el backend comparteixen definicions de tipus, el mock JSON del backend pot servir com a font de tipus per al frontend.
- Quan s'integra amb API de tercers (transport, meteorologia, pagaments, etc.), generar ràpidament les interfícies TypeScript corresponents, eliminant la necessitat d'estudiar la documentació.
- Inferir definicions de tipus a partir de dades mock, fixtures de prova, fitxers de configuració JSON per enfortir la seguretat de tipus i els suggeriments de l'IDE.
- Convertir JSON Schema exportats per ORM de bases de dades a interfícies TypeScript per integrar-les en definicions DTO del backend Node.js.
- Quan s'aprèn TypeScript, convertir JSON existent a exemples d'interfície per entendre la sintaxi de tipus imbricats, tipus d'unió i camps opcionals.
- Durant la refactorització del codi, convertir literals d'objecte JS dispersos en interfícies formals, millorant la llegibilitat del codi i la seguretat de tipus.
Com usar-ho
- Enganxeu el contingut JSON al quadre d'entrada esquerre, o feu clic al botó "Pujar" per seleccionar un fitxer .json/.txt, o feu clic a "Mostra" per carregar una mostra integrada.
- Feu clic al botó de nom d'interfície a la dreta de la barra d'eines (o la icona de configuració), personalitzeu el nom de la interfície arrel (per defecte Root), activeu els camps opcionals/readonly.
- L'eina convertirà automàticament (debounce de 400ms després de l'entrada); reviseu el codi d'interfície TypeScript generat a la dreta, el ressaltat de CodeMirror facilita la lectura.
- Seleccioneu l'estil d'indentació (2 o 4 espais), ajusteu l'amplada del panell esquerre/dret de la barra d'eines per obtenir la millor experiència de visualització.
- Feu clic a "Copiar" per copiar el codi TS al porta-retalls, o "Descarregar" per desar com a fitxer `${interfaceName}.ts` (p. ex. User.ts).
- Enganxeu el codi al directori `types/` o `src/types/` del vostre projecte, utilitzeu mitjançant import segons calgui.
Característiques
- Inferència intel·ligent de tipus: reconeix automàticament tipus null, boolean, number, string, array, object, etc. i els mapeja a la sintaxi TS nativa.
- Expansió automàtica d'objectes imbricats: crea automàticament sub-interfícies independents per a objectes imbricats (p. ex. RootAddress), mantenint una jerarquia de tipus clara i evitant la redundància.
- Gestió intel·ligent de tipus de matrius: genera `T[]` per a elements del mateix tipus, matriu d'unió `(A | B)[]` per a tipus mixtos, `any[]` com a alternativa per a matrius buides.
- Marcar camps opcionals: quan s'activa, detecta automàticament els camps null/undefined, afegeix el modificador `?`, generant codi compatible amb el mode TypeScript strict.
- Suport per a camps readonly: quan s'activa, afegeix el modificador `readonly` a tots els camps, adequat per a estats immutables, configuracions, DTO, etc.
- Personalització del nom de la interfície: el nom de la interfície arrel és configurable (per defecte Root), el nom del fitxer descarregat també utilitza aquest nom (p. ex. User.ts).
- Indentació 2/4 espais seleccionable: commuta amb un sol clic a la barra d'eines entre l'estil de 2 espais (predeterminat ESLint) i 4 espais.
- Conversió automàtica en temps real: 400ms després de l'entrada JSON, es produeix el debounce i la conversió automàtica, sense fer clic en cap botó; admet enganxar, pujar fitxers, mostra - tres mètodes d'entrada.
- Autoreparació d'errors JSON: la funció de reparació tryFixJSON integrada gestiona automàticament comes finals, cometes simples, falta de cometes i altres errors de sintaxi habituals.
- Ressaltat de codi TypeScript: la sortida dreta utilitza el ressaltat CodeMirror + JavaScript (TypeScript), amb alta llegibilitat.
- Copiar i descarregar: copiar al porta-retalls amb un sol clic, o descarregar com a fitxer .ts estàndard per utilitzar directament a projectes frontend.
- Processament completament local al navegador: tota l'anàlisi JSON, la inferència de tipus i la generació d'interfícies s'executen al JavaScript del navegador, les dades originals no es pugen.
Preguntes freqients
Com es converteix JSON a una interfície TypeScript?
Enganxeu el contingut JSON al quadre d'entrada esquerre, l'eina inferirà automàticament el tipus de cada camp (string, number, boolean, array, object, etc.) i generarà una definició d'interfície TypeScript estàndard. Els objectes imbricats crearan automàticament sub-interfícies, mantenint una jerarquia de tipus clara. La conversió passa automàticament 400ms després de l'entrada, sense necessitat de fer clic en cap botó.
S'admet la generació de type alias o interface?
Aquesta eina només genera declaracions d'interfície TypeScript (no s'admet type alias). La interfície és la manera estàndard de descriure tipus d'objectes a TypeScript, admet la fusió de declaracions (declaration merging) i la paraula clau implements, i és la preferida per a projectes frontend React, Vue, Angular.
Com es marquen els camps opcionals?
Activant "Camps opcionals (?)" a la configuració, l'eina detectarà automàticament els camps amb valor null o undefined i afegirà el modificador `?` a la interfície. Per exemple, `name?: string` indica que el camp és opcional. El codi generat compleix l'especificació del mode estricte TypeScript strict.
Com es generen els camps readonly?
Activant "Camps readonly" a la configuració, tots els camps rebran automàticament el modificador `readonly`, per exemple `readonly id: number`. La interfície generada emfatitza la inmutabilitat, adequada per definir configuracions, instantànies d'estat o DTO.
Com es gestionen els tipus de matrius?
L'eina analitza els tipus dels elements de la matriu. Si tots els elements són del mateix tipus, es genera la forma `T[]` (p. ex. `string[]`); si els tipus són diferents, es genera una matriu d'unió `(A | B)[]` (p. ex. `(string | number)[]`); si la matriu està buida, es genera `any[]` com a alternativa.
Els objectes imbricats generen múltiples interfícies?
Sí. Cada objecte imbricat genera una sub-interfície independent, regla de nomenclatura: "nom de la interfície pare + primera lletra del nom del camp en majúscula". Per exemple, si Root conté un objecte address, es generaran les interfícies Root i RootAddress. Les sub-interfícies es referencien automàticament entre si, evitant la duplicació de definicions de tipus.
Es pot personalitzar el nom de la interfície?
Sí. Fent clic al botó de nom d'interfície a la dreta de la barra d'eines (o a la configuració), podeu personalitzar el nom de la interfície arrel (per defecte Root). El fitxer .ts descarregat també s'anomenarà amb aquest nom (p. ex. `User.ts`). Els noms de les sub-interfícies es generen automàticament segons el nom arrel.
El fitxer .ts descarregat es pot utilitzar directament al projecte?
Sí. El codi generat compleix els estàndards de codificació de TypeScript, conté definicions de tipus completes, interfícies imbricades, inferència de tipus d'unió, etc., i es pot copiar directament a projectes React, Vue, Angular o Node.js. El nom del fitxer descarregat és `${interfaceName}.ts`, per exemple User.ts.
Què fer si l'anàlisi del JSON falla?
Si el JSON té errors habituals com comes finals, falta de cometes, cometes simples en lloc de dobles, l'eina cridarà automàticament tryFixJSON per intentar la reparació. Si la reparació té èxit, s'informarà l'usuari; si no es pot reparar, es mostrarà la ubicació i el motiu específic de l'error a la dreta. Podeu tornar a formatar amb indentació de 2/4 espais i tornar-ho a provar.
Quines estructures de dades JSON s'admeten?
S'admeten totes les estructures de dades JSON vàlides: tipus bàsics (null, boolean, number, string), matrius (uni o multidimensionals), objectes imbricats (qualsevol profunditat), matrius de tipus mixtos (generen tipus d'unió). Entrades no admeses: JSON que conté funcions, Symbol, undefined i altres valors especials de JavaScript (aquests no són JSON vàlids).
Es pot triar el nombre d'espais d'indentació?
Sí. Hi ha un menú desplegable de configuració d'indentació a la dreta de la barra d'eines, que admet dos estils: 2 i 4 espais. 2 espais és l'estil predeterminat d'ESLint/Prettier, 4 espais és adequat per a projectes que necessiten una indentació més solta. El codi generat manté una indentació coherent per a la llegibilitat i el manteniment.
Quina diferència hi ha amb JSON Schema, Zod i altres biblioteques de tipus?
JSON Schema és adequat per a la validació de dades en temps d'execució (límits d'API, validació d'entrada d'usuari); Zod/yup són biblioteques de validació en temps d'execució amigables amb TypeScript, poden generar tipus TS a partir d'un esquema; la nostra eina és un generador de definicions de tipus pur lleuger, no realitza validació en temps d'execució, centrat en escenaris de definició de tipus estàtics de frontend, més ràpid i sense dependències.
Solució de problemes
Què fer si la interfície generada no és correcta?
Causes habituals: error d'anàlisi JSON, error de reconeixement d'objectes imbricats, error d'inferència de tipus de matriu. Solucions: 1) Comproveu si el JSON és vàlid (utilitzeu una eina de formatació JSON); 2) Per a objectes imbricats, confirmeu les relacions de referència de les sub-interfícies; 3) Per a matrius, confirmeu si els tipus d'element són consistents; 4) Regenerar o ajustar manualment el codi generat. La interfície generada és un esborrany, cal ajustar els detalls segons l'API real del projecte.
El fitxer .ts descarregat dóna errors de compilació al projecte?
Possibles causes: 1) tsconfig.json no té activat el mode strict però s'han generat camps readonly; 2) El nom de la interfície xoca amb altres tipus al projecte; 3) El nom del camp és una paraula clau de TypeScript (p. ex. `class`, `type`). Solucions: ajusteu la configuració strict de tsconfig, modifiqueu el nom de la interfície, afegiu escape amb cometes per als camps que xoquen (p. ex. `"class": string`).
El JSON conté matrius imbricades, la inferència de tipus no és correcta?
Aquesta eina processa recursivament les matrius multidimensionals (p. ex. `[[1, 2], [3, 4]]`), finalment generant `number[][]`. Si els tipus d'element de la matriu imbricada no són consistents, l'eina generarà la forma `((A | B)[])[]`. Les matrius buides sempre generen `any[]`, perquè no es pot inferir el tipus d'element.
El valor null es mapeja al tipus `null` en lloc d'un camp opcional?
Per defecte, l'eina mapeja el valor null al tipus `null` de TS (p. ex. `middleName: null`). Si voleu generar un camp opcional (`middleName?: string`), heu de: 1) Activar l'opció "Camps opcionals" (recomanat); 2) O canviar el valor null al JSON per absència del camp; 3) O canviar manualment `null` a `string | null` o `?` després de la generació.
El nom de la interfície i el nom del fitxer descarregat no coincideixen?
A l'eina, tots dos són el mateix valor, controlat per la configuració "Nom de la interfície" (per defecte Root). El nom del fitxer descarregat és `${interfaceName}.ts`. Si semblen no coincidir, comproveu si hi ha diverses pestanyes obertes que poden causar desincronització de la configuració. Es recomana regenerar després de canviar la configuració.
El codi generat té molts tipus `any`?
Possibles causes: 1) El JSON conté tipus no reconeixibles (en realitat és un objecte però s'ha analitzat malament); 2) La matriu està buida provocant l'alternativa any[]; 3) El valor del camp és null i l'opció de camps opcionals no està activada. Solucions: comproveu la integritat de les dades JSON, afegiu dades de mostra per millorar la inferència de l'eina, especifiqueu manualment el tipus per a matrius sempre buides (p. ex. `User[]`).
Vull combinar la interfície generada amb tipus existents?
La interfície de TypeScript admet la fusió de declaracions (declaration merging), les interfícies amb el mateix nom fusionen automàticament les seves propietats. Només cal crear una interfície amb el mateix nom al projecte i exportar-la, després combinar: per exemple, l'eina genera `export interface User { id: number }`, escriviu `export interface User { name: string }` al projecte, tots dos es fusionaran automàticament en `{ id: number; name: string }`.
Glossari
- JSON (JavaScript Object Notation)
- Format d'intercanvi de dades lleuger, basat en la sintaxi d'objectes de JavaScript però independent del llenguatge de programació. Admet 6 tipus bàsics: objecte ({}), matriu ([]), cadena, número, booleà, null. Àmpliament utilitzat en API REST, transmissió de dades frontend-backend, fitxers de configuració, registres, etc.
- TypeScript
- Superconjunt de JavaScript desenvolupat per Microsoft, afegeix a JavaScript definicions de tipus estàtiques, interfícies, genèrics i altres característiques. El codi TypeScript es compila a JavaScript pur per executar-se al navegador o Node.js. És el llenguatge preferit per a projectes frontend moderns React, Vue, Angular.
- interface (interfície)
- Paraula clau de TypeScript per descriure tipus d'objectes, sintaxi: `interface Name { prop: type; }`. Admet la fusió de declaracions (les interfícies amb el mateix nom es fusionen automàticament), implements (la classe implementa la interfície), extends (herència d'interfície). És la manera principal de descriure la forma dels objectes a TypeScript.
- type alias
- Paraula clau de TypeScript per donar àlies als tipus, sintaxi: `type Name = ...`. Es pot utilitzar per definir tipus d'unió (`A | B`), tipus d'intersecció (`A & B`), tipus de funció, etc. Més flexible que interface però no admet la fusió de declaracions. Aquesta eina utilitza interface, no type.
- Inferència de tipus (Type Inference)
- El procés pel qual aquesta eina determina automàticament el tipus TS corresponent segons el typeof i la forma específica del valor JSON. Per exemple, typeof string es mapeja a string, quan Array.isArray() coincideix, es processa com a matriu, quan typeof object coincideix, es genera una sub-interfície independent.
- Camp opcional (?)
- Modificador de TypeScript que indica que el camp pot ser opcional. `name?: string` indica que el camp name pot no existir (valor undefined). En activar l'opció "Camps opcionals" de l'eina, els camps amb valor null o undefined rebran automàticament `?`.
- Camp readonly (readonly)
- Modificador de TypeScript que indica que el camp és immutable. `readonly id: number` indica que el camp id no es pot reassignar després de la creació de l'objecte. En activar l'opció "Camps readonly" de l'eina, tots els camps rebran automàticament `readonly`.
- Tipus d'unió (Union Type)
- Sintaxi de TypeScript que indica que el valor pot ser d'un dels diversos tipus, escrit com `A | B`. L'eina l'utilitza quan els tipus d'element de la matriu no són consistents, per exemple `(string | number)[]` indica que els elements de la matriu poden ser string o number.
- Tipus de matriu (Array Type)
- Sintaxi de TypeScript per a matrius, existeix en dues formes: forma genèrica `Array<T>` i forma curta `T[]`. L'eina utilitza de manera coherent la forma curta. L'eina té tres modes de generació de tipus de matriu: tipus uniforme `T[]`, tipus mixt `(A | B)[]`, matriu buida `any[]`.
- Interfície imbricada (Nested Interface)
- Referenciar altres interfícies dins d'una interfície per formar una jerarquia de tipus. L'eina genera una sub-interfície independent per a cada objecte imbricat, la interfície principal hi referencia pel nom de la propietat. Per exemple, Root referencia RootAddress, RootAddress pot ser referenciada independentment per altres tipus.
- Mode TypeScript strict
- Mode estricte del compilador de TypeScript, inclou diverses subopcions: noImplicitAny, strictNullChecks, strictFunctionTypes, etc. Després d'activar strictNullChecks, null i undefined són tipus independents i no es poden assignar a variables d'altres tipus. Els camps opcionals generats per aquesta eina són totalment compatibles amb el mode strict.
- DTO (Data Transfer Object)
- Objecte de transferència de dades, utilitzat per transferir dades entre diferents capes (p. ex. API i capa Service). En projectes TypeScript normalment es descriu amb interface, combinat amb readonly emfatitza la inmutabilitat. Aquesta eina és una eina habitual per generar definicions de tipus DTO.
- Fusió de declaracions (Declaration Merging)
- Característica de la interfície de TypeScript: les interfícies amb el mateix nom fusionen automàticament les seves propietats. Sovint s'utilitza per estendre les definicions de tipus de biblioteques de tercers. Les interfícies generades per aquesta eina es poden fusionar amb altres interfícies del mateix nom al projecte, facilitant l'extensió de tipus progressiva.
- tsconfig.json
- Fitxer de configuració del projecte TypeScript, ubicat al directori arrel del projecte. Conté compilerOptions (target, module, strict, etc.), include, exclude i altres configuracions. Els fitxers .ts generats per aquesta eina es poden utilitzar en qualsevol projecte tsconfig estàndard.
- tryFixJSON
- Funció de reparació JSON integrada d'aquesta eina, que gestiona automàticament comes finals, substitució de cometes dobles per simples, falta de cometes en claus, comentaris i altres errors de sintaxi JSON habituals. Es crida automàticament quan JSON.parse falla, notifica l'usuari després d'una reparació exitosa i continua la conversió.
Regles de mapatge de tipus JSON a tipus TypeScript
Les regles completes amb què la funció getTsType de la nostra eina inferix els tipus TypeScript segons la forma del valor JSON:
| Valor JSON | Exemple | Tipus TypeScript | Regla de determinació |
|---|---|---|---|
null | null | null | JSON null es mapeja directament al tipus TS null |
undefined | undefined | undefined | El valor undefined es mapeja a TS undefined (només existeix en temps d'execució) |
boolean | true / false | boolean | typeof boolean es mapeja a TS boolean |
integer | 1, 100, -9999 | number | Els enters i els flotants es mapegen a TS number |
float | 3.14, -0.5, 1e10 | number | Tots els literals numèrics es mapegen a number (TS no diferencia int i float) |
string | "Alice", "Barcelona" | string | typeof string es mapeja a TS string |
empty array | [] | any[] | La matriu buida no permet inferir el tipus d'element, alternativa any[] |
homogeneous array | [1, 2, 3] | T[] (p. ex. number[]) | Elements del mateix tipus generen un sol tipus de matriu |
mixed array | [1, "a"] | (A | B)[] (p. ex. (number | string)[]) | Elements de tipus diferents generen un tipus de matriu d'unió |
object | {a: 1, b: "x"} | SubInterface (p. ex. Root) | L'objecte imbricat genera una sub-interfície independent i hi referencia |
Comparació interface vs type alias
Els motius pels quals aquesta eina genera interface en lloc de type alias, i les diferències entre tots dos en projectes TypeScript:
| Dimensió de capacitat | interface | type alias | Nota |
|---|---|---|---|
| Descripció de tipus d'objectes | ✓ (preferit) | ✓ (també admès) | Tots dos admesos, l'eina genera interface |
| Fusió de declaracions | ✓ (mateix nom auto-fusió) | ✗ (declaració duplicada dóna error) | interface admet extensió progressiva, type no |
| implements/extends | ✓ (la classe pot implementar) | △ (només type d'objecte pot ser implementat) | interface és més natural en escenaris OOP |
| Tipus d'unió (A | B) | ✗ | ✓ | type és més concís per a tipus d'unió |
| Tipus d'intersecció (A & B) | ✗ | ✓ | type és més concís per a tipus d'intersecció |
| Tipus de funció | △ (cal call signature) | ✓ (definició directa) | type és més intuïtiu per a tipus de funció |
| Rendiment (molts tipus) | Lleugerament més ràpid | Lleugerament més lent | interface és més ràpid amb la fusió incremental en temps de compilació |
| Elecció de l'eina | ✓ Ús coherent | ✗ | L'eina se centra en tipus d'objectes, interface és l'elecció òptima |
Regles de generació de camps opcionals i readonly
L'impacte de les dues opcions de commutació d'aquesta eina sobre el codi generat i els escenaris d'ús òptims:
| Opció | Condició d'activació | Sintaxi generada | Escenari d'ús òptim |
|---|---|---|---|
| Camp opcional (?): desactivat | (per defecte) | name: string | Tots els camps obligatoris, tipus estrictes |
| Camp opcional (?): activat | value === null || value === undefined | name?: string | Camps opcionals, dades que poden ser absents |
| Camp readonly (readonly): desactivat | (per defecte) | name: string | Tipus generals, camps modificables |
| Camp readonly (readonly): activat | Tots els camps es processen de manera coherent | readonly name: string | Estat immutable, configuracions, DTO, respostes API |
| Tots dos activats | Es compleixen les dues condicions | readonly name?: string | Instantànies de respostes API, configuracions opcionals |
Privacy & Security
Totes les operacions d'aquesta eina JSON a TypeScript s'executen completament localment al vostre navegador: l'anàlisi JSON, la inferència de tipus i la generació d'interfícies s'executen al JavaScript del navegador del costat del client, sense enviar el contingut JSON, els fitxers pujats o el codi generat a cap servidor a través de la xarxa. La pujada de fitxers utilitza l'API FileReader natiu del navegador per llegir directament a la memòria, sense passar per cap servei intermedi. No s'utilitza seguiment de cookies, no es recull cap entrada de l'usuari ni dades d'ús. Després de tancar o refrescar la pàgina, tot el contingut d'entrada i sortida s'esborra automàticament de la memòria. Apte per processar JSON que conté claus API, tokens, dades comercials sensibles.
Authoritative References
- Comprimir JSON
- CSV a JSON
- JSON a CSV
- JSON Diff
- JSON Escape / Unescape
- Aplanar JSON
- JSON Formatter
- Generador de JSON
- Consulta JSONPath
- Combinar JSON
- Reparació JSON
- Validador d'Esquema JSON
- Ordenar JSON
- JSON Stringify
- JSON a HTML
- JSON a Java
- JSON a Markdown
- JSON a SQL
- JSON a TOML
- JSON a TypeScript
- XML a JSON
- Converteix JSON a XML
- YAML a JSON
- JSON → YAML
- JSON a Python
- JSON a Go
- JSON a Rust
- JSON a Swift
- JSON a C#
- JSON a C++
- JSON a PHP