Matimba ya Minhlangano leyi Xihlawuhlawu eka TypeScript

Ku boxa xiphiqo

Loko typescript yi ri karhi yi kula no duma sweswinyana, vaendli vo tala va javascript va tlangela vuhlayiseki bya type. Nxaxamelo wa swihlawulekisi leswi Typescript yi swi nyikaka i wukulu naswona wu nga ha va wukulu, kutani eka poso leyi, ndzi ta kongomisa eka xin’wana xa swona lexi olovaka ku xi khoma naswona xi nga na nkucetelo lowu tirhaka lowu hlelekeke.

A hi sunguleni hi xikombiso. Anakanya u ri karhi u endla xitirhisiwa lexi nga ni mintirho yo tala ya vatirhisi. Swi tolovelekile swinene leswaku xitirhisiwa xi dyiwa hi vatirhisi vo hambana-hambana, a swi tano ke? Ti roles leti kongomeke a hi ta nkoka ngopfu laha, kambe a hi nge i admin , consumer na guest . Eka typescript, hi nga tivisa vatirhisi lava khomeke swiphemu sweswo hi ndlela leyi landzelaka:

 type Admin = {} type Consumer = {} type Guest = {}

Sweswi, a hi languteni sete ya swihlawulekisi leswi ntirho wun’wana na wun’wana wa mutirhisi wu nga na swona. Hi ntolovelo, i email , firstName na lastName kumbe swin’wana swo fana na sweswo. Kambe, yima, Vatirhisi Guest kumbexana a va nge vi na sweswo (i vaendzi phela), kutani a hi siyeni ntsena muxaka lowu wu nga ri na nchumu sweswi.

 type Admin = { firstName: string lastName: string email: string } type Consumer = { firstName: string lastName: string email: string } type Guest = {}

Mutirhisi wa xitirhisiwa a nga va wa xiphemu xin’we ntsena. Ndlela yo yimela leswi hi ku tirhisa tinxaka i ku tirhisa muxaka wa union .

 type User = Admin | Consumer | Guest

Va admin va dume hi vuswikoti bya vona byo hlawuleka, naswona eka application ya hina, va kota ku rhamba vaxavi. A hi engeteleni field leyi kombisaka leswaku admin yi nga rhumela swirhambo swingani.

 type Admin = { firstName: string lastName: string email: string numberOfInvitesLeft: number // <-- added }

Ku endla leswaku swilo swi tsakisa no va ekusuhi na xitirhisiwa xa xiviri, a hi engeteleni nhundzu leyi hlawulekeke eka muxaka wa Consumer .

 type Consumer = { firstName: string lastName: string email: string premium: boolean // <-- added }

Lexi i xikombiso xo olova swinene, naswona entiyisweni, vatirhisi va nga va na makume ya swihlawulekisi swo hambana, leswi rharhanganisaka swinene codebase loko u lava ku fikelela swihlawulekisi swo karhi.

 const doSomethingBasedOnRole = (user: User) => { // how do you check here that user is really an admin if (user) { // ...and do something with the `numberOfInvitesLeft` property? } }

Ndlela yin’wana i ku kambela vukona bya ndhawu yoleyo.

 const doSomethingBasedOnRole = (user: User) => { if (user && user.numberOfInvitesLeft) { // safely access `numberOfInvitesLeft` property } }

Kambe lexi i xitshunxo lexi karharisaka naswona a hi xitshunxo lexi nga ringanisiwaka. Naswona ku endliwa yini loko `numberOfInvitesLeft` yi hundzuka nhundzu yo hlawula?

Ku Tivisa Tinxaka ta Nhlangano leti nga na Xihlawuhlawu

Laha hi laha tinxaka ta tiyuniyoni leti nga na xihlawuhlawu ti nghenaka kona. Hi lava ntsena ku veka nsimu yo engetela eka muxaka wun’wana na wun’wana wa mutirhisi lowu kombisaka xiave.

 type Admin = { firstName: string lastName: string email: string numberOfInvitesLeft: number role: "admin" // <-- added } type Consumer = { firstName: string lastName: string email: string role: "consumer" // <-- added } type Guest = { role: "guest" // <-- added }

Xiya ndlela leyi ndzi vekaka ntambhu yo karhi tanihi muxaka; leswi swi vuriwa muxaka wa xiviri wa ntambhu . Leswi leswi swi ku nyikaka swona hileswaku sweswi u nga tirhisa vafambisi va ririmi ra JS ra ntumbuluko, xikombiso, switch case , if , else ku hlawula eka xiave.

 const user: Admin = { firstName: "John", lastName: "Smith", email: "[email protected]", numberOfInvitesLeft: 3, role: "admin", } const doSomethingBasedOnRole = (user: User) => { if (user.role === "admin") { // now typescript knows that INSIDE of this block user is of type `Admin` // now you can safely call `user.numberOfInvitesLeft` within this block } }

Swi tano na hi xitatimende xa xiyimo xa swiwitsi.

 // ... const doSomethingBasedOnRole = (user: User) => { switch (user.role) { case "admin": { // now typescript knows that INSIDE of this block user is of type `Admin` // now you can safely call `user.numberOfInvitesLeft` within this block } case "consumer": { // do something with a `Consumer` user // if you try to call `user.numberOfInvitesLeft` here, TS compiler errors in // // "Property 'numberOfInvitesLeft' does not exist on type 'Consumer'." // } } }

Mimbuyelo ya tinxaka ta tiyuniyoni leti nga na xihlawuhlawu yi vonaka hikuva ku kamberiwa ka muxaka ku sekeriwe eka nhundzu ya xiave leyi nga erivaleni ku nga ri eka nhundzu ya nkarhinyana leyi nga fambelaniki kumbe leyi nga fambelaniki na mutirhisi wo karhi.