JSON to TypeScript Converter

Mag-paste ng API response at makakuha ng handang gamitin na TypeScript interface o type alias, kasama ang nested type, optional na field at null union na awtomatikong natukoy.

Tumatakbo sa browser moWalang sign-upWalang ina-upload

TypeScript

Paano gamitin ang JSON to TypeScript

  1. Mag-paste ng sample na JSON, gaya ng API response, sa kaliwang box o magbukas ng .json na file.
  2. Itakda ang pangalan ng root type (halimbawa User o ApiResponse).
  3. Pumili ng interface o type na declaration at i-toggle ang export, readonly o all-optional na field.
  4. Piliin ang unknown (mas ligtas) o any para sa mga value na hindi maipakita ng sample, gaya ng empty array at null.
  5. Kopyahin ang na-generate na code o i-download ito bilang .ts na file.

Paano natutukoy ang mga type

  • Mga primitive: nagiging string, number at boolean ang mga string, number at boolean.
  • Mga nested object ay nagiging sariling named interface sa PascalCase, kaya nagiging BillingAddress ang billing_address.
  • Mga array ng object ay pinagsasama sa iisang item type na nasa singular na pangalan: nagbibigay ang users ng User[]. Nagiging optional (key?:) ang key na wala sa ilang item.
  • Mga null value ay sinasama sa ibang value na nakita para sa key na iyon: string | null. Ang key na laging null lang ay bumabagsak sa unknown o any.
  • Mga halo-halong array ay nagiging union array gaya ng (number | string)[].
  • Magkaparehong hugis ay dine-declare nang isang beses at ginagamit muli, at nilalagyan ng numeric suffix ang magkaibang hugis na magkakapareho sana ng pangalan.
  • Mga key na hindi valid na identifier, gaya ng "first-name" o "2fa", ay nilalagyan ng quote.

interface vs. type

Para sa mga simpleng object shape, halos mapagpapalit ang dalawa. Puwedeng i-extend at i-merge ang mga interface declaration, at medyo mas malinaw ang compiler error nila. Kaya rin ng mga type alias na magpahayag ng union at mapped type. Maraming team ang gumagamit ng interface para sa API model at type para sa lahat ng iba pa; piliin kung ano ang inaasahan ng iyong codebase o linter (@typescript-eslint/consistent-type-definitions).

Makakuha ng mas magandang type mula sa sample mo

Kasing-kumpleto lang ng sample ang mga type. Mag-paste ng response na may mga optional na field, o array na may ilang magkakaibang item, para matukoy ng generator ang mga optional at nullable na key. Dumarating bilang plain string sa JSON ang mga value gaya ng petsa at enum; paliitin ang mga ito nang mano-mano pagkatapos, halimbawa status: 'active' | 'disabled'. Para sa runtime validation, ipares ang na-generate na type sa isang schema library gaya ng Zod.

Mga madalas itanong

Ina-upload ba ang JSON ko?
Hindi. Ginagawa ng JavaScript sa iyong browser ang mga type. Hindi kailanman umaalis sa iyong device ang mga API response na may token o personal na data.
Paano natutukoy ang mga optional na property?
Kapag magkakaiba ang key ng mga object sa iisang array, minamarkahang optional gamit ang ? ang mga key na wala sa kahit isang object. Kapag iisang object lang, required ang bawat key, maliban kung i-tick mo ang Lahat optional.
<code>unknown</code> ba o <code>any</code> ang dapat kong gamitin?
Mas ligtas ang unknown: pinipilit ka ng TypeScript na paliitin muna ang value bago ito gamitin. Pinapatay naman ng any ang type checking para sa value na iyon. Gamitin lang ito kung balak mong pinuhin ang mga type sa ibang pagkakataon.
Bakit <code>string</code> ang type ng ISO date?
Walang date type ang JSON, kaya string ang mga petsa habang ipinapadala. Kung kino-convert mo ang mga ito gamit ang new Date() pagkatapos mag-parse, palitan ang property ng Date sa iyong model.
Kaya ba nito ang malaki o malalim na nested na JSON?
Oo. Linear sa laki ng input ang pag-generate at lokal itong tumatakbo, kaya nako-convert nang wala pang isang segundo ang mga response na ilang megabyte.

Mga kaugnay na tool

JSON Formatter I-beautify, i-minify at i-validate ang JSON na may linya/column ng error. JSON Diff Ikumpara ang dalawang JSON object at ilista ang pagbabago ayon sa path. YAML to JSON I-convert ang YAML config sa JSON, may multi-document na suporta at eksaktong error. cURL Converter Gawing fetch, Axios, Python, Go o PHP code ang curl command.