TypeScript: valitut ominaisuudet valinnaiset osittaisella ja poissulkemistoiminnolla

Kun käytät apuohjelmaa Partialtyypille, se tekee kaikista tyypin ominaisuuksista valinnaisia. Katsotaanpa, kuinka voimme muodostaa tämän apuohjelman toisella, Omit, tehdäksemme valinnaisista vain tietyistä tämän tyyppisistä ominaisuuksista. Luomme vihdoin apuohjelman TypeScript-yleisohjelmien avulla soveltaaksemme tätä mihin tahansa haluamaamme tyyppiin.

Tee kaikista tyypin ominaisuuksista valinnaisia

Apuohjelmat ja Partialovat Omithyvin tunnettuja TypeScript- alueella, koska ne ovat erittäin käteviä niiden nopeassa soveltamisessa tyyppiin ja periaatteessa uuden tyypin saamiseen. Partial<T>muuntaa kaikki tyypin avaimet valinnaisiksi. Jos sinulla on esimerkiksi tämä tyyppi:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
    keyboard: string
}

Kaikki ominaisuudet vaaditaan, kun jollain on tämän tyyppinen. Jos haluat määrittää objektin näin:

const FooFighters: Band = {
    lead: 'Dave Grohl',
    guitar: 'Pat Smears',
    bass: 'Nate Mendel',
    drums: 'Taylor Williams',
}

se epäonnistuu, koska siitä puuttuu keyboardomaisuus. Nyt voimme merkitä tämän ominaisuuden valinnaiseksi, ja TypeScript antaa meille mahdollisuuden tehdä niin. Yksinkertaisin tapa tehdä se on lisätä kysymysmerkki sen nimeen. Jos tässä tapauksessa on mahdollista muokata alkuperäistä tyyppiä, voit siirtyä siihen ja muokata sitä seuraavasti:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
    keyboard?: string
}

Loistava. Nyt edellinen tehtävä onnistuu, koska keyboardsitä ei enää tarvita. Mutta entä jos alkuperäistä tyyppiä ei ole mahdollista muuttaa mistä tahansa syystä? Se, mitä voit tehdä nopeasti näissä tapauksissa, on hakea Partialtätä tyyppiä:

type NotAllTheBand = Partial

const FooFighters: NotAllTheBand = {
    lead: 'Dave Grohl',
    guitar: 'Pat Smears',
    bass: 'Nate Mendel',
    drums: 'Taylor Williams',
}

Tämä lopettaa kaikkien ominaisuuksien pakottamisen ja tekee niistä kaikista valinnaisia. Ehkä joskus haluamme tämän, mutta entä jos haluamme vain tehdä vain yhden ominaisuuden valinnaiseksi ja välttää alkuperäisen tyypin muokkaamista?

Ominaisuuksien poistaminen tyypistä

Ennen kuin siirrymme siihen ja katsomme, miten se toimii, katsotaanpa toinen apuohjelma, joka auttaa meitä tässä: Omit. Tämä apuohjelmatyyppi poistaa ominaisuuksia tyypistä, jossa sitä käytetään. Vaikka Partialse ei ota muita argumentteja kuin tyyppiä, Omitse ottaa tyypin ja poistettavat ominaisuudet: Omit<T, K>.

Se ei Partialtee niistä valinnaisia: Omitpoistaa ne kokonaan tyypistä. Kun käytät, Partial<Band>se on kuin olisit tehnyt tämän:

interface Band {
    lead?: string
    guitar?: string
    bass?: string
    drums?: string
    keyboard?: string
}

Kuitenkin, kun käytät Omit<Band, 'keyboard'>, näyttää siltä, ​​kuin olisit tehnyt tämän:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
}

