{"id":232328,"date":"2023-01-08T12:16:00","date_gmt":"2023-01-08T09:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232328"},"modified":"2022-11-10T08:46:15","modified_gmt":"2022-11-10T05:46:15","slug":"typescript-proprieta-selezionate-facoltative-con-parziale-ometti","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/typescript-proprieta-selezionate-facoltative-con-parziale-ometti\/","title":{"rendered":"TypeScript: propriet\u00e0 selezionate facoltative con Parziale & Ometti"},"content":{"rendered":"\n

Quando si utilizza l’utilit\u00e0 Partial<\/code>su un tipo, tutte le propriet\u00e0 del tipo saranno facoltative. Vediamo come possiamo comporre questa utility con un’altra, Omit<\/code>, per rendere opzionali solo alcune propriet\u00e0 di questo tipo. Creeremo infine un tipo di utilit\u00e0 utilizzando i generici TypeScript per applicarlo a qualsiasi tipo desideriamo.<\/p>\n

Rendi facoltative tutte le propriet\u00e0 di un tipo<\/h2>\n

Le utilit\u00e0 Partial<\/code>e Omit<\/code>sono ben note nel regno di TypeScript<\/a> perch\u00e9 sono molto utili per applicarle rapidamente a un tipo e ottenere quello che \u00e8 fondamentalmente un nuovo tipo. Partial<T><\/code>convertir\u00e0 tutte le chiavi di un tipo in facoltative. Se ad esempio hai questo tipo:<\/p>\n

interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard: string\n}<\/code><\/pre>\n
tutte le propriet\u00e0 sono richieste quando qualcosa ha questo tipo. Se vuoi assegnare un oggetto come questo:<\/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
fallir\u00e0 perch\u00e9 manca la keyboard<\/code>propriet\u00e0. Ora, potremmo contrassegnare questa propriet\u00e0 come opzionale e TypeScript ce lo consente facilmente. Il modo pi\u00f9 semplice per farlo \u00e8 aggiungere un punto interrogativo al suo nome. In questo caso, se \u00e8 possibile modificare il tipo originale, puoi accedervi e modificarlo in questo modo:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard?: string\n}<\/code><\/pre>\n
Grande. Ora l’assegnazione precedente andr\u00e0 a buon fine perch\u00e9 keyboard<\/code>non \u00e8 pi\u00f9 richiesta. Ma cosa succede se non \u00e8 possibile cambiare il tipo originale per qualsiasi motivo? Quello che puoi fare rapidamente in questi casi \u00e8 applicare Partial<\/code>a questo tipo:<\/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
Ci\u00f2 interrompe l’applicazione di tutte le propriet\u00e0, rendendole tutte facoltative. Forse a volte lo vogliamo, ma cosa succede se vogliamo solo rendere opzionale una sola propriet\u00e0 ed evitare di modificare il tipo originale?<\/p>\n
Rimozione di propriet\u00e0 da un tipo<\/h2>\n
Prima di passare ad esso e vedere come funziona, vediamo un’altra utility che ci aiuter\u00e0 in questo: Omit<\/code>. Questo tipo di utilit\u00e0 rimuove le propriet\u00e0 dal tipo a cui \u00e8 applicato. Sebbene Partial<\/code>non accetti altri argomenti oltre al tipo, Omit<\/code>prende il tipo pi\u00f9 le propriet\u00e0 che desideri rimuovere: Omit<T, K><\/code>.<\/p>\n
Non \u00e8 Partial<\/code>che li renda opzionali: Omit<\/code>li canceller\u00e0 completamente dal tipo. Quando lo usi Partial<Band><\/code>\u00e8 come se avessi fatto questo:<\/p>\n
interface Band {\n    lead?: string\n    guitar?: string\n    bass?: string\n    drums?: string\n    keyboard?: string\n}<\/code><\/pre>\n
Tuttavia, quando usi Omit<Band, 'keyboard'><\/code>, \u00e8 come se avessi fatto questo:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n}<\/code><\/pre>\n
Questo ora sta iniziando ad avere senso, giusto? Riesci a immaginare cosa potremmo fare in TypeScript se avessimo un tipo che ha tutte le propriet\u00e0 dell’originale impostate su opzionali e un altro tipo che ha solo le propriet\u00e0 che vogliamo richiedere? Se solo ci fosse un modo per… intersecare questi tipi, giusto?<\/p>\n
Tipi intersecanti<\/h2>\n
S\u00ec, c’\u00e8 un modo in TypeScript usando la e commerciale &<\/code>, l’operatore di intersezione del tipo. Questo operatore, dati due tipi, ne costruisce uno nuovo con le propriet\u00e0 che appartengono a entrambi i tipi:<\/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
A questo punto probabilmente l’hai capito: incroceremo un tipo parzializzato e un tipo in cui abbiamo rimosso alcune delle sue propriet\u00e0.<\/p>\n
Rendi facoltative le propriet\u00e0 selezionate di un tipo<\/h2>\n
Proviamo a dargli un senso. \u00c8 importante quando si impara TypeScript per razionalizzare ci\u00f2 che sta accadendo con i nostri tipi.<\/p>\n
Prenderemo un tipo che ha tutte le sue propriet\u00e0 impostate su facoltative grazie Partial<\/code>all’applicazione su di esso. Successivamente, lo intersecheremo con un tipo che ha selezionato le propriet\u00e0 rimosse da Omit<\/code>. Vediamo un esempio:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ntype OptionalPropB = Partial & Omit<\/code><\/pre>\n
Ora abbiamo un nuovo tipo, senza modificare il tipo originale, che assomiglia al seguente:<\/p>\n
type OptionalPropB = {\n    propA: string\n    propB?: string\n}<\/code><\/pre>\n
Ci\u00f2 accade perch\u00e9 estraiamo propriet\u00e0 propA?<\/code>e propB?<\/code>dal tipo prodotto da Partial<\/code>e le intersechiamo con propA<\/code>il tipo prodotto da Omit<\/code>.<\/p>\n
Utilit\u00e0 generiche TypeScript<\/h2>\n
Ok, ora il nostro nuovo tipo funziona e possiamo avere solo le propriet\u00e0 selezionate contrassegnate come opzionali senza modificare il tipo originale. Tuttavia, questa linea<\/p>\n
type OptionalPropB = Partial & Omit<\/code><\/pre>\n
\u00c8 troppo prolisso, piuttosto brutto e noioso da scrivere ogni volta. Ancora pi\u00f9 importante, non funzioner\u00e0 con un tipo diverso, dovremo scriverlo di nuovo ogni volta. Possiamo renderlo pi\u00f9 corto e pi\u00f9 carino e farlo funzionare per qualsiasi tipo? S\u00ec, TypeScript ci consente di utilizzare qui i generici e creare il nostro tipo di utilit\u00e0:<\/p>\n
type Optional = Partial & Omit<\/code><\/pre>\n
E ora abbiamo il nostro tipo di utilit\u00e0 TypeScript implementato con generici che possiamo utilizzare per rendere le propriet\u00e0 del tipo selezionato opzionali in qualsiasi tipo. Possiamo usarlo in questo modo:<\/p>\n
type TypeWithOptionalProp = Optional<\/code><\/pre>\n
Noterai che la firma \u00e8 simile a Omit: questa utility prende il tipo su cui operare e le propriet\u00e0 che saranno rese opzionali. Se ne hai di pi\u00f9, puoi utilizzare l’operatore union:<\/p>\n
type TypeWithOptionalProps = Optional<\/code><\/pre>\n
Parole di chiusura<\/h2>\n
Ora puoi salvare questo tipo di utilit\u00e0 generico in un file ed esportarlo per usarlo nell’intera app. Ecco un collegamento a un playground TypeScript<\/a> in cui ho aggiunto il codice di questo articolo e l’ho commentato in modo che tu possa vedere cosa sta succedendo, guardando Partial<\/code>, Omit<\/code>e il nostro tipo di utilit\u00e0 generico.<\/p>\n
Il mondo dei generici e dei programmi di utilit\u00e0 \u00e8 fantastico in TypeScript. Entra e inizia a sperimentare!<\/p>\n
Fonte di registrazione:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Utilizzare Parziale e ometti per rendere facoltative solo alcune propriet\u00e0 di un tipo.<\/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":[896,731,751,720,844,865],"tags":[1168],"class_list":["post-232328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-javascript-6","category-open-source-projektmanagement-3","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/232328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=232328"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/232328\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/236900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=232328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=232328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=232328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}