{"id":232163,"date":"2023-01-08T11:52:00","date_gmt":"2023-01-08T08:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232163"},"modified":"2022-11-10T07:53:05","modified_gmt":"2022-11-10T04:53:05","slug":"typescript-propriedades-selecionadas-opcionais-com-partial-omit","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/typescript-propriedades-selecionadas-opcionais-com-partial-omit\/","title":{"rendered":"TypeScript: propriedades selecionadas opcionais com Partial & Omit"},"content":{"rendered":"\n

Quando voc\u00ea usa o utilit\u00e1rio Partial<\/code>em um tipo, todas as propriedades de tipo s\u00e3o opcionais. Vamos ver como podemos compor este utilit\u00e1rio com outro, Omit<\/code>, para tornar opcionais apenas algumas propriedades deste tipo. Finalmente, criaremos um tipo de utilit\u00e1rio usando gen\u00e9ricos do TypeScript para aplicar isso em qualquer tipo que desejarmos.<\/p>\n

Tornar todas as propriedades de um tipo opcionais<\/h2>\n

Os utilit\u00e1rios Partial<\/code>e Omit<\/code>s\u00e3o bem conhecidos no dom\u00ednio TypeScript<\/a> porque s\u00e3o muito \u00fateis para aplic\u00e1-los rapidamente a um tipo e obter o que \u00e9 basicamente um novo tipo. Partial<T><\/code>converter\u00e1 todas as chaves de um tipo para serem opcionais. Se por exemplo voc\u00ea tem este tipo:<\/p>\n

interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard: string\n}<\/code><\/pre>\n
todas as propriedades s\u00e3o necess\u00e1rias quando algo tem esse tipo. Se voc\u00ea quiser atribuir um objeto como este:<\/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
ele falhar\u00e1 porque est\u00e1 faltando a keyboard<\/code>propriedade. Agora, poder\u00edamos marcar essa propriedade como opcional e o TypeScript nos permite fazer isso facilmente. A maneira mais b\u00e1sica de fazer isso \u00e9 anexando um ponto de interroga\u00e7\u00e3o ao seu nome. Neste caso, se for poss\u00edvel editar o tipo original, voc\u00ea pode ir at\u00e9 ele e modific\u00e1-lo assim:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n    keyboard?: string\n}<\/code><\/pre>\n
Excelente. Agora, a atribui\u00e7\u00e3o anterior ser\u00e1 bem-sucedida porque keyboard<\/code>n\u00e3o \u00e9 mais necess\u00e1ria. Mas e se n\u00e3o for poss\u00edvel alterar o tipo original por qualquer motivo? O que voc\u00ea pode fazer rapidamente nesses casos \u00e9 aplicar Partial<\/code>a esse 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
Isso interrompe a imposi\u00e7\u00e3o de todas as propriedades, tornando-as opcionais. Talvez \u00e0s vezes queiramos isso, mas e se quisermos apenas tornar opcional apenas uma propriedade e evitar modificar o tipo original?<\/p>\n
Removendo propriedades de um tipo<\/h2>\n
Antes de passarmos para ele e ver como ele funciona, vamos ver outro utilit\u00e1rio que nos ajudar\u00e1 com isso: Omit<\/code>. Esse tipo de utilit\u00e1rio remove as propriedades do tipo em que \u00e9 aplicado. Enquanto Partial<\/code>n\u00e3o recebe outros argumentos al\u00e9m do tipo, Omit<\/code>recebe o tipo mais as propriedades que voc\u00ea deseja remover: Omit<T, K><\/code>.<\/p>\n
N\u00e3o \u00e9 como se Partial<\/code>isso os tornasse opcionais: Omit<\/code>os eliminar\u00e1 completamente do tipo. Quando voc\u00ea usa Partial<Band><\/code>\u00e9 como se voc\u00ea tivesse feito isso:<\/p>\n
interface Band {\n    lead?: string\n    guitar?: string\n    bass?: string\n    drums?: string\n    keyboard?: string\n}<\/code><\/pre>\n
No entanto, quando voc\u00ea usa Omit<Band, 'keyboard'><\/code>, \u00e9 como se voc\u00ea tivesse feito isso:<\/p>\n
interface Band {\n    lead: string\n    guitar: string\n    bass: string\n    drums: string\n}<\/code><\/pre>\n
Isso agora est\u00e1 come\u00e7ando a fazer sentido, certo? Voc\u00ea pode imaginar o que poder\u00edamos fazer no TypeScript se tiv\u00e9ssemos um tipo que tivesse todas as propriedades do original definidas como opcionais e outro tipo que tivesse apenas as propriedades que desejamos exigir? Se ao menos houvesse uma maneira de… cruzar esses tipos, certo?<\/p>\n
Tipos de interse\u00e7\u00e3o<\/h2>\n
Sim, h\u00e1 uma maneira no TypeScript usando o e comercial &<\/code>, o operador de interse\u00e7\u00e3o de tipo. Este operador, dados dois tipos, constr\u00f3i um novo com as propriedades que pertencem a ambos os tipos:<\/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 esta altura voc\u00ea j\u00e1 deve ter percebido: vamos cruzar um tipo parcializado e um tipo onde removemos algumas de suas propriedades.<\/p>\n
Tornar as propriedades selecionadas de um tipo opcionais<\/h2>\n
Vamos tentar dar sentido a isso. \u00c9 importante ao aprender TypeScript racionalizar o que est\u00e1 acontecendo com nossos tipos.<\/p>\n
Vamos pegar um tipo que tem todas as suas propriedades definidas como opcionais gra\u00e7as ao Partial<\/code>aplicado nele. Em seguida, vamos cruz\u00e1-lo com um tipo que tem propriedades selecionadas removidas por Omit<\/code>. Vejamos um exemplo:<\/p>\n
interface SomeType {\n    propA: string\n    propB: number\n}\n\ntype OptionalPropB = Partial & Omit<\/code><\/pre>\n
Agora temos um novo tipo, sem modificar o tipo original, que se parece com o seguinte:<\/p>\n
type OptionalPropB = {\n    propA: string\n    propB?: string\n}<\/code><\/pre>\n
Isso acontece porque estamos pegando propriedades propA?<\/code>e propB?<\/code>do tipo produzido por Partial<\/code>e cruzando-as com propA<\/code>o tipo produzido por Omit<\/code>.<\/p>\n
Utilit\u00e1rios gen\u00e9ricos do TypeScript<\/h2>\n
Ok, agora nosso novo tipo funciona e podemos ter apenas propriedades selecionadas marcadas como opcionais sem modificar o tipo original. No entanto, esta linha<\/p>\n
type OptionalPropB = Partial & Omit<\/code><\/pre>\n
\u00c9 muito verboso, bastante feio e tedioso para escrever todas as vezes. Mais importante, n\u00e3o funcionar\u00e1 para um tipo diferente, teremos que escrev\u00ea-lo novamente todas as vezes. Podemos torn\u00e1-lo mais curto e bonito, e faz\u00ea-lo funcionar para qualquer tipo? Sim, o TypeScript nos permite usar gen\u00e9ricos aqui e criar nosso pr\u00f3prio tipo de utilit\u00e1rio:<\/p>\n
type Optional = Partial & Omit<\/code><\/pre>\n
E agora temos nosso pr\u00f3prio tipo de utilit\u00e1rio TypeScript implementado com gen\u00e9ricos que podemos usar para tornar opcionais as propriedades de tipo selecionadas em qualquer tipo. Podemos usar assim:<\/p>\n
type TypeWithOptionalProp = Optional<\/code><\/pre>\n
Voc\u00ea notar\u00e1 que a assinatura \u00e9 semelhante a Omit: este utilit\u00e1rio usa o tipo para operar e as propriedades que ser\u00e3o opcionais. Se voc\u00ea tiver mais, voc\u00ea pode usar o operador union:<\/p>\n
type TypeWithOptionalProps = Optional<\/code><\/pre>\n
Palavras de encerramento<\/h2>\n
Agora voc\u00ea pode salvar esse tipo de utilit\u00e1rio gen\u00e9rico em um arquivo e export\u00e1-lo para us\u00e1-lo em todo o aplicativo. Aqui est\u00e1 um link para um playground TypeScript<\/a> onde adicionei o c\u00f3digo deste artigo e comentei para que voc\u00ea possa ver o que est\u00e1 acontecendo, olhando para Partial<\/code>, Omit<\/code>e nosso tipo de utilit\u00e1rio gen\u00e9rico.<\/p>\n
O mundo dos gen\u00e9ricos e utilit\u00e1rios \u00e9 fant\u00e1stico no TypeScript. Entre e comece a experimentar!<\/p>\n
Fonte de grava\u00e7\u00e3o:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Use Parcial e Omitir para tornar opcionais apenas determinadas propriedades de um 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":[898,753,722,733,846,867],"tags":[1170],"class_list":["post-232163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-codigo-aberto","category-desenvolvedor","category-javascript-8","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=232163"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232163\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/236900"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=232163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=232163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=232163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}