{"id":231598,"date":"2023-01-08T11:41:00","date_gmt":"2023-01-08T08:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231598"},"modified":"2022-12-25T19:00:45","modified_gmt":"2022-12-25T16:00:45","slug":"typescript-valda-egenskaper-valfria-med-partial-utelaemna","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/typescript-valda-egenskaper-valfria-med-partial-utelaemna\/","title":{"rendered":"TypeScript: valda egenskaper valfria med Partial & Utel\u00e4mna"},"content":{"rendered":"\n

N\u00e4r du anv\u00e4nder verktyget Partial<\/code>p\u00e5 en typ kommer det att g\u00f6ra alla typegenskaper valfria. L\u00e5t oss se hur vi kan komponera det h\u00e4r verktyget med ett annat, Omit<\/code>, f\u00f6r att g\u00f6ra valfria endast vissa egenskaper av denna typ. Vi kommer \u00e4ntligen att skapa en verktygstyp med Generics TypeScript f\u00f6r att till\u00e4mpa detta p\u00e5 vilken typ vi vill ha.<\/p>\n

G\u00f6r alla egenskaper av en typ valfria<\/h2>\n

Verktygen Partial<\/code>och Omit<\/code>\u00e4r v\u00e4lk\u00e4nda i TypeScript-<\/a> sf\u00e4ren eftersom de \u00e4r v\u00e4ldigt praktiska f\u00f6r att snabbt applicera dem p\u00e5 en typ och f\u00e5 vad som i princip \u00e4r en ny typ. Partial<T><\/code>konverterar alla nycklar av en typ till att vara valfria. Om du till exempel har den h\u00e4r typen:<\/p>\n

interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard: string\n}<\/code><\/pre>\n
alla egenskaper kr\u00e4vs n\u00e4r n\u00e5got har den h\u00e4r typen. Om du vill tilldela ett objekt s\u00e5 h\u00e4r:<\/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
det kommer att misslyckas eftersom det saknar keyboard<\/code>egendomen. Nu kan vi markera den h\u00e4r egenskapen som valfri och TypeScript l\u00e5ter oss enkelt g\u00f6ra det. Det mest grundl\u00e4ggande s\u00e4ttet att g\u00f6ra det \u00e4r genom att s\u00e4tta ett fr\u00e5getecken till namnet. I det h\u00e4r fallet, om det \u00e4r m\u00f6jligt att redigera originaltypen, kan du g\u00e5 till den och \u00e4ndra den s\u00e5 h\u00e4r:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard?: string\n}<\/code><\/pre>\n
Bra. Nu kommer det tidigare uppdraget att lyckas eftersom det keyboard<\/code>inte l\u00e4ngre kr\u00e4vs. Men vad h\u00e4nder om det inte \u00e4r m\u00f6jligt att \u00e4ndra originaltypen av n\u00e5gon anledning? Vad du snabbt kan g\u00f6ra i dessa fall \u00e4r att ans\u00f6ka Partial<\/code>om denna typ:<\/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
Detta slutar uppr\u00e4tth\u00e5lla alla egenskaper, vilket g\u00f6r dem alla valfria. Kanske vill vi ibland ha det h\u00e4r, men t\u00e4nk om vi bara vill g\u00f6ra bara en egenskap valfri och undvika att modifiera den ursprungliga typen?<\/p>\n
Ta bort egenskaper fr\u00e5n en typ<\/h2>\n
Innan vi g\u00e5r vidare till det och ser hur det fungerar, l\u00e5t oss se ett annat verktyg som hj\u00e4lper oss med detta: Omit<\/code>. Den h\u00e4r verktygstypen tar bort egenskaper fr\u00e5n typen d\u00e4r den har till\u00e4mpats. Medan Partial<\/code>tar inte andra argument \u00e4n typen, Omit<\/code>tar typen plus de egenskaper du vill ta bort: Omit<T, K><\/code>.<\/p>\n
Det \u00e4r inte s\u00e5 Partial<\/code>att det g\u00f6r dem valfria: Omit<\/code>kommer att helt utpl\u00e5na dem fr\u00e5n typen. N\u00e4r du anv\u00e4nder Partial<Band><\/code>det \u00e4r det som om du har gjort detta:<\/p>\n
interface Band {\n    lead?: string\n    guitar?: string\n    bass?: string\n    drums?: string\n    keyboard?: string\n}<\/code><\/pre>\n
Men n\u00e4r du anv\u00e4nder Omit<Band, 'keyboard'><\/code>, \u00e4r det som om du har gjort det h\u00e4r:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n}<\/code><\/pre>\n
Det h\u00e4r b\u00f6rjar bli vettigt nu, eller hur? Kan du f\u00f6rest\u00e4lla dig vad vi skulle kunna g\u00f6ra i TypeScript om vi har en typ som har alla egenskaper f\u00f6r den ursprungliga upps\u00e4ttningen till valfri och en annan typ som bara har de egenskaper som vi vill kr\u00e4va? Om det bara fanns ett s\u00e4tt att… sk\u00e4ra dessa typer, eller hur?<\/p>\n
Korsande typer<\/h2>\n
Ja, det finns ett s\u00e4tt i TypeScript att anv\u00e4nda et-tecken &<\/code>, typsk\u00e4rningsoperatorn. Denna operat\u00f6r, givet tv\u00e5 typer, konstruerar en ny med egenskaperna som h\u00f6r till b\u00e5da typerna:<\/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
Vid det h\u00e4r laget har du f\u00f6rmodligen r\u00e4knat ut det: vi kommer att sk\u00e4ra en partialiserad typ och en typ d\u00e4r vi tog bort n\u00e5gra av dess egenskaper.<\/p>\n
G\u00f6r valda egenskaper av en typ valfria<\/h2>\n
L\u00e5t oss f\u00f6rs\u00f6ka f\u00f6rst\u00e5 det. Det \u00e4r viktigt n\u00e4r man l\u00e4r sig TypeScript att rationalisera vad som h\u00e4nder med v\u00e5ra typer.<\/p>\n
Vi ska ta en typ som har alla dess egenskaper inst\u00e4llda p\u00e5 valfria tack vare Partial<\/code>applicerade p\u00e5 den. D\u00e4refter ska vi sk\u00e4ra den med en typ som har valda egenskaper borttagna av Omit<\/code>. L\u00e5t oss se ett exempel:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ntype OptionalPropB = Partial & Omit<\/code><\/pre>\n
Vi har nu en ny typ, utan att \u00e4ndra den ursprungliga typen, som ser ut som f\u00f6ljande:<\/p>\n
type OptionalPropB = {\n    propA: string\n    propB?: string\n}<\/code><\/pre>\n
Detta h\u00e4nder eftersom vi tar tag i egenskaper propA?<\/code>och propB?<\/code>fr\u00e5n typen som produceras av Partial<\/code>och korsar dem med propA<\/code>fr\u00e5n typen som produceras av Omit<\/code>.<\/p>\n
Generiska TypeScript-verktyg<\/h2>\n
Ok, nu fungerar v\u00e5r nya typ och vi kan bara markera valda egenskaper som valfria utan att \u00e4ndra den ursprungliga typen. Men denna linje<\/p>\n
type OptionalPropB = Partial & Omit<\/code><\/pre>\n
\u00c4r f\u00f6r m\u00e5ngfacetterad, ganska ful och tr\u00e5kig att skriva varje g\u00e5ng. \u00c4nnu viktigare, det kommer inte att fungera f\u00f6r en annan typ, vi m\u00e5ste skriva det igen varje g\u00e5ng. Kan vi g\u00f6ra det kortare och snyggare och f\u00e5 det att fungera f\u00f6r alla typer? Ja, TypeScript till\u00e5ter oss att anv\u00e4nda generika h\u00e4r och skapa v\u00e5r egen verktygstyp:<\/p>\n
type Optional = Partial & Omit<\/code><\/pre>\n
Och nu har vi v\u00e5r egen TypeScript-verktygstyp implementerad med generika som vi kan anv\u00e4nda f\u00f6r att g\u00f6ra valda typegenskaper valfria i alla typer. Vi kan anv\u00e4nda det s\u00e5 h\u00e4r:<\/p>\n
type TypeWithOptionalProp = Optional<\/code><\/pre>\n
Du kommer att m\u00e4rka att signaturen liknar utel\u00e4mna: det h\u00e4r verktyget tar typen att arbeta p\u00e5 och egenskaperna som kommer att g\u00f6ras valfria. Om du har fler kan du anv\u00e4nda den fackliga operat\u00f6ren:<\/p>\n
type TypeWithOptionalProps = Optional<\/code><\/pre>\n
Avslutningsord<\/h2>\n
Du kan nu spara den h\u00e4r generiska verktygstypen i en fil och exportera den f\u00f6r att anv\u00e4nda den i hela appen. H\u00e4r \u00e4r en l\u00e4nk till en TypeScript-lekplats<\/a> d\u00e4r jag la till koden fr\u00e5n den h\u00e4r artikeln och kommenterade den s\u00e5 att du kan se vad som h\u00e4nder, titta p\u00e5 Partial<\/code>, Omit<\/code>, och v\u00e5r generiska verktygstyp.<\/p>\n
V\u00e4rlden av generika och verktyg \u00e4r fantastisk i TypeScript. Kom in i det och b\u00f6rja experimentera!<\/p>\n
Inspelningsk\u00e4lla:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Anv\u00e4nd Partiell & Uteslut f\u00f6r att g\u00f6ra valfria endast vissa egenskaper av en typ.<\/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":[848,734,901,755,724,868],"tags":[1173],"class_list":["post-231598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-javascript-9","category-koda","category-oeppen-kaella","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/231598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=231598"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/231598\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/236900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=231598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=231598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=231598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}