Ugrás a fő tartalomra
LibraTool logoLibraTool

Ingyenes JSON–TypeScript konvertáló

Generálj TypeScript interfészeket vagy típusaliasokat bármely JSON-objektumból vagy tömbből. Illeszd be a JSON-t, és kapj azonnal használható TypeScript típusokat.

Betöltés után offline is működik
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

Gyakori felhasználások

  • TypeScript típusok létrehozása az API-válaszokbólIllessz be egy API JSON válaszát, és azonnal generálj TypeScript interfészeket a tipo-biztonságos előtér-kódhoz.
  • TypeScript típusok a konfiguráció és beállítások objektumokhozGenerálj TypeScript interfészeket a JSON konfigurációs fájlokból, hogy hozzáadod a tipo-biztonságot az alkalmazás beállításaihoz.
  • TypeScript típusok létrehozása az adatbázis-rekordokbólAz JSON-ből exportált adatbázis-rekordok vagy ORM-lekérdezési eredmények konvertálása TypeScript interfészekre az adatréteg gépeléshez.
  • Típus mock adatok és teszt-kereteketGenerálj TypeScript interfészeket a JSON mock adatokból és teszt-keretekből az egység tesztek és Storybook történetek gépeléshez.
  • Típus harmadik fél API válaszokGenerálj TypeScript interfészeket a harmadik fél API válaszaiból, ahol a hivatalos típusok hiányoznak vagy elavultak.

Hogyan működik

Ez az eszköz egy kézzel írt rekurzív típuskövetkeztető algoritmust használ nulla külső könyvtárral — JSON.parse a bemenet ellenőrzéséhez és elemzéséhez, majd egy egyéni bejárás, amely végigmegy a JSON fa minden értékén, és közvetlenül a böngészőben ad ki TypeScript interface vagy type deklarációkat. Semmi nem kerül elküldésre egy szerverre.

  1. 1
    JSON elemezve és ellenőrizve
    Bemenete a JSON.parse-nak kerül átadásra. Ha sikertelen, a pontos elemzési hiba azonnal megjelenik a bemenet alatt. Egy sikeres elemzés egy tipizált értékfát ad, amely az átváltás többi részét hajtja.
  2. 2
    Rekurzív típuskövetkeztetés
    Egy rekurzív getType függvény végigmegy minden csomóponton: a primitívek string, number, boolean vagy null-ra képeződnek le; az objektumok egy új megnevezett interfacet váltanak ki; az objektumtömbök kulcsai összevonásra kerülnek minden elemen, így a csak néhány elemben jelen lévő kulcsok opcionálissá válnak, és az ütköző értéktípusok |-vel kerülnek összekapcsolásra.
  3. 3
    Ütközésmentes interface-elnevezés
    Minden egymásba ágyazott objektum egy PascalCase nevet kap, amely JSON kulcsából származik (a snake_case, kebab-case és szóközök mind normalizálva vannak). Ha két szerkezetileg különböző objektum ugyanazt a nevet osztaná, egy numerikus utótag kerül hozzáfűzésre (Data, Data2, …), ahelyett hogy csendben felülírná a korábbi definíciót.
  4. 4
    Kimenet renderelve és letölthető
    Az egymásba ágyazott interface-ek kerülnek először kiadásra, majd a gyökértípus, formázva export interface-ként vagy export type-ként, az Ön kiválasztásától függően. Az eredmény a vágólapra másolható vagy .ts fájlként letölthető — minden egy standard Blob-bal épült, és szerver-oda-vissza nélkül.

Kapcsolódó eszközök

📋

JSON Schema-ból űrlap

Illeszd be a JSON Sémát, és kapj élő, működő űrlapot — szöveg, szám, jelölőnégyzet, legördülő és lista mezők — majd másold az inputjaid által előállított JSON-t. Kiváló API kérési törzsek prototípus-készítéséhez. A böngésződben fut.

Próbálja ki
⌨️

Gépelési sebesség teszt (WPM)

Mérd meg a gépelési sebességed (WPM) és pontosságod időzített, szó-, idézet-, egyéni és zen tesztekkel. Valós idejű WPM, nyers sebesség, konzisztencia, eredménygrafikon, több nyelv és karakterenkénti visszajelzés — mind a böngésződben.

Próbálja ki
📐

CSS clamp() generátor

Generálj folyékony CSS clamp() értéket reszponzív tipográfiához és közbeiktatáshoz. Állítsd be a min/max méretet és a nézetablak-tartományt, tekintsd meg az élő előnézetet, és másold az egysoros CSS-t.

Próbálja ki

Gyakran ismételt kérdések