Převodník JSON na TypeScript

Vložte odpověď API a získejte hotová rozhraní TypeScript nebo aliasy typů, s odvozenými vnořenými typy, volitelnými poli a uniemi s null.

Běží v prohlížečiBez registraceNic se neodesílá

TypeScript

Jak používat: JSON na TypeScript

  1. Vložte ukázkový JSON, například odpověď API, do levého pole nebo otevřete soubor .json.
  2. Nastavte název kořenového typu (například User nebo ApiResponse).
  3. Zvolte deklarace interface nebo type a přepínejte export, readonly nebo všechna pole volitelná.
  4. Zvolte unknown (bezpečnější) nebo any pro hodnoty, které ukázka neodhalí, například prázdná pole a null.
  5. Zkopírujte vygenerovaný kód nebo ho stáhněte jako soubor .ts.

Jak se typy odvozují

  • Primitivní typy: řetězce, čísla a logické hodnoty se mapují na string, number a boolean.
  • Vnořené objekty se stanou vlastními pojmenovanými rozhraními v PascalCase, takže z billing_address vznikne BillingAddress.
  • Pole objektů se sloučí do jednoho typu položky pojmenovaného v jednotném čísle: users dá User[]. Klíč, který v některých položkách chybí, se stane volitelným (key?:).
  • Hodnoty null se spojí s ostatními hodnotami viděnými u daného klíče: string | null. Klíč, který je vždy jen null, dostane unknown nebo any.
  • Smíšená pole se stanou poli unií, například (number | string)[].
  • Shodné tvary se deklarují jednou a použijí znovu a různé tvary, které by měly stejný název, dostanou číselnou příponu.
  • Klíče, které nejsou platnými identifikátory, například "first-name" nebo "2fa", se dají do uvozovek.

interface vs. type

Pro obyčejné tvary objektů jsou oba téměř zaměnitelné. Deklarace interface lze rozšiřovat a slučovat a dávají o něco srozumitelnější chyby kompilátoru. Aliasy type umí vyjádřit i unie a mapované typy. Mnoho týmů používá rozhraní pro modely API a typy pro vše ostatní; zvolte to, co očekává váš kód nebo linter (@typescript-eslint/consistent-type-definitions).

Lepší typy z lepší ukázky

Typy mohou být jen tak úplné jako ukázka. Vložte odpověď, která obsahuje volitelná pole, nebo pole s několika různými položkami, aby generátor mohl rozpoznat volitelné a nullable klíče. Hodnoty jako data a výčty přicházejí v JSON jako obyčejné řetězce; zužte je pak ručně, například status: 'active' | 'disabled'. Pro validaci za běhu spojte vygenerované typy s knihovnou schémat, například Zod.

Časté dotazy

Odesílá se můj JSON?
Ne. Typy generuje JavaScript ve vašem prohlížeči. Odpovědi API s tokeny nebo osobními údaji nikdy neopustí vaše zařízení.
Jak se rozpoznají volitelné vlastnosti?
Když mají objekty ve stejném poli různé klíče, klíče chybějící alespoň v jednom objektu se označí jako volitelné pomocí ?. U jediného objektu je každý klíč povinný, pokud nezaškrtnete Vše volitelné.
Mám použít <code>unknown</code>, nebo <code>any</code>?
unknown je bezpečnější: TypeScript vás donutí hodnotu před použitím zúžit. any pro danou hodnotu kontrolu typů vypne. Použijte ho jen, pokud plánujete typy později upřesnit.
Proč má datum ISO typ <code>string</code>?
JSON nemá datový typ pro datum, takže data se přenášejí jako řetězce. Pokud je po parsování převádíte přes new Date(), změňte ve svém modelu typ vlastnosti na Date.
Zvládne velký nebo hluboce vnořený JSON?
Ano. Generování je lineární vzhledem k velikosti vstupu a běží lokálně, takže i vícemegabajtové odpovědi se převedou za zlomek sekundy.

Související nástroje

JSON formátovač Formátujte, minifikujte a validujte JSON s chybami na řádek a sloupec. JSON Diff Porovnejte dva JSON objekty a vypište změny podle cest. YAML na JSON Převeďte konfigurace YAML na JSON s podporou více dokumentů a přesnými chybami. Převodník cURL Převeďte příkazy curl na kód fetch, Axios, Python, Go nebo PHP.