TypeScript: propriedades selecionadas opcionais com Partial & Omit

Quando você usa o utilitário Partialem um tipo, todas as propriedades de tipo são opcionais. Vamos ver como podemos compor este utilitário com outro, Omit, para tornar opcionais apenas algumas propriedades deste tipo. Finalmente, criaremos um tipo de utilitário usando genéricos do TypeScript para aplicar isso em qualquer tipo que desejarmos.

Tornar todas as propriedades de um tipo opcionais

Os utilitários Partiale Omitsão bem conhecidos no domínio TypeScript porque são muito úteis para aplicá-los rapidamente a um tipo e obter o que é basicamente um novo tipo. Partial<T>converterá todas as chaves de um tipo para serem opcionais. Se por exemplo você tem este tipo:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
    keyboard: string
}

todas as propriedades são necessárias quando algo tem esse tipo. Se você quiser atribuir um objeto como este:

const FooFighters: Band = {
    lead: 'Dave Grohl',
    guitar: 'Pat Smears',
    bass: 'Nate Mendel',
    drums: 'Taylor Williams',
}

ele falhará porque está faltando a keyboardpropriedade. Agora, poderíamos marcar essa propriedade como opcional e o TypeScript nos permite fazer isso facilmente. A maneira mais básica de fazer isso é anexando um ponto de interrogação ao seu nome. Neste caso, se for possível editar o tipo original, você pode ir até ele e modificá-lo assim:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
    keyboard?: string
}

Excelente. Agora, a atribuição anterior será bem-sucedida porque keyboardnão é mais necessária. Mas e se não for possível alterar o tipo original por qualquer motivo? O que você pode fazer rapidamente nesses casos é aplicar Partiala esse tipo:

type NotAllTheBand = Partial

const FooFighters: NotAllTheBand = {
    lead: 'Dave Grohl',
    guitar: 'Pat Smears',
    bass: 'Nate Mendel',
    drums: 'Taylor Williams',
}

Isso interrompe a imposição de todas as propriedades, tornando-as opcionais. Talvez às vezes queiramos isso, mas e se quisermos apenas tornar opcional apenas uma propriedade e evitar modificar o tipo original?

Removendo propriedades de um tipo

Antes de passarmos para ele e ver como ele funciona, vamos ver outro utilitário que nos ajudará com isso: Omit. Esse tipo de utilitário remove as propriedades do tipo em que é aplicado. Enquanto Partialnão recebe outros argumentos além do tipo, Omitrecebe o tipo mais as propriedades que você deseja remover: Omit<T, K>.

Não é como se Partialisso os tornasse opcionais: Omitos eliminará completamente do tipo. Quando você usa Partial<Band>é como se você tivesse feito isso:

interface Band {
    lead?: string
    guitar?: string
    bass?: string
    drums?: string
    keyboard?: string
}

No entanto, quando você usa Omit<Band, 'keyboard'>, é como se você tivesse feito isso:

interface Band {
    lead: string
    guitar: string
    bass: string
    drums: string
}

Isso agora está começando a fazer sentido, certo? Você pode imaginar o que poderíamos fazer no TypeScript se tivéssemos 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?

Tipos de interseção

Sim, há uma maneira no TypeScript usando o e comercial &, o operador de interseção de tipo. Este operador, dados dois tipos, constrói um novo com as propriedades que pertencem a ambos os tipos:

interface SomeType {
    propA: string
    propB: number
}

interface AnotherType {
    propC: boolean
    propD: Array
}

type IntersectedType = SomeType & AnotherType

A esta altura você já deve ter percebido: vamos cruzar um tipo parcializado e um tipo onde removemos algumas de suas propriedades.

Tornar as propriedades selecionadas de um tipo opcionais

Vamos tentar dar sentido a isso. É importante ao aprender TypeScript racionalizar o que está acontecendo com nossos tipos.

Vamos pegar um tipo que tem todas as suas propriedades definidas como opcionais graças ao Partialaplicado nele. Em seguida, vamos cruzá-lo com um tipo que tem propriedades selecionadas removidas por Omit. Vejamos um exemplo:

interface SomeType {
    propA: string
    propB: number
}

type OptionalPropB = Partial & Omit

Agora temos um novo tipo, sem modificar o tipo original, que se parece com o seguinte:

type OptionalPropB = {
    propA: string
    propB?: string
}

Isso acontece porque estamos pegando propriedades propA?e propB?do tipo produzido por Partiale cruzando-as com propAo tipo produzido por Omit.

Utilitários genéricos do TypeScript

Ok, agora nosso novo tipo funciona e podemos ter apenas propriedades selecionadas marcadas como opcionais sem modificar o tipo original. No entanto, esta linha

type OptionalPropB = Partial & Omit

É muito verboso, bastante feio e tedioso para escrever todas as vezes. Mais importante, não funcionará para um tipo diferente, teremos que escrevê-lo novamente todas as vezes. Podemos torná-lo mais curto e bonito, e fazê-lo funcionar para qualquer tipo? Sim, o TypeScript nos permite usar genéricos aqui e criar nosso próprio tipo de utilitário:

type Optional = Partial & Omit

E agora temos nosso próprio tipo de utilitário TypeScript implementado com genéricos que podemos usar para tornar opcionais as propriedades de tipo selecionadas em qualquer tipo. Podemos usar assim:

type TypeWithOptionalProp = Optional

Você notará que a assinatura é semelhante a Omit: este utilitário usa o tipo para operar e as propriedades que serão opcionais. Se você tiver mais, você pode usar o operador union:

type TypeWithOptionalProps = Optional

Palavras de encerramento

Agora você pode salvar esse tipo de utilitário genérico em um arquivo e exportá-lo para usá-lo em todo o aplicativo. Aqui está um link para um playground TypeScript onde adicionei o código deste artigo e comentei para que você possa ver o que está acontecendo, olhando para Partial, Omite nosso tipo de utilitário genérico.

O mundo dos genéricos e utilitários é fantástico no TypeScript. Entre e comece a experimentar!