Utility Types do TypeScript: Cheatsheet Prático

Utility Types do TypeScript: Além do Básico

Os utility types nativos do TypeScript permitem transformar tipos sem reescrevê-los. Em vez de criar UserUpdate manualmente com todos os campos opcionais, use Partial<User>. São composáveis, poderosos, e quando aprender, vai usar em todo lugar.

Os Essenciais

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
  createdAt: Date;
}

Partial<T> — torna todas as propriedades opcionais:

type UserUpdate = Partial<User>;
// { id?: number; name?: string; email?: string; ... }

function updateUser(id: number, data: Partial<User>) {
  // Pode passar { name: 'Novo Nome' } sem os outros campos
}

Required<T> — torna todas as propriedades obrigatórias (oposto de Partial):

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

type StrictConfig = Required<Config>;
// { host: string; port: number; debug: boolean; }

Pick<T, K> — seleciona propriedades específicas:

type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string; }

type LoginResponse = Pick<User, 'id' | 'email' | 'role'>;

Omit<T, K> — remove propriedades específicas:

type CreateUserInput = Omit<User, 'id' | 'createdAt'>;
// { name: string; email: string; role: 'admin' | 'user'; }

Record<K, V> — cria um tipo objeto com chave e valor específicos:

type UserRoles = Record<string, 'admin' | 'user' | 'guest'>;

const permissions: Record<User['role'], string[]> = {
  admin: ['read', 'write', 'delete'],
  user: ['read'],
};

Tipos de Manipulação de String

type Upper = Uppercase<'hello'>;       // 'HELLO'
type Lower = Lowercase<'HELLO'>;       // 'hello'
type Cap = Capitalize<'hello'>;        // 'Hello'
type Uncap = Uncapitalize<'Hello'>;    // 'hello'

Combinações Avançadas

// Tornar apenas alguns campos opcionais
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
type UserWithOptionalEmail = PartialBy<User, 'email'>;

// Versão readonly para estado imutável
type ImmutableUser = Readonly<User>;

// Extrair tipo de retorno de função
function getUser() { return { id: 1, name: 'Alice' }; }
type UserResult = ReturnType<typeof getUser>;
// { id: number; name: string; }

// Extrair parâmetros de função
type GetUserParams = Parameters<typeof getUser>;

Padrões do Mundo Real

// Tipos de endpoint de API
interface ApiEndpoints {
  '/users': { GET: User[]; POST: Omit<User, 'id'>; };
  '/users/:id': { GET: User; PUT: Partial<User>; DELETE: void; };
}

// Mapa de event handlers
type EventMap = Record<string, (...args: any[]) => void>;

Formate seu TypeScript: Formatador JavaScript/TypeScript — cole código, obtenha saída formatada instantaneamente.