Tämä alkaa nyt olla järkevää, eikö? Voitteko kuvitella, mitä voisimme tehdä TypeScriptissä, jos meillä on tyyppi, jolla on kaikki alkuperäisen ominaisuudet asetettu valinnaiseksi, ja toinen tyyppi, jolla on vain ne ominaisuudet, joita haluamme vaatia? Jos vain olisi tapa… risteyttää nämä tyypit, eikö niin?

Leikkaavat tyypit

Kyllä, TypeScriptissä on tapa käyttää et-merkkiä &, tyypin leikkausoperaattoria. Tämä operaattori, jolla on kaksi tyyppiä, muodostaa uuden, jolla on molempiin tyyppeihin kuuluvat ominaisuudet:

interface SomeType {
    propA: string
    propB: number
}

interface AnotherType {
    propC: boolean
    propD: Array
}

type IntersectedType = SomeType & AnotherType

Tähän mennessä olet luultavasti ymmärtänyt sen: aiomme leikkaamaan ositetun tyypin ja tyypin, josta poistimme joitakin sen ominaisuuksia.

Tee valituista tyypin ominaisuuksista valinnaisia

Yritetään saada siitä järkeä. TypeScriptin oppimisen kannalta on tärkeää järkeistää, mitä tyypeillemme tapahtuu.

Aiomme napata tyypin, jonka kaikki ominaisuudet on asetettu valinnaisiksi sen käytön ansiosta Partial. Seuraavaksi leikkaamme sen tyypin kanssa, jonka ominaisuudet on poistanut Omit. Katsotaanpa esimerkkiä:

interface SomeType {
    propA: string
    propB: number
}

type OptionalPropB = Partial & Omit

Meillä on nyt uusi tyyppi muuttamatta alkuperäistä tyyppiä, joka näyttää tältä:

type OptionalPropB = {
    propA: string
    propB?: string
}

Tämä tapahtuu, koska haemme ominaisuuksia propA?ja propB?tyypin tuottamasta tyypistä Partialja leikkaamme ne propAtyypin tuottamasta tyypistä Omit.

TypeScriptin yleiset apuohjelmat

Ok, nyt uusi tyyppimme toimii ja voimme merkitä vain valitut ominaisuudet valinnaisiksi muuttamatta alkuperäistä tyyppiä. Tämä linja kuitenkin

type OptionalPropB = Partial & Omit

On liian monisanainen, melko ruma ja tylsä ​​kirjoittaa joka kerta. Vielä tärkeämpää on, että se ei toimi eri tyypeille, vaan meidän on kirjoitettava se uudelleen joka kerta. Voimmeko tehdä siitä lyhyemmän ja kauniimman ja saada sen toimimaan kaikentyyppisille? Kyllä, TypeScript antaa meille mahdollisuuden käyttää tässä geneerisiä tuotteita ja luoda oman apuohjelman tyyppi:

type Optional = Partial & Omit

Ja nyt meillä on oma TypeScript-aputyyppi, joka on toteutettu yleisillä ominaisuuksilla, joiden avulla voimme tehdä valituista tyyppiominaisuuksista valinnaisia ​​missä tahansa tyypissä. Voimme käyttää sitä näin:

type TypeWithOptionalProp = Optional

Huomaat, että allekirjoitus on samanlainen kuin Omit: tämä apuohjelma ottaa käyttöön käytettävän tyypin ja valinnaiset ominaisuudet. Jos sinulla on enemmän, voit käyttää liiton operaattoria:

type TypeWithOptionalProps = Optional

Loppusanat

Voit nyt tallentaa tämän yleisen apuohjelman tiedostoon ja viedä sen käyttääksesi sitä koko sovelluksessasi. Tässä on linkki TypeScript-leikkikentälle, johon lisäsin tämän artikkelin koodin ja kommentoin sitä, jotta voit nähdä, mitä tapahtuu, katsomalla Partial, Omit, ja yleistä apuohjelmaamme.

Geneeristen tuotteiden ja apuohjelmien maailma on upea TypeScriptissä. Tule mukaan ja aloita kokeilu!