{"id":232159,"date":"2023-01-08T11:46:00","date_gmt":"2023-01-08T08:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232159"},"modified":"2022-11-10T07:52:37","modified_gmt":"2022-11-10T04:52:37","slug":"typescript-valitut-ominaisuudet-valinnaiset-osittaisella-ja-poissulkemistoiminnolla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/typescript-valitut-ominaisuudet-valinnaiset-osittaisella-ja-poissulkemistoiminnolla\/","title":{"rendered":"TypeScript: valitut ominaisuudet valinnaiset osittaisella ja poissulkemistoiminnolla"},"content":{"rendered":"\n

Kun k\u00e4yt\u00e4t apuohjelmaa Partial<\/code>tyypille, se tekee kaikista tyypin ominaisuuksista valinnaisia. Katsotaanpa, kuinka voimme muodostaa t\u00e4m\u00e4n apuohjelman toisella, Omit<\/code>, tehd\u00e4ksemme valinnaisista vain tietyist\u00e4 t\u00e4m\u00e4n tyyppisist\u00e4 ominaisuuksista. Luomme vihdoin apuohjelman TypeScript-yleisohjelmien avulla soveltaaksemme t\u00e4t\u00e4 mihin tahansa haluamaamme tyyppiin.<\/p>\n

Tee kaikista tyypin ominaisuuksista valinnaisia<\/h2>\n

Apuohjelmat ja Partial<\/code>ovat Omit<\/code>hyvin tunnettuja TypeScript-<\/a> alueella, koska ne ovat eritt\u00e4in k\u00e4tevi\u00e4 niiden nopeassa soveltamisessa tyyppiin ja periaatteessa uuden tyypin saamiseen. Partial<T><\/code>muuntaa kaikki tyypin avaimet valinnaisiksi. Jos sinulla on esimerkiksi t\u00e4m\u00e4 tyyppi:<\/p>\n

interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard: string\n}<\/code><\/pre>\n
Kaikki ominaisuudet vaaditaan, kun jollain on t\u00e4m\u00e4n tyyppinen. Jos haluat m\u00e4\u00e4ritt\u00e4\u00e4 objektin n\u00e4in:<\/p>\n
const FooFighters: Band = {\n    lead: 'Dave Grohl',\n    guitar: 'Pat Smears',\n    bass: 'Nate Mendel',\n    drums: 'Taylor Williams',\n}<\/code><\/pre>\n
se ep\u00e4onnistuu, koska siit\u00e4 puuttuu keyboard<\/code>omaisuus. Nyt voimme merkit\u00e4 t\u00e4m\u00e4n ominaisuuden valinnaiseksi, ja TypeScript antaa meille mahdollisuuden tehd\u00e4 niin. Yksinkertaisin tapa tehd\u00e4 se on lis\u00e4t\u00e4 kysymysmerkki sen nimeen. Jos t\u00e4ss\u00e4 tapauksessa on mahdollista muokata alkuper\u00e4ist\u00e4 tyyppi\u00e4, voit siirty\u00e4 siihen ja muokata sit\u00e4 seuraavasti:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard?: string\n}<\/code><\/pre>\n
Loistava. Nyt edellinen teht\u00e4v\u00e4 onnistuu, koska keyboard<\/code>sit\u00e4 ei en\u00e4\u00e4 tarvita. Mutta ent\u00e4 jos alkuper\u00e4ist\u00e4 tyyppi\u00e4 ei ole mahdollista muuttaa mist\u00e4 tahansa syyst\u00e4? Se, mit\u00e4 voit tehd\u00e4 nopeasti n\u00e4iss\u00e4 tapauksissa, on hakea Partial<\/code>t\u00e4t\u00e4 tyyppi\u00e4:<\/p>\n
type NotAllTheBand = Partial\n\nconst FooFighters: NotAllTheBand = {\n    lead: 'Dave Grohl',\n    guitar: 'Pat Smears',\n    bass: 'Nate Mendel',\n    drums: 'Taylor Williams',\n}<\/code><\/pre>\n
T\u00e4m\u00e4 lopettaa kaikkien ominaisuuksien pakottamisen ja tekee niist\u00e4 kaikista valinnaisia. Ehk\u00e4 joskus haluamme t\u00e4m\u00e4n, mutta ent\u00e4 jos haluamme vain tehd\u00e4 vain yhden ominaisuuden valinnaiseksi ja v\u00e4ltt\u00e4\u00e4 alkuper\u00e4isen tyypin muokkaamista?<\/p>\n
Ominaisuuksien poistaminen tyypist\u00e4<\/h2>\n
Ennen kuin siirrymme siihen ja katsomme, miten se toimii, katsotaanpa toinen apuohjelma, joka auttaa meit\u00e4 t\u00e4ss\u00e4: Omit<\/code>. T\u00e4m\u00e4 apuohjelmatyyppi poistaa ominaisuuksia tyypist\u00e4, jossa sit\u00e4 k\u00e4ytet\u00e4\u00e4n. Vaikka Partial<\/code>se ei ota muita argumentteja kuin tyyppi\u00e4, Omit<\/code>se ottaa tyypin ja poistettavat ominaisuudet: Omit<T, K><\/code>.<\/p>\n
Se ei Partial<\/code>tee niist\u00e4 valinnaisia: Omit<\/code>poistaa ne kokonaan tyypist\u00e4. Kun k\u00e4yt\u00e4t, Partial<Band><\/code>se on kuin olisit tehnyt t\u00e4m\u00e4n:<\/p>\n
interface Band {\n    lead?: string\n    guitar?: string\n    bass?: string\n    drums?: string\n    keyboard?: string\n}<\/code><\/pre>\n
Kuitenkin, kun k\u00e4yt\u00e4t Omit<Band, 'keyboard'><\/code>, n\u00e4ytt\u00e4\u00e4 silt\u00e4, \u200b\u200bkuin olisit tehnyt t\u00e4m\u00e4n:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n}<\/code><\/pre>\n
T\u00e4m\u00e4 alkaa nyt olla j\u00e4rkev\u00e4\u00e4, eik\u00f6? Voitteko kuvitella, mit\u00e4 voisimme tehd\u00e4 TypeScriptiss\u00e4, jos meill\u00e4 on tyyppi, jolla on kaikki alkuper\u00e4isen ominaisuudet asetettu valinnaiseksi, ja toinen tyyppi, jolla on vain ne ominaisuudet, joita haluamme vaatia? Jos vain olisi tapa\u2026 risteytt\u00e4\u00e4 n\u00e4m\u00e4 tyypit, eik\u00f6 niin?<\/p>\n
Leikkaavat tyypit<\/h2>\n
Kyll\u00e4, TypeScriptiss\u00e4 on tapa k\u00e4ytt\u00e4\u00e4 et-merkki\u00e4 &<\/code>, tyypin leikkausoperaattoria. T\u00e4m\u00e4 operaattori, jolla on kaksi tyyppi\u00e4, muodostaa uuden, jolla on molempiin tyyppeihin kuuluvat ominaisuudet:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ninterface AnotherType {\n    propC: boolean\n    propD: Array\n}\n\ntype IntersectedType = SomeType & AnotherType\n<\/code><\/pre>\n
T\u00e4h\u00e4n menness\u00e4 olet luultavasti ymm\u00e4rt\u00e4nyt sen: aiomme leikkaamaan ositetun tyypin ja tyypin, josta poistimme joitakin sen ominaisuuksia.<\/p>\n
Tee valituista tyypin ominaisuuksista valinnaisia<\/h2>\n
Yritet\u00e4\u00e4n saada siit\u00e4 j\u00e4rke\u00e4. TypeScriptin oppimisen kannalta on t\u00e4rke\u00e4\u00e4 j\u00e4rkeist\u00e4\u00e4, mit\u00e4 tyypeillemme tapahtuu.<\/p>\n
Aiomme napata tyypin, jonka kaikki ominaisuudet on asetettu valinnaisiksi sen k\u00e4yt\u00f6n ansiosta Partial<\/code>. Seuraavaksi leikkaamme sen tyypin kanssa, jonka ominaisuudet on poistanut Omit<\/code>. Katsotaanpa esimerkki\u00e4:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ntype OptionalPropB = Partial & Omit<\/code><\/pre>\n
Meill\u00e4 on nyt uusi tyyppi muuttamatta alkuper\u00e4ist\u00e4 tyyppi\u00e4, joka n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
type OptionalPropB = {\n    propA: string\n    propB?: string\n}<\/code><\/pre>\n
T\u00e4m\u00e4 tapahtuu, koska haemme ominaisuuksia propA?<\/code>ja propB?<\/code>tyypin tuottamasta tyypist\u00e4 Partial<\/code>ja leikkaamme ne propA<\/code>tyypin tuottamasta tyypist\u00e4 Omit<\/code>.<\/p>\n
TypeScriptin yleiset apuohjelmat<\/h2>\n
Ok, nyt uusi tyyppimme toimii ja voimme merkit\u00e4 vain valitut ominaisuudet valinnaisiksi muuttamatta alkuper\u00e4ist\u00e4 tyyppi\u00e4. T\u00e4m\u00e4 linja kuitenkin<\/p>\n
type OptionalPropB = Partial & Omit<\/code><\/pre>\n
On liian monisanainen, melko ruma ja tyls\u00e4 \u200b\u200bkirjoittaa joka kerta. Viel\u00e4 t\u00e4rke\u00e4mp\u00e4\u00e4 on, ett\u00e4 se ei toimi eri tyypeille, vaan meid\u00e4n on kirjoitettava se uudelleen joka kerta. Voimmeko tehd\u00e4 siit\u00e4 lyhyemm\u00e4n ja kauniimman ja saada sen toimimaan kaikentyyppisille? Kyll\u00e4, TypeScript antaa meille mahdollisuuden k\u00e4ytt\u00e4\u00e4 t\u00e4ss\u00e4 geneerisi\u00e4 tuotteita ja luoda oman apuohjelman tyyppi:<\/p>\n
type Optional = Partial & Omit<\/code><\/pre>\n
Ja nyt meill\u00e4 on oma TypeScript-aputyyppi, joka on toteutettu yleisill\u00e4 ominaisuuksilla, joiden avulla voimme tehd\u00e4 valituista tyyppiominaisuuksista valinnaisia \u200b\u200bmiss\u00e4 tahansa tyypiss\u00e4. Voimme k\u00e4ytt\u00e4\u00e4 sit\u00e4 n\u00e4in:<\/p>\n
type TypeWithOptionalProp = Optional<\/code><\/pre>\n
Huomaat, ett\u00e4 allekirjoitus on samanlainen kuin Omit: t\u00e4m\u00e4 apuohjelma ottaa k\u00e4ytt\u00f6\u00f6n k\u00e4ytett\u00e4v\u00e4n tyypin ja valinnaiset ominaisuudet. Jos sinulla on enemm\u00e4n, voit k\u00e4ytt\u00e4\u00e4 liiton operaattoria:<\/p>\n
type TypeWithOptionalProps = Optional<\/code><\/pre>\n
Loppusanat<\/h2>\n
Voit nyt tallentaa t\u00e4m\u00e4n yleisen apuohjelman tiedostoon ja vied\u00e4 sen k\u00e4ytt\u00e4\u00e4ksesi sit\u00e4 koko sovelluksessasi. T\u00e4ss\u00e4 on linkki TypeScript-leikkikent\u00e4lle<\/a>, johon lis\u00e4sin t\u00e4m\u00e4n artikkelin koodin ja kommentoin sit\u00e4, jotta voit n\u00e4hd\u00e4, mit\u00e4 tapahtuu, katsomalla Partial<\/code>, Omit<\/code>, ja yleist\u00e4 apuohjelmaamme.<\/p>\n
Geneeristen tuotteiden ja apuohjelmien maailma on upea TypeScriptiss\u00e4. Tule mukaan ja aloita kokeilu!<\/p>\n
:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
K\u00e4yt\u00e4 Partial & Omit tehd\u00e4ksesi valinnaisiksi vain tietyt tyypin ominaisuudet.<\/p>\n","protected":false},"author":1,"featured_media":236900,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[750,730,719,895,843,864],"tags":[1166],"class_list":["post-232159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avoin-laehdekoodi","category-javascript-5","category-kehittaejae","category-koodi","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=232159"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232159\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/236900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=232159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=232159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=232159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}