Desvendando os Generics no TypeScript: Um Guia para Iniciantes

Se você está aprendendo TypeScript, já deve ter ouvido falar sobre “Generics”. O nome pode parecer complicado, mas a ideia por trás é muito poderosa e, na verdade, bastante intuitiva. Generics são uma das ferramentas mais legais do TypeScript para escrever código flexível, seguro e reutilizável.

Neste guia, vamos desvendar o que são Generics passo a passo, com exemplos práticos e analogias para que você perca o medo e comece a usá-los hoje mesmo.

O Problema: Código Repetitivo e Inseguro

Imagine que você precisa criar uma função simples que recebe um array e retorna o primeiro elemento.

Se o array for de números, você faria algo assim:

function primeiroElementoNumero(array: number[]): number | undefined {
  return array[0];
}

E se o array for de textos (strings)? Você teria que criar outra função:

function primeiroElementoString(array: string[]): string | undefined {
  return array[0];
}

Veja o problema? Estamos repetindo o mesmo código só para mudar o tipo. Uma primeira solução seria usar o tipo any, que aceita qualquer coisa:

// A solução com 'any' (mas é uma má ideia!)
function primeiroElementoQualquer(array: any[]): any {
  return array[0];
}

const primeiroNome = primeiroElementoQualquer(["Ana", "João"]); // OK
primeiroNome.toUpperCase(); 
// O TypeScript não sabe que isso é uma string! Ele não ajuda.

Ao usar any, perdemos toda a segurança e o autocompletar que o TypeScript nos oferece. É aqui que os Generics entram para salvar o dia!

A Solução: Criando uma “Função-Molde” com Generics

Generics permitem criar um “molde” de função, classe ou interface. Em vez de definir um tipo fixo (como number ou string), você usa um “parâmetro de tipo”, que funciona como uma variável para o tipo. A convenção é usar a letra T (de “Type”).

Vamos reescrever nossa função primeiroElemento usando Generics:

// Nossa primeira função genérica!
function primeiroElemento<T>(array: T[]): T | undefined {
  return array[0];
}

Vamos quebrar o que aconteceu aqui:

1. <T>: Aqui, estamos dizendo: “Esta função vai usar um tipo genérico que eu vou chamar de T”.
2. array: T[]: O argumento array será um array de… T! Seja qual for o tipo que T se torne.
3. : T | undefined: A função retornará um valor do mesmo tipo T (ou undefined se o array estiver vazio).

Agora, veja a mágica acontecer:

const numeros = [1, 2, 3, 4, 5];
const primeiroNum = primeiroElemento(numeros); 
// TypeScript sabe que 'primeiroNum' é do tipo number

const nomes = ["Ana", "João", "Maria"];
const primeiroNome = primeiroElemento(nomes); 
// TypeScript sabe que 'primeiroNome' é do tipo string

// Agora o autocompletar funciona!
console.log(primeiroNome.toUpperCase()); 
// "ANA" - O editor sugere métodos de string!

Com uma única função, resolvemos o problema para todos os tipos de array, mantendo nosso código seguro e inteligente!

Criando “Caixas” Flexíveis: Interfaces Genéricas

Você também pode usar Generics com interfaces para criar “moldes” de objetos. Isso é super comum ao trabalhar com respostas de APIs.

Imagine que uma API sempre retorna um objeto com um campo dados, mas o conteúdo desses dados pode variar.

// Uma interface genérica para respostas de API
interface RespostaAPI<TipoDosDados> {
  dados: TipoDosDados;
  sucesso: boolean;
  timestamp: number;
}

// Exemplo 1: Resposta com dados de um usuário
interface Usuario {
  id: number;
  nome: string;
}

const respostaUsuario: RespostaAPI<Usuario> = {
  dados: { id: 1, nome: "João" },
  sucesso: true,
  timestamp: 1672531200
};

