Generic em Typescript

Neste post eu vou dar uma introduo sobre o que e como usar generic em typescript.

Generic um funcionalidade que permite criar:

• componentes
• funes
• interfaces
• classes

que aceitam uma variedade de tipos de dados ao invs de um.

Com o uso de generic damos a possibilidade da nossa funo poder ser usada em diferentes situaes, e removendo a duplicidade de cdigo.

Generic aparecem em typescript dentro de colchetes angulares, no formato onde T vai representar o tipo de dado.
E lido como generic do tipo T, e este tipo T pode ser usado como tipo de dado para qualquer parmetro ou varivel dentro da funo, classe ou interface.

Exemplo:

function info(value: string) {  return value}

Aqui temos um funo normal que aceita um valor do tipo string e retorna, mas tem casos pretendemos usar a nossa funo em cenrios onde o value pode ser outro tipo de dado, ai chega o ponto em pensar em generic.

function info<T>(value: T) {  return value}

Com a adio de info** tornamos a nossa funo generic, possibilitando assim que ela receba diferentes tipos de dados para a varivel value.

Em typescript generic pode ser usado com funo, classe ou interface

Generics com funo
Para usar generic com funo basta adicionar <> depois do nome da funo, e dentro de <> colocar a lista dos tipos de dados que a funo vai receber

function info<T>(...) { ... }function pickValue<T, K>(...) {...}

Nota que os tipos de dados do generic no so usados apenas para os parmetros da funo, eles podem ser usados como tipo de dados para todo e qualquer componente dentro da funo.

async function fetchApi<ResultType>(path: string): Promise<ResultType> {  const response = await fetch(`https://api.joelmbengui${path}`);  return response.json();}type Info = {  name: string}const data = await fetchApi<Info>('/info');

Generics com Interfaces, Classes

Na criao de interfaces ou classes, temos muita vantagem ao usar generic, pois conseguimos cobrir uma grande variedade de situao para a nossa interface ou classe

Interface
Para criar um interface ou classe generic, adicionamos a lista de tipos depois do nome da interface ou classe

interface GenericInterface<T> {  value: T}

Aqui declaramos uma interface que tem uma propriedade value e onde o tipo vai ser determinado quando passarmos o valor de T.

Class

class Queue<T> {  private data = []  push = (item: T) => this.data.push(item)  pop = (): T => this.shift();}const queue = new Queue<number>();queue.push(0)queue.push("1") // ERROR: can push string 

Aqui criamos uma pilha que pode ser usada para diferentes cenrios, seja ele quando precisamos de um pilha de nmeros, string, alunos, etc.

Concluso
Neste pequeno tutorial falamos sobre generic, como us-la em funes , interface e classes.

E podemos notar que o bom uso de generic, vai nos ajudar a evitar repetir cdigo e deixar as nossas funes, interfaces e classes mais flexveis.