Õppige, kuidas kasutada TypeScripti vastendatud tüüpe, et dünaamiliselt muuta objektide kuju, luues stabiilset ja hooldatavat koodi globaalsete rakenduste jaoks.
TypeScript Mapped Types dünaamiliste objekti teisenduste jaoks: põhjalik juhend
TypeScript, mis paneb suurt rõhku staatilisele tüüpimisele, annab arendajatele võimaluse kirjutada usaldusväärsemat ja hooldatavamat koodi. Üks oluline funktsioon, mis sellele oluliselt kaasa aitab, on vastendatud tüübid. See juhend süveneb TypeScripti vastendatud tüüpide maailma, pakkudes põhjalikku ülevaadet nende funktsionaalsusest, eelistest ja praktilistest rakendustest, eriti globaalsete tarkvaralahenduste arendamise kontekstis.
Põhimõistete mõistmine
Oma olemuselt võimaldab vastendatud tüüp luua uue tüübi olemasoleva tüübi omaduste põhjal. Uue tüübi määratlete, itereerides üle teise tüübi võtmete ja rakendades väärtustele teisendusi. See on uskumatult kasulik stsenaariumides, kus peate dünaamiliselt muutma objektide struktuuri, näiteks muutma omaduste andmetüüpe, muutma omadusi valikuliseks või lisama uusi omadusi olemasolevate põhjal.
Alustame põhitõdedest. Vaatleme lihtsat liidest:
interface Person {
name: string;
age: number;
email: string;
}
Nüüd määratleme vastendatud tüübi, mis muudab kõik Person
omadused valikuliseks:
type OptionalPerson = {
[K in keyof Person]?: Person[K];
};
Selles näites:
[K in keyof Person]
itereerib läbi igaPerson
liidese võtme (name
,age
,email
).?
muudab iga omaduse valikuliseks.Person[K]
viitab omaduse tüübile algsesPerson
liideses.
Tulemuseks saadav OptionalPerson
tüüp näeb tegelikult välja selline:
{
name?: string;
age?: number;
email?: string;
}
See demonstreerib vastendatud tüüpide võimet dünaamiliselt muuta olemasolevaid tüüpe.
Vastendatud tüüpide süntaks ja struktuur
Vastendatud tüübi süntaks on üsna spetsiifiline ja järgib seda üldist struktuuri:
type NewType = {
[Key in KeysType]: ValueType;
};
Vaatame iga komponenti lähemalt:
NewType
: Nimi, mille annate loodavale uuele tüübile.[Key in KeysType]
: See on vastendatud tüübi tuum.Key
on muutuja, mis itereerib läbi igaKeysType
liikme.KeysType
on sageli, kuid mitte alati, teise tüübikeyof
(nagu meieOptionalPerson
näites). See võib olla ka stringiliteraalide ühend või keerulisem tüüp.ValueType
: See määrab omaduse tüübi uues tüübis. See võib olla otsene tüüp (nagustring
), tüüp, mis põhineb algse tüübi omadusel (naguPerson[K]
), või keerulisem teisendus algsest tüübist.
Näide: omaduste tüüpide teisendamine
Kujutage ette, et peate teisendama kõik objekti numbrilised omadused stringideks. Siin on, kuidas saate seda teha vastendatud tüübi abil:
interface Product {
id: number;
name: string;
price: number;
quantity: number;
}
type StringifiedProduct = {
[K in keyof Product]: Product[K] extends number ? string : Product[K];
};
Sel juhul me:
- Itereerime läbi iga
Product
liidese võtme. - Kasutame tingimuslikku tüüpi (
Product[K] extends number ? string : Product[K]
), et kontrollida, kas omadus on number. - Kui see on number, seame omaduse tüübiks
string
; vastasel juhul säilitame algse tüübi.
Tulemuseks saadav StringifiedProduct
tüüp oleks:
{
id: string;
name: string;
price: string;
quantity: string;
}
Põhijooned ja tehnikad
1. keyof
ja indeksi signatuuride kasutamine
Nagu eelnevalt näidatud, on keyof
põhitööriist vastendatud tüüpidega töötamisel. See võimaldab teil itereerida üle tüübi võtmete. Indeksi signatuurid pakuvad viisi omaduste tüübi määratlemiseks, kui te ei tea võtmeid ette, kuid soovite neid siiski teisendada.
Näide: kõigi omaduste teisendamine indeksi signatuuri põhjal
interface StringMap {
[key: string]: number;
}
type StringMapToString = {
[K in keyof StringMap]: string;
};
Siin teisendatakse kõik StringMap'i numbrilised väärtused uues tüübis stringideks.
2. Tingimuslikud tüübid vastendatud tüüpides
Tingimuslikud tüübid on TypeScripti võimas funktsioon, mis võimaldab teil väljendada tüübisuhteid tingimuste alusel. Kombineerituna vastendatud tüüpidega võimaldavad need väga keerukaid teisendusi.
Näide: Null ja Undefined tüübist eemaldamine
type NonNullableProperties = {
[K in keyof T]: T[K] extends (null | undefined) ? never : T[K];
};
See vastendatud tüüp itereerib läbi kõik tüübi T
võtmed ja kasutab tingimuslikku tüüpi, et kontrollida, kas väärtus lubab nulli või undefined. Kui lubab, siis tüüp laheneb kui never, eemaldades selle omaduse tõhusalt; vastasel juhul säilitab see algse tüübi. See lähenemine muudab tüübid robustsemaks, välistades potentsiaalselt problemaatilised null- või undefined-väärtused, parandades koodi kvaliteeti ja vastates globaalse tarkvaraarenduse parimatele tavadele.
3. Abitüübid efektiivsuse tagamiseks
TypeScript pakub sisseehitatud abitüüpe, mis lihtsustavad tavalisi tüüpide manipuleerimise ülesandeid. Need tüübid kasutavad kulisside taga vastendatud tüüpe.
Partial
: Muudab kõik tüübiT
omadused valikuliseks (nagu varasemas näites demonstreeritud).Required
: Muudab kõik tüübiT
omadused kohustuslikuks.Readonly
: Muudab kõik tüübiT
omadused kirjutuskaitstuks.Pick
: Loob uue tüübi ainult määratud võtmetega (K
) tüübistT
.Omit
: Loob uue tüübi kõigi tüübiT
omadustega, välja arvatud määratud võtmed (K
).
Näide: Pick
ja Omit
kasutamine
interface User {
id: number;
name: string;
email: string;
role: string;
}
type UserSummary = Pick;
// { id: number; name: string; }
type UserWithoutEmail = Omit;
// { id: number; name: string; role: string; }
Need abitüübid säästavad teid korduvate vastendatud tüüpide definitsioonide kirjutamisest ja parandavad koodi loetavust. Need on eriti kasulikud globaalses arenduses erinevate vaadete või andmetele juurdepääsu tasemete haldamiseks, mis põhinevad kasutaja õigustel või rakenduse kontekstil.
Reaalse maailma rakendused ja näited
1. Andmete valideerimine ja teisendamine
Vastendatud tüübid on hindamatud välistest allikatest (API-d, andmebaasid, kasutaja sisendid) saadud andmete valideerimiseks ja teisendamiseks. See on kriitilise tähtsusega globaalsetes rakendustes, kus võite tegeleda andmetega paljudest erinevatest allikatest ja peate tagama andmete terviklikkuse. Need võimaldavad teil määratleda spetsiifilisi reegleid, näiteks andmetüüpide valideerimist, ja muuta automaatselt andmestruktuure nende reeglite alusel.
Näide: API vastuse teisendamine
interface ApiResponse {
userId: string;
id: string;
title: string;
completed: boolean;
}
type CleanedApiResponse = {
[K in keyof ApiResponse]:
K extends 'userId' | 'id' ? number :
K extends 'title' ? string :
K extends 'completed' ? boolean : any;
};
See näide teisendab omadused userId
ja id
(algselt stringid API-st) numbriteks. Omadus title
on korrektselt tüübistatud stringiks ja completed
jääb booleaniks. See tagab andmete järjepidevuse ja väldib võimalikke vigu edasises töötlemises.
2. Korduvkasutatavate komponendi propside loomine
Reactis ja teistes kasutajaliidese raamistikes võivad vastendatud tüübid lihtsustada korduvkasutatavate komponendi propside loomist. See on eriti oluline globaalsete kasutajaliidese komponentide arendamisel, mis peavad kohanema erinevate lokaatide ja kasutajaliidestega.
Näide: Lokaliseerimise käsitlemine
interface TextProps {
textId: string;
defaultText: string;
locale: string;
}
type LocalizedTextProps = {
[K in keyof TextProps as `localized-${K}`]: TextProps[K];
};
Selles koodis lisab uus tüüp LocalizedTextProps
igale TextProps
omaduse nimele eesliite. Näiteks textId
muutub localized-textId
-ks, mis on kasulik komponendi propside seadistamisel. Seda mustrit saaks kasutada propside genereerimiseks, mis võimaldavad dünaamiliselt muuta teksti vastavalt kasutaja lokaadile. See on hädavajalik mitmekeelsete kasutajaliideste ehitamiseks, mis töötavad sujuvalt erinevates piirkondades ja keeltes, näiteks e-kaubanduse rakendustes või rahvusvahelistel sotsiaalmeedia platvormidel. Teisendatud propsid annavad arendajale rohkem kontrolli lokaliseerimise üle ja võimaluse luua ühtlane kasutajakogemus kogu maailmas.
3. Dünaamiline vormide genereerimine
Vastendatud tüübid on kasulikud vormiväljade dünaamiliseks genereerimiseks andmemudelite põhjal. Globaalsetes rakendustes võib see olla kasulik vormide loomiseks, mis kohanduvad erinevate kasutajarollide või andmenõuetega.
Näide: Vormiväljade automaatne genereerimine objektiklahvide põhjal
interface UserProfile {
firstName: string;
lastName: string;
email: string;
phoneNumber: string;
}
type FormFields = {
[K in keyof UserProfile]: {
label: string;
type: string;
required: boolean;
};
};
See võimaldab teil määratleda vormi struktuuri UserProfile
liidese omaduste põhjal. See väldib vajadust vormivälju käsitsi määratleda, parandades teie rakenduse paindlikkust ja hooldatavust.
Edasijõudnud vastendatud tüüpide tehnikad
1. Võtmete ümberkaardistamine
TypeScript 4.1 tutvustas võtmete ümberkaardistamist vastendatud tüüpides. See võimaldab teil tüübi teisendamise ajal võtmeid ümber nimetada. See on eriti kasulik tüüpide kohandamisel erinevatele API nõuetele või kui soovite luua kasutajasõbralikumaid omaduste nimesid.
Näide: Omaduste ümbernimetamine
interface Product {
productId: number;
productName: string;
productDescription: string;
price: number;
}
type ProductDto = {
[K in keyof Product as `dto_${K}`]: Product[K];
};
See nimetab iga Product
tüübi omaduse ümber, et see algaks eesliitega dto_
. See on väärtuslik andmemudelite ja API-de vahelisel vastendamisel, mis kasutavad erinevat nimekonventsiooni. See on oluline rahvusvahelises tarkvaraarenduses, kus rakendused suhtlevad mitme taustasüsteemiga, millel võivad olla spetsiifilised nimekonventsioonid, võimaldades sujuvat integratsiooni.
2. Tingimuslik võtmete ümberkaardistamine
Keerulisemate teisenduste jaoks saate kombineerida võtmete ümberkaardistamist tingimuslike tüüpidega, mis võimaldab teil teatud kriteeriumide alusel omadusi ümber nimetada või välistada. See tehnika võimaldab keerukaid teisendusi.
Näide: Omaduste välistamine DTO-st
interface Product {
id: number;
name: string;
description: string;
price: number;
category: string;
isActive: boolean;
}
type ProductDto = {
[K in keyof Product as K extends 'description' | 'isActive' ? never : K]: Product[K]
}
Siin eemaldatakse description
ja isActive
omadused genereeritud ProductDto
tüübist tõhusalt, sest võti laheneb kui never
, kui omadus on 'description' või 'isActive'. See võimaldab luua spetsiifilisi andmeedastusobjekte (DTO-sid), mis sisaldavad ainult erinevate operatsioonide jaoks vajalikke andmeid. Selline valikuline andmeedastus on globaalses rakenduses optimeerimise ja privaatsuse seisukohalt ülioluline. Andmeedastuspiirangud tagavad, et üle võrkude saadetakse ainult asjakohaseid andmeid, vähendades ribalaiuse kasutust ja parandades kasutajakogemust. See on kooskõlas ülemaailmsete privaatsusregulatsioonidega.
3. Vastendatud tüüpide kasutamine geneeriliste tüüpidega
Vastendatud tüüpe saab kombineerida geneeriliste tüüpidega, et luua väga paindlikke ja korduvkasutatavaid tüübimääratlusi. See võimaldab teil kirjutada koodi, mis suudab käsitleda mitmesuguseid erinevaid tüüpe, suurendades oluliselt teie koodi korduvkasutatavust ja hooldatavust, mis on eriti väärtuslik suurtes projektides ja rahvusvahelistes meeskondades.
Näide: Geneeriline funktsioon objekti omaduste teisendamiseks
function transformObjectValues(obj: T, transform: (value: T[K]) => U): {
[P in keyof T]: U;
} {
const result: any = {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = transform(obj[key]);
}
}
return result;
}
interface Order {
id: number;
items: string[];
total: number;
}
const order: Order = {
id: 123,
items: ['apple', 'banana'],
total: 5.99,
};
const stringifiedOrder = transformObjectValues(order, (value) => String(value));
// stringifiedOrder: { id: string; items: string; total: string; }
Selles näites kasutab funktsioon transformObjectValues
geneerilisi tüüpe (T
, K
ja U
), et võtta vastu objekt (obj
) tüübist T
ja teisendusfunktsioon, mis aktsepteerib ühte omadust T-st ja tagastab väärtuse tüübist U. Seejärel tagastab funktsioon uue objekti, millel on samad võtmed kui algsel objektil, kuid mille väärtused on teisendatud tüübiks U.
Parimad tavad ja kaalutlused
1. Tüübiohutus ja koodi hooldatavus
TypeScripti ja vastendatud tüüpide üks suurimaid eeliseid on suurenenud tüübiohutus. Selgete tüüpide määratlemisega avastate vead arenduse käigus varem, vähendades käitusaja vigade tõenäosust. Need muudavad teie koodi lihtsamini mõistetavaks ja refaktoreeritavaks, eriti suurtes projektides. Lisaks tagab vastendatud tüüpide kasutamine, et kood on vähem vigadele aldis, kui tarkvara laieneb, kohanedes miljonite kasutajate vajadustega üle maailma.
2. Loetavus ja koodistiil
Kuigi vastendatud tüübid võivad olla võimsad, on oluline kirjutada need selgelt ja loetavalt. Kasutage tähendusrikkaid muutujate nimesid ja kommenteerige oma koodi, et selgitada keeruliste teisenduste eesmärki. Koodi selgus tagab, et igasuguse taustaga arendajad saavad koodi lugeda ja sellest aru saada. Järjepidevus stiilis, nimekonventsioonides ja vormindamises muudab koodi ligipääsetavamaks ja aitab kaasa sujuvamale arendusprotsessile, eriti rahvusvahelistes meeskondades, kus erinevad liikmed töötavad tarkvara erinevate osade kallal.
3. Ülekasutamine ja keerukus
Vältige vastendatud tüüpide ülekasutamist. Kuigi need on võimsad, võivad need muuta koodi vähem loetavaks, kui neid kasutatakse liigselt või kui on saadaval lihtsamaid lahendusi. Kaaluge, kas otsekohene liidese määratlus või lihtne abifunktsioon võiks olla sobivam lahendus. Kui teie tüübid muutuvad liiga keerukaks, võib neid olla raske mõista ja hooldada. Kaaluge alati tasakaalu tüübiohutuse ja koodi loetavuse vahel. Selle tasakaalu leidmine tagab, et kõik rahvusvahelise meeskonna liikmed saavad koodibaasi tõhusalt lugeda, mõista ja hooldada.
4. Jõudlus
Vastendatud tüübid mõjutavad peamiselt kompileerimisaegset tüübikontrolli ja tavaliselt ei too kaasa olulist käitusaja jõudluse lisakulu. Siiski võivad liiga keerulised tüübimanipulatsioonid potentsiaalselt aeglustada kompileerimisprotsessi. Minimeerige keerukust ja arvestage mõjuga ehitusaegadele, eriti suurtes projektides või meeskondades, mis asuvad erinevates ajavööndites ja millel on erinevad ressursipiirangud.
Kokkuvõte
TypeScripti vastendatud tüübid pakuvad võimsat tööriistakomplekti objekti kuju dünaamiliseks teisendamiseks. Need on hindamatud tüübiohutu, hooldatava ja korduvkasutatava koodi ehitamisel, eriti keerukate andmemudelite, API interaktsioonide ja kasutajaliidese komponentide arendamisega tegelemisel. Valdades vastendatud tüüpe, saate kirjutada robustsemaid ja kohandatavamaid rakendusi, luues paremat tarkvara globaalsele turule. Rahvusvaheliste meeskondade ja globaalsete projektide jaoks pakub vastendatud tüüpide kasutamine kindlat koodikvaliteeti ja hooldatavust. Siin käsitletud funktsioonid on üliolulised kohandatava ja skaleeritava tarkvara ehitamiseks, koodi hooldatavuse parandamiseks ja paremate kogemuste loomiseks kasutajatele kogu maailmas. Vastendatud tüübid muudavad koodi lihtsamini uuendatavaks, kui lisatakse või muudetakse uusi funktsioone, API-sid või andmemudeleid.