// Exemplo 2: Resposta com uma lista de produtos
const respostaProdutos: RespostaAPI<string[]> = {
  dados: ["Notebook", "Mouse", "Teclado"],
  sucesso: true,
  timestamp: 1672531201
};

Usamos TipoDosDados para ser mais descritivo que T. Você pode nomear seus parâmetros de tipo como quiser!

Criando “Estruturas” Reutilizáveis: Classes Genéricas

Generics também brilham em classes. Vamos criar uma classe Pilha (Stack), uma estrutura de dados onde o último item a entrar é o primeiro a sair (como uma pilha de pratos).

class Pilha<TipoDoItem> {
  private items: TipoDoItem[] = [];

  // Adiciona um item no topo da pilha
  push(item: TipoDoItem): void {
    this.items.push(item);
  }

  // Remove e retorna o item do topo da pilha
  pop(): TipoDoItem | undefined {
    return this.items.pop();
  }
}

// Criando uma pilha de números
const pilhaDeNumeros = new Pilha<number>();
pilhaDeNumeros.push(10);
pilhaDeNumeros.push(20);
console.log(pilhaDeNumeros.pop()); // Saída: 20

// Criando uma pilha de textos
const pilhaDeTextos = new Pilha<string>();
pilhaDeTextos.push("Olá");
pilhaDeTextos.push("Mundo");
console.log(pilhaDeTextos.pop()); // Saída: "Mundo"

A mesma classe Pilha funciona perfeitamente para qualquer tipo de dado, evitando duplicação e mantendo a segurança de tipos.

Colocando “Regras”: Constraints (Restrições)

Às vezes, você não quer que sua função genérica aceite qualquer tipo. Você pode querer que ela aceite apenas tipos que sigam certas “regras”. Isso é chamado de constraint (restrição).

Imagine uma função que busca um item em um array pelo seu id. A função só faz sentido se os itens do array tiverem uma propriedade id.

// 1. Primeiro, definimos a "regra": o objeto DEVE ter um 'id' do tipo number
interface TemId {
  id: number;
}

// 2. Usamos 'extends' para aplicar a regra ao nosso Generic
function buscarPorId<T extends TemId>(items: T[], id: number): T | undefined {
  return items.find(item => item.id === id);
}

// Exemplo de uso:
const produtos = [
  { id: 1, nome: "Notebook", preco: 2000 },
  { id: 2, nome: "Mouse", preco: 50 }
];

const produtoEncontrado = buscarPorId(produtos, 1);// Funciona! Os produtos têm 'id'

const configuracoes = [
  { nome: "dark_mode", valor: true }
];

//const configEncontrada = buscarPorId(configuracoes,0);//ERRO! Os itens sem 'id'

A palavra-chave extends garante que o tipo T seja, no mínimo, compatível com a interface TemId.

Por que você vai amar usar Generics?

1. Escreva menos código: Crie componentes que funcionam para múltiplos tipos, evitando o famoso “copia e cola”.
2. Escreva código mais seguro: O TypeScript verifica os tipos para você, pegando erros antes mesmo de você rodar o código. Chega de cannot read property 'toUpperCase' of undefined!
3. Código mais inteligente: Seu editor (como o VS Code) vai te dar sugestões e autocompletar muito mais precisos, porque ele sabe exatamente qual tipo está sendo usado.
4. Flexibilidade: Você cria “ferramentas” (funções, classes) que podem ser adaptadas para diferentes necessidades sem perder a robustez.

Conclusão

Generics podem parecer um conceito avançado, mas, como vimos, eles resolvem um problema muito comum: como escrever código que seja ao mesmo tempo flexível e seguro.

Não se preocupe se tudo não fez sentido de primeira. A melhor forma de aprender é praticando. Tente criar sua própria função genérica ou uma interface genérica para um projeto seu.

O mais importante é entender a ideia principal: Generics são como “variáveis para tipos”, permitindo que você crie blocos de código que são verdadeiros canivetes suíços: úteis para muitas situações e sempre muito seguros.