JSON-to-TypeScript ఇన్ఫెరెన్స్ ఎలా పనిచేస్తుంది
ఇన్ఫెరెన్స్ పార్స్ చేసిన JSON ట్రీపై ఒకే పాస్. టూల్ ప్రతి విలువ చదువుతుంది, దానికి TypeScript టైప్ ఎంచుకుంటుంది, అప్పుడు కనుగొన్న ప్రతి ఆబ్జెక్ట్కు ఒక ఇంటర్ఫేస్ వ్రాస్తుంది.
- బ్రౌజర్ నేటివ్ పార్సర్తో JSON శాంపిల్ పార్స్ చేయండి మరియు మాల్ఫార్మ్డ్ ఇన్పుట్ను లైన్/కాలమ్ హింట్తో తిరస్కరించండి.
- ప్రతి విలువకు TypeScript టైప్ స్నిఫ్ చేయండి —
string,number,boolean,null, అరే, లేదా నెస్టెడ్ ఆబ్జెక్ట్. - ప్రతి నెస్టెడ్ ఆబ్జెక్ట్కు దాని పేరెంట్ ప్రాపర్టీ కీ నుండి తీసుకోబడిన ఇంటర్ఫేస్ పేరు ఇవ్వండి (కాబట్టి
user.addressఒకAddressఇంటర్ఫేస్ అవుతుంది). - ప్రతి అరేలో ఐటెమ్ టైప్లు మర్జ్ చేయండి కాబట్టి
{id: 1}మరియు{id: 2, label: "x"}యొక్క లిస్ట్ సరైన ఆప్షనల్ ఫీల్డ్లతో యూనియన్ ఉత్పత్తి చేస్తుంది. - మీ ఆప్షన్లు వర్తించండి (interface vs. type, readonly, optional-nullable) మరియు ఫైల్ ఫార్వర్డ్ రిఫరెన్స్లు లేకుండా కంపైల్ అయ్యేలా డిపెండెన్సీ ఆర్డర్లో డిక్లరేషన్లు ఎమిట్ చేయండి.
JSON నుండి TypeScript టైప్లు ఎందుకు జెనరేట్ చేయాలి?
- రెస్పాన్స్ టైప్ వ్రాయబడి ఉంటే చాలా షేప్ బగ్లు కంపైల్ సమయంలో పట్టుకోవచ్చు. నిజమైన పేలోడ్ నుండి ఇంటర్ఫేస్ ఇన్ఫర్ చేయడం దాన్ని చాలా వరకు మీ కోసం వ్రాస్తుంది, మరియు `strict` మోడ్ డాక్స్ మిస్ చేసిన ఫీల్డ్ పట్టుకుంటుంది.
- Zod లేదా io-ts వంటి రన్టైమ్ వ్యాలిడేటర్తో ఇన్ఫర్ చేసిన ఇంటర్ఫేస్లు జత చేయడం వల్ల అదే షేప్కు రెండు పనులు వస్తాయి: డెవలప్మెంట్లో ఎడిటర్ ఆటోకంప్లీట్ మరియు ప్రొడక్షన్ ఊహించని ఏదైనా పంపినప్పుడు ఎడ్జ్లో 400.
- TypeScript యొక్క లాంగ్వేజ్ సర్వర్ అది తెలిసిన ఫీల్డ్లను మాత్రమే సర్ఫేస్ చేస్తుంది. ఇన్ఫర్ చేసిన ఇంటర్ఫేస్ ఇంపోర్ట్ చేసిన తర్వాత, మీరు డాట్ టైప్ చేసిన క్షణంలో ఆటోకంప్లీట్ పని చేస్తుంది — రెస్పాన్స్పై `as any` కాస్ట్ మరియు రెపో అంతటా నిరాశ గ్రెప్ ఇక అవసరం లేదు.
- మీరు OpenAPI స్పెక్ వ్రాయబోతే, ఇన్ఫర్ చేసిన ఇంటర్ఫేస్ రెస్పాన్స్ స్కీమా యొక్క వేగమైన మొదటి డ్రాఫ్ట్. మీకు ఇంకా చేతితో వ్రాసిన ఉదాహరణలు మరియు కన్స్ట్రెయింట్లు కావాలి, కానీ ప్రాపర్టీ పేర్లు మరియు టైప్లు ఇప్పటికే సరిగ్గా ఉన్నాయి.
సాధారణ అప్లికేషన్లు
రియల్ పేలోడ్ ఉన్నప్పుడు కానీ స్కీమా లేనప్పుడు ఇన్ఫెరెన్స్ చాలా సహాయపడుతుంది.
- హ్యాండ్లర్ వ్రాయడానికి ముందు Stripe, GitHub, లేదా Twilio నుండి థర్డ్-పార్టీ వెబ్హుక్ పేలోడ్లు టైప్ చేయడం.
- ఫ్రంటెండ్ టీమ్ బ్యాక్ఎండ్ ల్యాండ్ చేసిన అదే రోజు కోడింగ్ ప్రారంభించగలిగేలా ఇంటర్నల్ REST API కోసం టైప్లు బూట్స్ట్రాప్ చేయడం.
- గమనించిన API రెస్పాన్స్ నుండి Zod, io-ts, లేదా Valibot స్కీమా కోసం స్టార్టింగ్ పాయింట్ జెనరేట్ చేయడం.
ఔట్పుట్ ఎలా కనిపిస్తుంది?
శాంపిల్ JSON డాక్యుమెంట్ మరియు రూట్ పేరు ఇవ్వబడినప్పుడు, జెనరేటర్ ప్రతి నెస్టెడ్ ఆబ్జెక్ట్కు ఒకటి చొప్పున ఇంటర్ఫేస్ల ట్రీ ఉత్పత్తి చేస్తుంది. రూట్ పేరు User తో కింది ఇన్పుట్ కోసం:
రూట్ పేరు User తో {"id":1,"name":"Alice","tags":["a","b"],"address":{"city":"Paris"}} పేస్ట్ చేయండి, జెనరేటర్ ఉత్పత్తి చేస్తుంది:
export interface User {
id: number;
name: string;
tags: string[];
address: Address;
}
export interface Address {
city: string;
}
address దాని స్వంత పేరు పెట్టిన ఇంటర్ఫేస్కు ప్రమోట్ అయినట్లు గమనించండి — అది డిపెండెన్సీ-ఆర్డర్డ్ ఔట్పుట్. type డిక్లరేషన్ స్టైల్తో అదే JSON export type User = {...} ఎమిట్ చేస్తుంది; readonly టోగుల్ ఆన్తో, ప్రతి ప్రాపర్టీ readonly మాడిఫైయర్ పొందుతుంది.
జెనరేటర్ ఆప్షన్లు
డిక్లరేషన్ స్టైల్
interface (ఆబ్జెక్ట్ షేప్ల కోసం ప్రామాణిక TypeScript ఇడియం) లేదా type (మీకు తర్వాత మ్యాప్డ్ టైప్లు, కండిషనల్ టైప్లు, లేదా ఇంటర్సెక్షన్లు అవసరమయ్యే అవకాశం ఉంటే అనుకూలమైనది) ఎంచుకోండి. రెండూ ఐడెంటికల్ రన్టైమ్ ప్రవర్తన ఉత్పత్తి చేస్తాయి; ఎంపిక కోడింగ్-స్టైల్ ప్రాధాన్యత.
ఆప్షనల్ nullable ఫీల్డ్లు
శాంపిల్ విలువ null అయినప్పుడు, ఫీల్డ్ యొక్క టైప్ T | null అవుతుంది. ఈ ఆప్షన్ ఆన్ చేయడం ? మాడిఫైయర్ కూడా జోడిస్తుంది కాబట్టి TypeScript వైపు ఫీల్డ్ ఆప్షనల్ అవుతుంది — API కొన్నిసార్లు null తిరిగి ఇవ్వడానికి బదులు కీని పూర్తిగా వదిలిపెట్టినప్పుడు ఉపయోగపడుతుంది.
Readonly మాడిఫైయర్
ఎమిట్ చేసిన ఇంటర్ఫేస్ ఇమ్యూటబుల్ డేటా మోడల్కు సరిపోయేలా ప్రతి ప్రాపర్టీ డిక్లరేషన్కు readonly ముందు చేర్చుతుంది. Redux స్టేట్ స్లైస్లు, ఫ్రోజెన్ API రెస్పాన్స్లు, లేదా కంపైలర్ ఆకస్మిక మ్యుటేషన్ ఫ్లాగ్ చేయాలనుకునే చోట అనుకూలంగా ఉంటుంది.
ఇది నెస్టెడ్ ఆబ్జెక్ట్లు మరియు అరేలు సపోర్ట్ చేస్తుందా?
అవును. ప్రతి నెస్టెడ్ ఆబ్జెక్ట్ దాని పేరెంట్ ప్రాపర్టీ కీ నుండి తీసుకోబడిన పేరు పెట్టిన ఇంటర్ఫేస్ అవుతుంది, మరియు అరేలు వాటి కంటెంట్ల నుండి ఐటెమ్ టైప్ ఇన్ఫర్ చేస్తాయి. ఆబ్జెక్ట్ల అరేలు ఆబ్జెక్ట్ షేప్ వారీగా ఒక ఇంటర్ఫేస్ పొందుతాయి, షేప్లు అసమ్మతి చెందినప్పుడు యూనియన్ టైప్లతో.
ఆప్షనల్ ఫీల్డ్లు ఎలా ఇన్ఫర్ చేయబడతాయి?
"null-able ఫీల్డ్లను ఆప్షనల్గా మార్చండి" టోగుల్ ఆన్ చేయండి మరియు శాంపిల్ విలువ null అయిన ఫీల్డ్ కీపై ? మాడిఫైయర్ మరియు టైప్లో | null పొందుతుంది. టోగుల్ లేకుండా, ఫీల్డ్ రిక్వైర్డ్గా ఉంటుంది మరియు టైప్ కేవలం T | null.
ఇది డిస్క్రిమినేటెడ్ యూనియన్లు సపోర్ట్ చేస్తుందా?
అరే మిక్స్డ్-షేప్ ఐటెమ్లు కలిగి ఉన్నప్పుడు లేదా ఫీల్డ్ విలువ మరియు null రెండూ కలిగి ఉన్నప్పుడు బేసిక్ యూనియన్ టైప్లు వస్తాయి. పూర్తి డిస్క్రిమినేటెడ్-యూనియన్ ఇన్ఫెరెన్స్ (ట్యాగ్గా type లేదా kind ఎంచుకుని వేరియంట్లు విభజించడం) బహుళ శాంపిల్లు అవసరం — అది ప్లాన్ చేయబడింది కానీ ఇప్పటి బిల్డ్లో లేదు.
నేను బహుళ JSON శాంపిల్ల నుండి టైప్లు ఇన్ఫర్ చేయగలనా?
ఇంకా లేదు — ఈ రోజు ఇన్ఫెర్రర్ ఒక్కో శాంపిల్ చదువుతుంది. మీకు ఒక ఇంటర్ఫేస్ పంచుకోవాల్సిన రెండు పేలోడ్లు ఉంటే (అంటే, లిస్ట్ ఎండ్పాయింట్ మరియు సింగిల్-ఐటెమ్ ఎండ్పాయింట్), ఆచరణాత్మక వర్క్అరౌండ్ వాటిని ఒక అరేలో మర్జ్ చేయడం, దాని నుండి జెనరేట్ చేయడం, మరియు ఫలించిన యూనియన్ టైప్లు రీనేమ్ చేయడం. మల్టీ-శాంపిల్ ఇన్ఫెరెన్స్ రోడ్మ్యాప్లో ఉంది ఎందుకంటే ఒక రెస్పాన్స్లో ఉన్న మరియు మరొకదాన్లో లేని ఫీల్డ్లు గుర్తించడానికి ఇది ఒకే మార్గం.
పేలోడ్ పేస్ట్ చేయండి, రూట్కు పేరు పెట్టండి, ఇంటర్ఫేస్లు కాపీ చేయండి. మొత్తం పైప్లైన్ మీ బ్రౌజర్లో నడుస్తుంది, కాబట్టి రిలీజ్ కాని API లేదా సైన్ చేసిన వెబ్హుక్ బాడీ మీ మెషీన్లో ఉంటుంది.