{"id":231505,"date":"2023-01-08T11:35:00","date_gmt":"2023-01-08T08:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231505"},"modified":"2022-12-25T19:00:44","modified_gmt":"2022-12-25T16:00:44","slug":"typescript-wybrane-wlasciwosci-opcjonalne-z-czesciowym-i-pominieciem","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/typescript-wybrane-wlasciwosci-opcjonalne-z-czesciowym-i-pominieciem\/","title":{"rendered":"TypeScript: wybrane w\u0142a\u015bciwo\u015bci opcjonalne z cz\u0119\u015bciowym i pomini\u0119ciem"},"content":{"rendered":"\n

Gdy u\u017cywasz narz\u0119dzia Partial<\/code>do typu, wszystkie w\u0142a\u015bciwo\u015bci typu staj\u0105 si\u0119 opcjonalne. Zobaczmy, jak mo\u017cemy skomponowa\u0107 to narz\u0119dzie z innym, Omit<\/code>, aby uczyni\u0107 opcjonalnymi tylko niekt\u00f3re w\u0142a\u015bciwo\u015bci tego typu. W ko\u0144cu utworzymy typ narz\u0119dzia za pomoc\u0105 generyk\u00f3w TypeScript, aby zastosowa\u0107 to na dowolnym typie.<\/p>\n

Ustaw wszystkie w\u0142a\u015bciwo\u015bci typu jako opcjonalne<\/h2>\n

Narz\u0119dzia Partial<\/code>i Omit<\/code>s\u0105 dobrze znane w dziedzinie TypeScript<\/a>, poniewa\u017c s\u0105 bardzo przydatne do szybkiego zastosowania ich do typu i uzyskania zasadniczo nowego typu. Partial<T><\/code>przekonwertuje wszystkie klucze danego typu na opcjonalne. Je\u015bli na przyk\u0142ad masz ten typ:<\/p>\n

interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard: string\n}<\/code><\/pre>\n
wszystkie w\u0142a\u015bciwo\u015bci s\u0105 wymagane, gdy co\u015b ma ten typ. Je\u015bli chcesz przypisa\u0107 taki obiekt:<\/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
nie powiedzie si\u0119, poniewa\u017c brakuje keyboard<\/code>w\u0142a\u015bciwo\u015bci. Teraz mogliby\u015bmy oznaczy\u0107 t\u0119 w\u0142a\u015bciwo\u015b\u0107 jako opcjonaln\u0105, a TypeScript \u0142atwo nam to umo\u017cliwia. Najprostszym sposobem na to jest dodanie znaku zapytania do jego nazwy. W takim przypadku, je\u015bli istnieje mo\u017cliwo\u015b\u0107 edycji oryginalnego typu, mo\u017cesz przej\u015b\u0107 do niego i zmodyfikowa\u0107 go w ten spos\u00f3b:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard?: string\n}<\/code><\/pre>\n
\u015awietny. Teraz poprzednie zadanie si\u0119 powiedzie, poniewa\u017c keyboard<\/code>nie jest ju\u017c wymagane. Ale co, je\u015bli z jakiegokolwiek powodu nie mo\u017cna zmieni\u0107 oryginalnego typu? To, co mo\u017cesz szybko zrobi\u0107 w takich przypadkach, to zastosowa\u0107 Partial<\/code>si\u0119 do tego typu:<\/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
To przestaje wymusza\u0107 wszystkie w\u0142a\u015bciwo\u015bci, czyni\u0105c je opcjonalnymi. Mo\u017ce czasami tego chcemy, ale co, je\u015bli chcemy, aby tylko jedna w\u0142a\u015bciwo\u015b\u0107 by\u0142a opcjonalna i unikn\u0105\u0107 modyfikowania oryginalnego typu?<\/p>\n
Usuwanie w\u0142a\u015bciwo\u015bci z typu<\/h2>\n
Zanim przejdziemy do tego i zobaczymy, jak to dzia\u0142a, zobaczmy inne narz\u0119dzie, kt\u00f3re nam w tym pomo\u017ce: Omit<\/code>. Ten typ narz\u0119dzia usuwa w\u0142a\u015bciwo\u015bci z typu, w kt\u00f3rym jest stosowany. Chocia\u017c Partial<\/code>nie przyjmuje innych argument\u00f3w ni\u017c typ, Omit<\/code>przyjmuje typ oraz w\u0142a\u015bciwo\u015bci, kt\u00f3re chcesz usun\u0105\u0107: Omit<T, K><\/code>.<\/p>\n
To nie jest tak Partial<\/code>, \u017ce czyni je opcjonalnymi: Omit<\/code>ca\u0142kowicie wymazuje je z typu. Kiedy u\u017cywasz Partial<Band><\/code>, to tak, jakby\u015b to zrobi\u0142:<\/p>\n
interface Band {\n    lead?: string\n    guitar?: string\n    bass?: string\n    drums?: string\n    keyboard?: string\n}<\/code><\/pre>\n
Jednak gdy u\u017cywasz Omit<Band, 'keyboard'><\/code>, to tak, jakby\u015b to zrobi\u0142:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n}<\/code><\/pre>\n
Teraz zaczyna to mie\u0107 sens, prawda? Czy mo\u017cesz sobie wyobrazi\u0107, co mogliby\u015bmy zrobi\u0107 w TypeScript, je\u015bli mamy typ, kt\u00f3ry ma wszystkie w\u0142a\u015bciwo\u015bci oryginalnego zestawu jako opcjonalny, a inny typ ma tylko te w\u0142a\u015bciwo\u015bci, kt\u00f3rych chcemy wymaga\u0107? Gdyby tylko istnia\u0142 spos\u00f3b\u2026 przecinania si\u0119 tych typ\u00f3w, prawda?<\/p>\n
Przecinaj\u0105ce si\u0119 typy<\/h2>\n
Tak, w TypeScript mo\u017cna u\u017cy\u0107 znaku ampersand &<\/code>, operatora przeci\u0119cia typu. Ten operator, maj\u0105c dwa typy, konstruuje nowy z w\u0142a\u015bciwo\u015bciami nale\u017c\u0105cymi do obu typ\u00f3w:<\/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
Do tej pory prawdopodobnie ju\u017c si\u0119 zorientowa\u0142e\u015b: zamierzamy przeci\u0105\u0107 typ cz\u0119\u015bciowy i typ, w kt\u00f3rym usun\u0119li\u015bmy niekt\u00f3re jego w\u0142a\u015bciwo\u015bci.<\/p>\n
Ustaw wybrane w\u0142a\u015bciwo\u015bci typu jako opcjonalne<\/h2>\n
Spr\u00f3bujmy to zrozumie\u0107. Podczas nauki j\u0119zyka TypeScript wa\u017cne jest, aby zracjonalizowa\u0107 to, co dzieje si\u0119 z naszymi typami.<\/p>\n
Zamierzamy pobra\u0107 typ, kt\u00f3ry ma wszystkie w\u0142a\u015bciwo\u015bci ustawione jako opcjonalne dzi\u0119ki Partial<\/code>zastosowaniu na nim. Nast\u0119pnie przetniemy go z typem, kt\u00f3ry ma wybrane w\u0142a\u015bciwo\u015bci usuni\u0119te przez Omit<\/code>. Zobaczmy przyk\u0142ad:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ntype OptionalPropB = Partial & Omit<\/code><\/pre>\n
Mamy teraz nowy typ, bez modyfikowania oryginalnego typu, kt\u00f3ry wygl\u0105da nast\u0119puj\u0105co:<\/p>\n
type OptionalPropB = {\n    propA: string\n    propB?: string\n}<\/code><\/pre>\n
Dzieje si\u0119 tak, poniewa\u017c pobieramy w\u0142a\u015bciwo\u015bci propA?<\/code>z propB?<\/code>typu produkowanego przez Partial<\/code>i przecinamy je z propA<\/code>typem produkowanym przez Omit<\/code>.<\/p>\n
Og\u00f3lne narz\u0119dzia TypeScript<\/h2>\n
Ok, teraz nasz nowy typ dzia\u0142a i mo\u017cemy mie\u0107 tylko wybrane w\u0142a\u015bciwo\u015bci oznaczone jako opcjonalne bez modyfikowania oryginalnego typu. Jednak ta linia<\/p>\n
type OptionalPropB = Partial & Omit<\/code><\/pre>\n
Jest zbyt gadatliwy, do\u015b\u0107 brzydki i nu\u017c\u0105cy, by pisa\u0107 za ka\u017cdym razem. Co wa\u017cniejsze, nie zadzia\u0142a dla innego typu, za ka\u017cdym razem b\u0119dziemy musieli napisa\u0107 to od nowa. Czy mo\u017cemy go skr\u00f3ci\u0107 i upi\u0119kszy\u0107 i sprawi\u0107, by dzia\u0142a\u0142 dla ka\u017cdego typu? Tak, TypeScript pozwala nam tutaj u\u017cy\u0107 generyk\u00f3w i stworzy\u0107 w\u0142asny typ narz\u0119dzia:<\/p>\n
type Optional = Partial & Omit<\/code><\/pre>\n
A teraz mamy w\u0142asny typ narz\u0119dzia TypeScript zaimplementowany z rodzajami, kt\u00f3rych mo\u017cemy u\u017cy\u0107, aby uczyni\u0107 wybrane w\u0142a\u015bciwo\u015bci typu opcjonalnymi w dowolnym typie. Mo\u017cemy go u\u017cy\u0107 tak:<\/p>\n
type TypeWithOptionalProp = Optional<\/code><\/pre>\n
Zauwa\u017cysz, \u017ce podpis jest podobny do Pomi\u0144: to narz\u0119dzie przyjmuje typ, na kt\u00f3rym ma dzia\u0142a\u0107, oraz w\u0142a\u015bciwo\u015bci, kt\u00f3re b\u0119d\u0105 opcjonalne. Je\u015bli masz wi\u0119cej, mo\u017cesz skorzysta\u0107 z operatora union:<\/p>\n
type TypeWithOptionalProps = Optional<\/code><\/pre>\n
S\u0142owa zamykaj\u0105ce<\/h2>\n
Mo\u017cesz teraz zapisa\u0107 ten og\u00f3lny typ narz\u0119dzia w pliku i wyeksportowa\u0107 go, aby u\u017cywa\u0107 go w ca\u0142ej aplikacji. Oto link do placu zabaw TypeScript<\/a>, w kt\u00f3rym doda\u0142em kod z tego artyku\u0142u i skomentowa\u0142em go, dzi\u0119ki czemu mo\u017cna zobaczy\u0107, co si\u0119 dzieje, patrz\u0105c na Partial<\/code>, Omit<\/code>i nasz og\u00f3lny typ narz\u0119dzia.<\/p>\n
\u015awiat generyk\u00f3w i narz\u0119dzi jest fantastyczny w TypeScript. Wejd\u017a w to i zacznij eksperymentowa\u0107!<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
U\u017cyj opcji Cz\u0119\u015bciowe i pomi\u0144, aby uczyni\u0107 opcjonalnymi tylko niekt\u00f3re w\u0142a\u015bciwo\u015bci typu.<\/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":[721,732,897,752,845,866],"tags":[1169],"class_list":["post-231505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-javascript-7","category-kod","category-otwarte-zrodlo","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/231505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=231505"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/231505\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/236900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=231505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=231505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=231505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}