Mateus Cavalcanti10 Mar 20241 minFrontend
JavaScriptTipagemTypeScript

TypeScript avançado: Utility Types que você precisa conhecer

Os Utility Types oficiais do TypeScript reduzem código repetido e deixam o contrato da aplicação mais explícito.

1) Partial<T> para updates

Útil para payloads de atualização:

interface User {
  id: string;
  name: string;
  email: string;
}

type UpdateUserInput = Partial<Pick<User, "name" | "email">>;

2) Required<T> para garantir preenchimento

Quando algo opcional vira obrigatório em uma etapa específica.

type Draft = { title?: string; body?: string };
type ReadyToPublish = Required<Draft>;

3) Pick<T, K> e Omit<T, K> para recortes de modelo

type PublicUser = Omit<User, "email">;
type UserIdentity = Pick<User, "id" | "name">;

4) Record<K, V> para tabelas de lookup

type Category = "web" | "mobile" | "devops";
const labels: Record<Category, string> = {
  web: "Web",
  mobile: "Mobile",
  devops: "DevOps",
};

5) Awaited<T> para funções assíncronas

async function getUser() {
  return { id: "1", name: "Mateus" };
}

type UserResult = Awaited<ReturnType<typeof getUser>>;

Estratégia prática

  1. Comece com tipos simples.
  2. Introduza utility types quando houver repetição.
  3. Extraia aliases de tipo com nomes de negócio.

Utility Types não são “truque”; são linguagem de modelagem. Quando bem nomeados, ajudam todo mundo a entender o sistema mais rápido.