Generics

Reutilize seu código

Diego Griep
3 min readMay 30, 2020

Se você ainda não leu, veja a primeira parte sobre TypeScript.

Por mais que utilizamos diferentes frameworks, bibliotecas ou abstrações, os princípios de desenvolvimento sempre serão os mesmos.

Para descrever um pouco o que é o Generics do TypeScript, quero lembrar do princípio DRY (Don’t repeat yourself), ou seja, não seja redudante, não repita seu código.

Generics é uma maneira de reaproveitar um código para vários tipos de componentes. Exemplo: C.R.U.D. (create, read, update, delete).

Na função acima, retornamos um número, certo?
Podemos utilizar essa função para retornar uma string? Não.
O que fazemos? Colocamos any no lugar de number e fica tudo bem?

Não deixa de ser genérico, porém não é a forma ideal para fazer isso quando temos todo o poder da tipagem de dados ao nosso lado.

É ai que entra a variável de tipo <T>.
Quem define o tipo que será utilizado e retornado somos nós.

Na linha quatro, poderia ter colocado <string> entre o nome da função e o parênteses, mas não precisa, pois o TypeScript automaticamente passa o tipo de acordo com o que colocamos no argumento, isso é chamado de inferência.

Interface

A capacidade de uma interface genérica é evidenciada quando existem chaves que se repetem no retorno de um contrato, por exemplo.

Conseguimos reutilizar a estrutura do DefaultResponse para outros tipos de interface, no caso, poderia ser outros tipos de serviço dentro de uma api.

Object

A maneira de utilizar Generics com objetos pode ser estendida, facilitando assim, agregação de novas chaves e valores.

Se adicionar a chave team na linha 13, ocorrerá o erro:

Argument of type '{ firstName: string; lastName: string; team: string; }' is not assignable to parameter of type 'DriverF1'.
Object literal may only specify known properties, and 'team' does not exist in type 'DriverF1'.

Uma maneira de ter mais autonomia com novas chaves e valores, é utilizando a palavra-chave extends. O código acima ficaria assim:

As chaves firstName e lastName sempre serão obrigatórias.

Array

Quando tratamos parâmetros como Array, todos os métodos ficam disponíveis para uso. Ex.: .length, .join, .map … entre outros.

Em uma função temos a possibilidade de passar mais de um parâmetro, certo? Veja como ficaria com Generics:

Sabemos que a inferência de tipo, é no momento da atribuição, o compilador irá verificar o tipo do valor que está sendo atribuído e automaticamente irá entender que aquela variável é do mesmo tipo do valor que queremos guardar.

let word = 'Medium'; //por inferência, o tipo é uma string

Abaixo, podemos sobscrever a inferência e adicionar mais tipos para aquele parâmetro.

É possível colocar um tipo de padrão inicial, se não passarmos nada, ele seguirá o padrão proposto:

Isso é tudo, pessoal!

Tentei trazer o que mais tenho usado no TypeScript, se sentiu falta de algo, por favor, mencione para mim.

Feedbacks sempre são bem-vindos!
Até a próxima.

--

--