0Pricing
Frontend Academy · Aula

Genéricos: T extends e restrições

Escreva funções e interfaces genéricas, restrinja parâmetros de tipo com extends e use valores padrão genéricos para APIs flexíveis.

Genéricos: T extends e restrições é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que são genéricos?

Os genéricos permitem escrever funções, classes e interfaces que funcionam com vários tipos, mantendo a segurança de tipos. Em vez de escrever funções separadas para cada tipo, você escreve uma única função genérica parametrizada por uma variável de tipo.

Uma função genérica simples

O parâmetro de tipo T é declarado entre sinais de menor e maior. O TypeScript deduz T a partir do tipo do argumento — nenhuma anotação explícita é necessária no ponto de chamada.

function identity<T>(value: T): T {
  return value;
}

identity(42);      // T is inferred as number, returns number
identity('hello'); // T inferred as string
identity<boolean>(true); // explicit

Interfaces e tipos genéricos

Parametrize interfaces e tipos com genéricos para descrever estruturas de dados reutilizáveis.

interface Box<T> {
  value: T;
  label?: string;
}

const numBox: Box<number> = { value: 42 };
const strBox: Box<string> = { value: 'hello', label: 'greeting' };

extends — restringindo tipos genéricos

Use T extends SomeType para restringir quais valores T pode assumir. A função aceita apenas tipos que satisfazem a restrição.

function getLength<T extends { length: number }>(item: T): number {
  return item.length; // safe: T is guaranteed to have length
}

getLength('hello');       // 5
getLength([1, 2, 3]);    // 3
getLength({ length: 7 }); // 7
// getLength(42);         // Error: number has no length

keyof e restrições genéricas

keyof T produz uma união das chaves de propriedade de T. Combinado com genéricos, ele permite o acesso a propriedades com segurança de tipos.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'foo'); // Error

Valores padrão de genéricos

Forneça um tipo padrão para um parâmetro genérico com T = DefaultType. Isso é usado quando existe um padrão adequado, mas os chamadores podem substituí-lo.

interface Paginated<T = unknown> {
  items: T[];
  total: number;
  page: number;
}

const rawPage: Paginated = { items: [], total: 0, page: 1 };
const typedPage: Paginated<User> = { items: [], total: 0, page: 1 };

Vários parâmetros de tipo

As funções podem ter vários parâmetros de tipo independentes.

function zip<A, B>(arrA: A[], arrB: B[]): Array<[A, B]> {
  return arrA.map((a, i) => [a, arrB[i]]);
}

zip([1, 2, 3], ['a', 'b', 'c']);
// [[1,'a'], [2,'b'], [3,'c']]

Classes genéricas

As classes também podem ser genéricas. Isso é comum em estruturas de dados como pilhas, filas e armazenamentos observáveis.

class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items.at(-1); }
  get size() { return this.items.length; }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop(); // 2

Funções genéricas assíncronas

Funções genéricas assíncronas são comuns em chamadas tipadas de API.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

const users = await fetchJson<User[]>('/api/users');
const profile = await fetchJson<UserProfile>('/api/me');

infer em tipos condicionais

A palavra-chave infer dentro de um tipo condicional extrai um tipo de um padrão. Ela é usada no código de bibliotecas para extrair o tipo de retorno de uma função ou o tipo de elemento de uma matriz.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ElementType<T> = T extends Array<infer E> ? E : never;

type Fn = () => { name: string };
type Result = ReturnType<Fn>; // { name: string }

Quando usar genéricos

Use genéricos quando: 1) a mesma lógica se aplica a vários tipos, 2) você precisa de uma relação entre os tipos de entrada e saída, 3) está criando uma estrutura de dados ou utilitário reutilizável. Não use genéricos apenas por usá-los — tipos concretos são mais claros quando há apenas um caso de uso.

Verificação rápida

O que a restrição T extends { length: number } garante?

Recapitulação: genéricos

Os genéricos parametrizam tipos para que uma única função, classe ou interface funcione com vários tipos. T extends SomeType adiciona restrições. keyof T fornece uniões de chaves de propriedade. Os padrões genéricos usam T = Default. infer extrai tipos em tipos condicionais. Use genéricos em utilitários tipados e estruturas de dados reutilizáveis.

Perguntas Frequentes

A aula “Genéricos: T extends e restrições” é grátis?

Sim — o texto completo de “Genéricos: T extends e restrições” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Genéricos: T extends e restrições”?

Escreva funções e interfaces genéricas, restrinja parâmetros de tipo com extends e use valores padrão genéricos para APIs flexíveis. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Genéricos: T extends e restrições”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Genéricos: T extends e restrições
  2. Tipos utilitários: Partial Required Pick Omit
  3. Tipos mapeados e tipos condicionais
  4. Restrição de tipos: typeof instanceof uniões discriminadas
← Voltar para Frontend Academy