Essa é uma série de artigos sobre os “utility types” do typescript, neste artigo nós iremos ver sobre o Pick<T, K>, veremos exemplos práticos de como utilizá-lo, como ele funciona por baixo dos panos e também algumas dicas extras.
Antes de começar, precisamos primeiro entender o que são esses tais “utility types” que o typescript fornece, de acordo com a própria documentação do typescript, “utility types” são “tipos para facilitar as transformações de tipos comuns.”
Talvez tenha ficado um pouco confuso né? O que isso significa? Bom, basicamente significa que “utility types” são nada mais nada menos do
que tipos que transformam um tipo em outro, o typescript fornece vários “utility types” (ao todo existem mais de 20), nessa série de artigos iremos abordar os principais, e o foco do artigo de hoje é o Pick, bora lá :D
Pick<Type, Keys>
O tipo Pick serve para “pegar” uma propriedade específica de um objeto, é super útil para reaproveitarmos a propriedade e sua respectiva tipagem já definida anteriormente, o primeiro parâmetro é o tipo, e o segundo é uma chave ou um conjunto de chaves desse tipo, vamos dar uma olhada em um exemplo:
Vamos criar uma interface chamada ‘Carro’ com algumas propriedades:
Show! Agora queremos criar uma interface chamada ‘Marca’, qual propriedade de ‘Carro’ poderia ser reutilizada nessa nossa interface? Bom, na prática, podemos reutilizar qualquer uma, mas neste contexto a propriedade ‘data_de_criacao’ nos serve bem, afinal, uma marca também tem uma data de criação, então o uso do Pick ficaria assim:
Bacana, reaproveitamos uma propriedade já existente, mas também vale lembrar que podemos reaproveitar várias propriedades, já que também é possível passar um conjunto de chaves do objeto, sendo assim, se caso quiséssemos reutilizar várias propriedades seguiríamos a seguinte sintaxe: Pick<tipo, ‘umaChaveDoTipo’ | ‘outraChaveDoTipo’ >
Importante: neste caso o operador ‘|’ não significa ‘ou’ e sim ‘e’, estamos dizendo que queremos reutilizar a propriedade
‘umaChaveDoTipo’ e também a propriedade ‘outraChaveDoTipo’, vamos dar uma olhada em um exemplo:
Graças a inferência de tipo, não necessariamente precisamos de uma ‘interface’ ou de um ‘type’, também podemos utilizar variáveis em conjunto com o operador “typeof” para obter o tipo de uma variável, e assim podemos usar como o primeiro parâmetro do Pick:
Pra finalizar, também conseguimos acessar e utilizar propriedades aninhadas, utilizando a notação de colchetes (da mesma maneira que acessamos propriedades de objetos), vamos ver um outro exemplo:
Como o Pick funciona por baixo dos panos
A implementação do Pick é a seguinte:
O Pick precisa obrigatoriamente de dois argumentos, sendo eles: um tipo (representado pela letra T, uma convenção no typescript, que significa ‘type’) e uma propriedade (representado pela letra K, também uma convenção que significa ‘Key’), essa chave também precisa obrigatoriamente ser uma propriedade de T(representado pela seguinte sintaxe utilizando as palavras chaves ‘extends’ e ‘keyof’: K extends keyof T), logo adiante, vemos [P in K], que remete ao loop for in do javascript, onde K seria um iterador, e P(outra convenção, que significa ‘Property’) o valor atual desse loop, nesse caso, o K representa todas as propriedades que foram passadas no segundo argumento do Pick, e P a propriedade atual sendo iterada, por fim, temos T[P], que seria o valor da propriedade, no caso, o tipo dela.
Conclusão
Ufa, chegamos no fim, vimos várias coisas bacanas como o operador “typeof”, convenções de nomeclatura no typescript, acesso a propriedades aninhadas e etc, bom, por hoje é isso, espero que você tenha aprendido sobre o Pick<T> e comece a utilizá-los nos seus projetos, caso tenha achado o artigo útil, vale a pena dar aquela compartilhada, sinta-se livre pra deixar seu feedback nos comentários, pretendo explicar vários utility types, o Pick<T> foi apenas o começo, então caso queira ficar por dentro, me segue aí e até a próxima :)
