tigtools

JSON na TypeScript

Vložte odpověď nebo soubor JSON a získejte deklarace TypeScriptu, které můžete vložit do svého kódu.

Běží ve vašem prohlížeči Bez registrace

Deklarovat jako

Jak používat

  1. Vložte JSON do vstupního pole, otevřete soubor .json nebo si vyzkoušejte příklad.
  2. Nastavte název kořenového typu, například Order nebo ApiResponse.
  3. Zvolte deklarace interface nebo type a zda přidat export a readonly.
  4. Zkopírujte vygenerovaný TypeScript nebo si ho stáhněte jako types.ts.

Jak to funguje

Generátor projde celý dokument JSON a zaznamená typy hodnot nalezené na každém místě. Každý objekt JSON se stane vlastní pojmenovanou deklarací. Název vychází z klíče vlastnosti zapsaného ve formátu PascalCase, takže z „shipping_address“ vznikne ShippingAddress. Položky pole jsou pojmenovány podle jednotného čísla klíče: z „items“ vznikne Item, z „categories“ vznikne Category a klíče, které nevypadají jako množné číslo, dostanou příponu „Item“.

Všechny objekty uvnitř jednoho pole se sloučí do jednoho rozhraní (interface). Pokud se klíč objeví jen u některých z nich, označí se jako volitelný pomocí „?“. Pokud má hodnota na různých místech různé typy, je typ sjednocením, například string | number. null se ponechává jako vlastní typ, takže vlastnost, která je někdy null, bude string | null. Prázdné pole se stane unknown[], protože z něj nelze nic odvodit. Dva objekty se zcela stejnými vlastnostmi a typy sdílejí jedno rozhraní, aby nevznikaly duplicity. Klíče, které nejsou platnými identifikátory, jako například „first-name“, se uvádějí v uvozovkách.

Výsledek popisuje pouze vzorek, který vložíte. Vlastnost, která je ve skutečnosti volitelná nebo může být null, bude ve výstupu povinná a bez null, pokud to váš vzorek neukáže, a kalendářní data přijdou jako obyčejné řetězce. Než se na typy začnete spoléhat, zkontrolujte je podle dokumentace vašeho API.

Příklady

Typování odpovědi API

Vložte objednávku z API svého obchodu s kořenovým názvem Order. Získáte rozhraní Order, Customer, Item a Shipping, přičemž u Item bude note?: string, protože poznámku má jen jedna z obou položek.

Konfigurace jen pro čtení

Vložte config.json, zaškrtněte „Nastavit vlastnosti jen pro čtení“ a výsledek vložte do config.d.ts, aby kompilátor zachytil nechtěné zápisy do konfigurace.

Pole na nejvyšší úrovni

Endpoint se seznamem vrací [{…}, {…}]. S kořenovým názvem Product začne výstup řádkem „export type Product = ProductItem[];“ následovaným rozhraním ProductItem.

Časté dotazy

Proč je vlastnost ve výstupu volitelná?

Protože alespoň jeden objekt ve stejném poli tento klíč nemá. Pokud ho mají všechny objekty, je povinný. Vložte více záznamů, aby volitelné vlastnosti byly přesnější.

Proč je datum typu string?

JSON nemá typ pro datum, takže data putují jako řetězce. Generátor formáty neodhaduje. Pokud je váš kód převádí na objekty Date, změňte typ sami.

Jaký je rozdíl mezi interface a type?

U tvarů objektů fungují téměř stejně. Rozhraní (interface) lze pozdějšími deklaracemi rozšiřovat a slučovat; typové aliasy znovu otevřít nelze. Zvolte styl, který už vaše kódová základna používá.

Umí generovat runtime validaci, např. schémata Zod?

Ne. Vytváří pouze deklarace TypeScriptu, které se kontrolují při kompilaci a za běhu data neověřují.

Soukromí

Váš JSON je analyzován pouze ve vašem prohlížeči. Nic se nenahrává, neukládá ani nezahrnuje do analytiky.