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
- Comece com tipos simples.
- Introduza utility types quando houver repetição.
- 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.