Generic em Typescript

Joel Sebastião Mbengui — Mon, 28 Mar 2022 15:09:01 +0000

Neste post eu vou dar uma introdução sobre o que é e como usar generic em typescript.

Generic é um funcionalidade que permite criar:

componentes
funções
interfaces
classes

que aceitam uma variedade de tipos de dados ao invés de um.

Com o uso de generic damos a possibilidade da nossa função poder ser usada em diferentes situações, e removendo a duplicidade de código.

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 parâmetro ou variável dentro da função, classe ou interface.

Exemplo:

function info(value: string) {
  return value
}

Aqui temos um função normal que aceita um valor do tipo string e retorna, mas tem casos pretendemos usar a nossa função em cenários 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 adição de info** tornamos a nossa função generic, possibilitando assim que ela receba diferentes tipos de dados para a variável value.

Em typescript generic pode ser usado com função, classe ou interface

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

function info<T>(...) { ... }

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

Nota que os tipos de dados do generic não são usados apenas para os parâmetros da função, eles podem ser usados como tipo de dados para todo e qualquer componente dentro da função.

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 criação de interfaces ou classes, temos muita vantagem ao usar generic, pois conseguimos cobrir uma grande variedade de situação 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 cenários, seja ele quando precisamos de um pilha de números, string, alunos, etc.

Conclusão
Neste pequeno tutorial falamos sobre generic, como usá-la em funções , interface e classes.

E podemos notar que o bom uso de generic, vai nos ajudar a evitar repetir código e deixar as nossas funções, interfaces e classes mais flexíveis.

DEV Community: Joel Sebastião Mbengui

Generic em Typescript