Ƙirƙiri interfaces na TypeScript daga JSON _

Yadda kiyastar JSON-zuwa-TypeScript ke aiki

Kiyastawa wucewa ɗaya ce akan bishiyar JSON da aka bincike. Kayan aikin yana karanta kowane ƙima, yana zaɓi nau'in TypeScript don shi, sannan yana rubuta interface ɗaya don kowane abu da ya samu.

1. Bincike samfurin JSON da parser na asali na burauzar kuma ƙi shigarwa mara kyau tare da alamar layi/ginshiƙi.
2. Sami nau'in TypeScript don kowane ƙima — string, number, boolean, null, array, ko abin da aka haɗa.
3. Ba kowane abin da aka haɗa sunan interface da aka samo daga makullin dukiyar uban shi (don haka user.address ya zama interface na Address).
4. Haɗa nau'ikan abu a duk array don jerin {id: 1} da {id: 2, label: "x"} ya samar da haɗin tare da filayen optional daidai.
5. Yi amfani da zaɓuɓɓukan ka (interface vs. type, readonly, optional-nullable) kuma fitar da sanarwa a tsarin dogara don fayil ya iya ƙididdiga ba tare da nassoshi na gaba ba.

Me ya sa ƙirƙirar nau'ikan TypeScript daga JSON?

• Yawancin kwaron siffa ana iya kama su lokacin ƙididdiga idan an rubuta nau'in amsa. Kiyasta interface daga nauyin aiki na gaske yana rubuta yawancin shi a gare ka, kuma yanayin `strict` yana kama filin da takardun bayanai suka manta ambata.
• Haɗa interfaces da aka kiyasta da mai tabbatarwa na lokaci-aiki kamar Zod ko io-ts yana ba siffa guda ɗaya ayyuka biyu: cikawa ta atomatik na mai gyara a cikin haɓaka da 400 a gefen lokacin da samarwa ta aika wani abin da ba a tsammanin ba.
• Maɓallin harshe na TypeScript yana nuna filayen da ya sani kawai. Da zarar ka shigo da interface da aka kiyasta, cikawa ta atomatik tana aiki nan take lokacin da ka rubuta aya — babu ƙarin ɓarna ta `as any` akan amsa da bincike mai takaici a duk repo.
• Idan kana shirya rubuta takardan OpenAPI, interface da aka kiyasta nau'in farko na sauri ne na tsarin amsa. Za ka har yanzu so rubutun misalai da ƙunkushe da hannu, amma sunaye na dukiya da nau'ikan sun riga sun daidaita.

Ayyukan gari

Kiyastawa tana taimaka mafi yawa lokacin da nauyin aiki na gaske ya wanzu amma tsari ba ya.

• Sanya nau'i zuwa nauyin aiki na webhook na ɓangare na uku daga Stripe, GitHub, ko Twilio kafin rubuta mai sarrafa.
• Fara nau'ikane don REST API na cikin gida don ƙungiyar farko ta iya fara lambar akan shi rana guda da backend ya sauka.
• Ƙirƙirar farawa don tsarin Zod, io-ts, ko Valibot daga amsa API da aka lura.

Yaya fitarwa ke kama?

Bisa ga samfurin JSON da sunan tushe, mai ƙirƙirawa yana samar da bishiyar interfaces, ɗaya don kowane abin da aka haɗa. Don shigarwa a ƙasa tare da sunan tushe User:

Liƙa {"id":1,"name":"Alice","tags":["a","b"],"address":{"city":"Paris"}} tare da sunan tushe User kuma mai ƙirƙirawa yana samar da:

export interface User {
  id: number;
  name: string;
  tags: string[];
  address: Address;
}

export interface Address {
  city: string;
}

Zaɓuɓɓukan mai ƙirƙirawa

Salon sanarwa

Zaɓi interface (tsarin TypeScript na daidai don siffa ta abu) ko type (yana da amfani idan za ka buƙaci nau'ikan da aka tsara, nau'ikan sharaɗi, ko haɗuwa daga baya). Dukansu suna samar da ɗabi'ar lokaci-aiki iri ɗaya; zaɓin fifikon salon lambar ne.

Filayen nullable optional

Lokacin da ƙimarsa ta samfuri ta kasance null, nau'in filin ya zama T | null. Kunna wannan zaɓi kuma yana ƙara gyarar ? don filin yana optional a gefen TypeScript — yana da amfani lokacin da API wani lokaci yana barin makulli gaba ɗaya maimakon dawo da null.

Gyarar Readonly

Yana ƙara readonly kafin kowane sanarwar dukiya don interface da aka fitar ya daidaita da ƙirar bayanai mara canzawa. Yana da amfani don rabo na jihar Redux, amsoshin API da aka dasƙare, ko ko'ina da kake so mai ƙididdiga ya nuna canzawa na kuskure.

Shin wannan yana goyan bayan abubuwan da aka haɗa da arrays?

Eh. Kowane abin da aka haɗa yana zama interface mai suna da aka samo daga makullin dukiyar uban shi, kuma arrays suna kiyasta nau'in abu daga abubuwan su. Arrays na abubuwa suna samun interface don kowane siffa ta abu, tare da nau'ikan haɗin inda siffa suka sabawa.

Yaya ake kiyasta filayen optional?

Kunna mabuɗin \"Alama filayen da za a iya null a matsayin optional\" kuma duk filin da ƙimarsa ta samfuri ta kasance null yana samun gyarar ? akan makulli da | null a cikin nau'in. Ba tare da mabuɗin ba, filin yana zama dole kuma nau'in T | null ne kawai.

Shin wannan yana goyan bayan discriminated unions?

Nau'ikan haɗin na asali suna fitowa lokacin da array ke ɗaukar abubuwa masu siffa gauraye ko lokacin da filin ke ɗaukar ƙima da null duka. Kiyasta discriminated-union mai ƙarfi (zaɓar type ko kind a matsayin tag da raba bambance-bambance) yana buƙatar samfurai da yawa — hakan an tsara amma ba a cikin ginshiƙin yau ba.

Shin zan iya kiyasta nau'ikane daga samfurai da yawa na JSON?

Ba tukuna ba — mai kiyastar yau yana karanta samfuri ɗaya a lokaci guda. Idan kana da nauyin aiki biyu waɗanda ya kamata su raba interface (misali, ƙarshen jerin da ƙarshen abu guda ɗaya), mafitar aikace-aikace shine haɗa su zuwa array ɗaya, ƙirƙira daga haka, sannan sake suna nau'ikan haɗin da ke haifar. Kiyastar samfuri da yawa tana kan taswirar hanya saboda ita ce hanya ɗaya don gano filayen da ke cikin amsa ɗaya kuma ba a cikin wani ba.

Liƙa nauyin aiki, sanya sunan tushe, kwafi interfaces. Layin samarwa gaba ɗaya yana gudana a cikin burauzarka, don haka API da ba a fitar da shi ko jikin webhook da aka sanya hannu yana zama a injinar ka.