Generics em TypeScript: guia completo de uso

Introdução aos Generics TypeScript

TypeScript é uma linguagem de programação fortemente tipada que adiciona tipagem estática ao JavaScript. Um dos recursos mais poderosos e frequentemente subestimados do TypeScript são os Generics (genéricos, tipos genéricos). Se você já escreveu uma função que precisa funcionar com diferentes tipos de dados, ou criou um componente que precisa ser universal, então Generics é exatamente o que você precisa.

Neste artigo, vamos detalhar o que são genéricos em TypeScript, por que eles são necessários e como usá-los na prática. Você aprenderá como tornar seu código mais flexível, seguro e reutilizável.

O que são Generics e por que são necessários?

Generics (tipos genéricos) são um mecanismo que permite criar componentes (funções, classes, interfaces) que funcionam com diferentes tipos de dados, sem perder a informação sobre o tipo. Imagine que você está escrevendo uma função que retorna o primeiro elemento de um array. Sem genéricos, você teria que usar o tipo any, o que o priva das vantagens da tipagem estática.

Por que usar Generics?

• Segurança de tipos: TypeScript verifica os tipos em tempo de compilação, prevenindo erros.
• Reutilização de código: Uma única função ou classe pode funcionar com qualquer tipo de dado.
• Melhora na legibilidade: O código se torna mais compreensível e autodocumentado.
• Redução de duplicação: Você não precisa escrever funções separadas para cada tipo de dado.

Sem Generics, você escreveria algo assim:

// Ruim: perdemos a informação do tipofunction getFirstElement(arr: any[]): any {  return arr[0];}

const num = getFirstElement([1, 2, 3]); // Tipo anyconsole.log(num.toUpperCase()); // Erro em tempo de execução!

Com Generics, o código se torna seguro e flexível:

// Bom: preservamos o tipofunction getFirstElement<T>(arr: T[]): T | undefined {  return arr[0];}

const num = getFirstElement([1, 2, 3]); // Tipo numberconst str = getFirstElement(['a', 'b', 'c']); // Tipo string

// num.toUpperCase(); // Erro de compilação! number não tem método toUpperCase

Fundamentos da Sintaxe de Generics

Sintaxe com colchetes angulares

Generics usam colchetes angulares <> para especificar os parâmetros de tipo. Normalmente, os parâmetros são denotados por uma única letra: T (Type), U, V, etc. No entanto, você pode usar qualquer nome significativo.

// Exemplo mais simples: função com um parâmetro de tipofunction identity<T>(arg: T): T {  return arg;}

// Especificação explícita do tipolet result1 = identity<string>('Hello');

// Inferência de tipo (TypeScript determina o tipo automaticamente)let result2 = identity(42); // Tipo number

Múltiplos parâmetros de tipo

Você pode usar vários parâmetros de tipo em uma única função ou classe:

function merge<T, U>(obj1: T, obj2: U): T & U {  return { ...obj1, ...obj2 };}

const merged = merge({ name: 'John' }, { age: 30 });// Tipo: { name: string } & { age: number }console.log(merged.name); // Johnconsole.log(merged.age);  // 30

Restrições (Constraints)

Às vezes, é necessário restringir os tipos que podem ser passados para um genérico. Para isso, usa-se a palavra-chave extends:

interface HasLength {  length: number;}

// Função funciona apenas com tipos que possuem a propriedade lengthfunction logLength<T extends HasLength>(arg: T): T {  console.log(arg.length);  return arg;}

logLength('Hello'); // Funciona: 5logLength([1, 2, 3]); // Funciona: 3// logLength(123); // Erro! number não tem length

Aplicação de Gen