Um Estudo Sobre Generics no TypeScript
Tags: typescript, webdev, tutorial, generics
Published: 2022-07-07 18:37:13

## Um Estudo Sobre Generics no TypeScript

Um assunto que confunde muita gente no começo da caminhada com TypeScript, são os Generics.

  Primeiro, vamos ver o que a documentação do TypeScript fala sobre os Generics:

> *“In languages like C# and Java, one of the main tools in the toolbox for creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their own types”*
> 

  O trecho que mais interessa é: *that is, being able to create a component that can work over a variety of types rather than a single one*

  Em uma tradução livre quer dizer que Generics são capazes de criar componentes que funcionam de várias formas ao invés de apenas uma, ou seja, podemos dizer que os **Generics são para os tipos o que valores são para os argumentos de uma função**.

## A syntax de um Generic


![Componente inicial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljj4kk6lga0ut5cicr9n.png)

  Os Generics sempre são envoltos de `**<>`** e podem conter mais de uma Generic, veja os exemplos abaixo:


![Múltiplas generics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad82yqf7zs9tm09f3j0c.png)

 Geralmente, você verá as Generics sendo representadas por letras, isso foi uma convenção da comunidade. São elas:

  1. T - para tipos (types)
  2. S - para estados (state)
  3. K - para chaves (key)
  4. V - para valores (value)
  5. E - para elementos (element)

  Bom, se o intuito da Generic é ajudar na construção de componentes que podem ser reutilizados, vamos criar um componente que vai ser um wrapper do axios, para nos ajduar nas chamadas para APIs

## Criando o componente

  Nosso componente vai ser um cliente que recebe a url de uma API e faz um GET retornando um array, coisa simples, porém vai ser bem preciso para explicar como as Generics funcionam. Primeiro eu escrevi ele de uma forma engessada e aos poucos vamos refatorando ele


![Inicio do componete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmah7zbejgri36dt5ja0.png)

  Primeiro vamos relatar alguns pontos que podem ser melhorados e ir ponto a ponto melhorando nosso componente.

1. Primeiro, a URL da nossa API está fixa no código e isso não é legal, já que eu quero um componente que possa ser utilizado de diversas formas e com diferentes APIs, eu teria que receber como argumento na função. Nosso código agora vai ficar assim: 
    
    
![Modularizando o componente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogii36txuflrdwyvr8wk.png)
    
2. Segundo ponto, estamos usando TypeScript, porém nosso retorno não está tipado. Se fizermos `response.data[0].` não teremos a inteligência do nosso editor para nos ajudar com o autocomplete e como fazemos a tipagem? Aqui vamos começar a ver os Generics sendo usados, o Axios permite o uso de Generics para que possamos tipar o retorno da nossa chamada e para isso basta passarmos nossa tipagem para `axios.get<Type>()`. Nosso código agora fica assim:
    
    

![Modularizando o componente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5p3rfgulvzcbdzhuqvna.png)
    
3. Nosso código já está bem tipado, falamos que o retorno da nossa chamada vai ser um array do tipo Props e assim está bem legal nosso código já. Mas temos um problema, o que acontece se eu passar uma outra URL? O tipo que criamos só serve para um tipo de retorno e é ai que vamos entrar no uso das Generics, vamos deixar nosso código pronto para o uso das Generics:
    
    
![Componente final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7pnc1nma442eukl985w.png)
    

  Vou tentar explicar o que fiz nesse ponto 3, lembrando que lá em cima em disse que algumas letras a comunidade usa para representar as Generics, aqui eu passei `<T>` para indicar que vamos repassar um tipo para a nossa função e depois para o axios. No código abaixo vamos ver como usamos nosso Client.


![Usando o componente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjgkn0cly42e6jijo7ch.png)

## Por debaixo dos panos

  Para resumir o que o Generics faz por debaixo dos panos, é como se a gente tivesse uma função que recebe alguns parâmetros e essa função faz algo com esses parâmetros, no caso ele vai pegar o `<Props[]>` e vai colocar onde está `<T>` fazendo com os tipos sejam o que passamos no Generic de quando instanciamos nosso client. Abaixo vou deixar um GIF que me ajudou a elucidar o funcionamento das Generics

![https://miro.medium.com/proxy/1*Zz4Y9ScEbGbRrtIWby4msg.gif](https://miro.medium.com/proxy/1*Zz4Y9ScEbGbRrtIWby4msg.gif)

  

## Um muito obrigado!

A todos que leram até, meus mais sinceros agradecimentos! Espero que tenha gostado, sinta-se livre para me acompnhar nas minhas redes

- [Twitter](https://twitter.com/ig0r_oliveiraa)
- [Dev.to](https://dev.to/devigor)
- [Linkedin](https://www.linkedin.com/in/oigorjs)
- [Github](https://github.com/devigor)

## Referências

1. [https://www.typescriptlang.org/docs/handbook/2/generics.html](https://www.typescriptlang.org/docs/handbook/2/generics.html)
2. [https://oieduardorabelo.medium.com/typescript-entendendo-generics-por-completo-40a372aeea5](https://oieduardorabelo.medium.com/typescript-entendendo-generics-por-completo-40a372aeea5)
3. [https://www.youtube.com/watch?v=eXVlK2PzE1k&ab_channel=OtávioMiranda](https://www.youtube.com/watch?v=eXVlK2PzE1k&ab_channel=Ot%C3%A1vioMiranda)