Guia Prático

TypeScript Patterns

// tipos avançados, generics e boas práticas

Referência prática com exemplos interativos de Utility Types, Generics, Type Narrowing e patterns avançados para escrever TypeScript mais seguro e expressivo.

Utility Types

// tipos built-in que todo dev precisa conhecer

TypeScript oferece vários types utilitários globais que facilitam transformações de tipos comuns.

Partial<T>

Torna todas as propriedades opcionais. Útil para funções de update parcial.

TypeScript

interface User {
  name: string;
  email: string;
  age: number;
}
 
function updateUser(user: User, fields: Partial<User>) {
  return { ...user, ...fields };
}
 
// ✅ Só precisa passar o que quer atualizar
updateUser(user, { name: 'Novo Nome' });

Required<T>

O oposto de Partial — torna todas as propriedades obrigatórias.

TypeScript

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}
 
function startServer(config: Required<Config>) {
  // Garantia que todos os campos existem
  console.log(`${config.host}:${config.port}`);
}

Pick<T, K>

Seleciona apenas propriedades específicas de um tipo.

TypeScript

interface Article {
  id: string;
  title: string;
  body: string;
  author: string;
  createdAt: Date;
}
 
// Só precisa de title e body para o form
type ArticleForm = Pick<Article, 'title' | 'body'>;

Omit<T, K>

Remove propriedades específicas de um tipo.

TypeScript

interface User {
  id: string;
  name: string;
  email: string;
  password: string;
}
 
// Remove senha para respostas da API
type PublicUser = Omit<User, 'password'>;

Record<K, T>

Cria um tipo de objeto com chaves K e valores T.

TypeScript

type Status = 'idle' | 'loading' | 'success' | 'error';
 
const statusMessages: Record<Status, string> = {
  idle: 'Aguardando...',
  loading: 'Carregando...',
  success: 'Concluído!',
  error: 'Erro ao processar',
};

Extract / Exclude

Extract mantém tipos atribuíveis, Exclude remove.

TypeScript

type Event = 'click' | 'scroll' | 'mousemove' | 'keypress';
 
// Apenas eventos de mouse
type MouseEvent = Extract<Event, 'click' | 'mousemove'>;
// → 'click' | 'mousemove'
 
// Tudo exceto teclado
type NonKeyEvent = Exclude<Event, 'keypress'>;
// → 'click' | 'scroll' | 'mousemove'

Generics

// tipos reutilizáveis e type-safe

Generics permitem criar componentes, funções e tipos que funcionam com qualquer tipo, mantendo type safety.

Função Genérica

Básico

O tipo é inferido automaticamente a partir dos argumentos.

TypeScript

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}
 
// TypeScript infere o tipo de retorno
const num = firstElement([1, 2, 3]);      // number
const str = firstElement(['a', 'b']);      // string

Constraints (extends)

Constraints

Restrinja o tipo genérico para garantir que tenha certas propriedades.

TypeScript

interface HasLength {
  length: number;
}
 
function logLength<T extends HasLength>(item: T): T {
  console.log(item.length);
  return item;
}
 
logLength('hello');     // ✅ string tem length
logLength([1, 2, 3]);   // ✅ array tem length
// logLength(123);      // ❌ number não tem length

keyof + Generics

Avançado

Combine keyof com generics para acessar propriedades de forma type-safe.

TypeScript

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
 
const user = { name: 'Ana', age: 28 };
 
const name = getProperty(user, 'name'); // string
const age = getProperty(user, 'age');   // number
// getProperty(user, 'email');           // ❌ Erro!

Generic com Default

Patterns

Defina um tipo padrão para quando o genérico não for especificado.

TypeScript

interface ApiResponse<T = unknown> {
  data: T;
  status: number;
  message: string;
}
 
// Com tipo específico
const userRes: ApiResponse<User> = { ... };
 
// Sem especificar (usa unknown)
const genericRes: ApiResponse = { ... };

Mapped Types + Generics

Avançado

Crie novos tipos transformando propriedades de tipos existentes.

TypeScript

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
 
interface Person {
  name: string;
  age: number;
}
 
type PersonGetters = Getters<Person>;
// { getName: () => string; getAge: () => number; }

Type Narrowing

// refinando tipos em runtime

Type Narrowing é o processo de refinar tipos de um tipo mais amplo para um mais específico usando verificações em runtime.

typeof guard

O guard mais básico — verifica tipos primitivos.

❌ sem narrowing

function process(value: string | number) {
  // value é string | number
  console.log(value.toUpperCase());
  // ❌ Erro: toUpperCase não existe em number
}

Discriminated Unions

Pattern poderoso usando uma propriedade literal para distinguir tipos.

❌ sem narrowing

interface Shape {
  kind: string;
  radius?: number;
  width?: number;
  height?: number;
}
 
// Propriedades opcionais geram incerteza
function area(shape: Shape) {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius! ** 2; // ! é perigoso
  }
}

Type Predicates (is)

Crie suas próprias funções de type guard customizadas.

❌ sem narrowing

interface Fish { swim: () => void }
interface Bird { fly: () => void }
 
// Sem type predicate, TS não sabe qual tipo é
function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim(); // funciona, mas não é ideal
  }
}

Exhaustive Check (never)

Garanta que todos os casos de uma union foram tratados em compile time.

❌ sem narrowing

type Status = 'active' | 'inactive' | 'banned';
 
function getLabel(status: Status) {
  switch (status) {
    case 'active': return 'Ativo';
    case 'inactive': return 'Inativo';
    // Esqueceu 'banned' — sem erro!
  }
}

Patterns Avançados

// técnicas para projetos reais

Patterns e técnicas avançadas de TypeScript usados em projetos profissionais.

Template Literal Types

Combine string literals para criar tipos derivados automaticamente.

TypeScript

type EventName = 'click' | 'focus' | 'blur';
type Handler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'
 
type CSSProperty = 'margin' | 'padding';
type Direction = 'Top' | 'Right' | 'Bottom' | 'Left';
type CSSKey = `${CSSProperty}${Direction}`;
// 'marginTop' | 'marginRight' | ... 8 combinações

Conditional Types

Tipos que se comportam como if/else baseado em condições.

TypeScript

type IsString<T> = T extends string ? true : false;
 
type A = IsString<'hello'>; // true
type B = IsString<42>;      // false
 
// Exemplo prático: extrair tipo de retorno de Promise
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
 
type Result = UnwrapPromise<Promise<string>>; // string
type Plain = UnwrapPromise<number>;           // number

Infer Keyword

Extraia tipos de dentro de outros tipos usando infer.

TypeScript

// Extrair tipo dos elementos de um array
type ElementOf<T> = T extends (infer E)[] ? E : never;
type Num = ElementOf<number[]>; // number
 
// Extrair tipo dos parâmetros de uma função
type FirstParam<F> = F extends (arg: infer P, ...args: unknown[]) => unknown
  ? P
  : never;
 
type Param = FirstParam<(name: string, age: number) => void>;
// string

Builder Pattern Type-Safe

Use generics para criar APIs fluentes com tipos que evoluem.

TypeScript

class QueryBuilder<T extends object = object> {
  private filters: Partial<T> = {};
 
  where<K extends keyof T>(key: K, value: T[K]) {
    this.filters[key] = value;
    return this;
  }
 
  build() {
    return this.filters;
  }
}
 
// Uso type-safe
new QueryBuilder<User>()
  .where('name', 'Ana')   // ✅
  .where('age', 28)        // ✅
  // .where('age', 'abc')  // ❌ Erro!
  .build();

Branded Types

Crie tipos nominais para evitar misturar valores que são estruturalmente iguais.

TypeScript

type Brand<T, B> = T & { __brand: B };
 
type UserId = Brand<string, 'UserId'>;
type OrderId = Brand<string, 'OrderId'>;
 
function getUser(id: UserId) { /* ... */ }
function getOrder(id: OrderId) { /* ... */ }
 
const userId = 'u_123' as UserId;
const orderId = 'o_456' as OrderId;
 
getUser(userId);    // ✅
// getUser(orderId); // ❌ Tipo incompatível!

Pronto para TypeScript avançado?

Explore mais guias e ferramentas práticas para devs.

Voltar às Dicas

Conteúdo relacionado

Dicas de IA para DesenvolvedoresGuia prático de ferramentas IA, uso consciente de tokens e modelos: v0, Copilot, prompt engineering, boas práticas e ferramentas para produtividade dev.

Tailwind CSS + shadcn/ui — Guia PráticoSetup completo, componentes reutilizáveis, padrões de código e boas práticas com Tailwind CSS e shadcn/ui para projetos React e Next.js.

React Query Essencial — Cache e MutationsGuia completo de TanStack Query (React Query): cache inteligente, mutations, invalidação, otimistic updates e boas práticas para apps React.

12 min de leitura

interface User {

name: string;

email: string;

age: number;

}

function updateUser(user: User, fields: Partial<User>) {

return { ...user, ...fields };

}

// ✅ Só precisa passar o que quer atualizar

updateUser(user, { name: 'Novo Nome' });

interface Config {

host?: string;

port?: number;

debug?: boolean;

}

function startServer(config: Required<Config>) {

// Garantia que todos os campos existem

console.log(`${config.host}:${config.port}`);

}

type Status = 'idle' | 'loading' | 'success' | 'error';

const statusMessages: Record<Status, string> = {

idle: 'Aguardando...',

loading: 'Carregando...',

success: 'Concluído!',

error: 'Erro ao processar',

};

type Event = 'click' | 'scroll' | 'mousemove' | 'keypress';

// Apenas eventos de mouse

type MouseEvent = Extract<Event, 'click' | 'mousemove'>;

// → 'click' | 'mousemove'

// Tudo exceto teclado

type NonKeyEvent = Exclude<Event, 'keypress'>;

// → 'click' | 'scroll' | 'mousemove'

function firstElement<T>(arr: T[]): T | undefined {

return arr[0];

}

// TypeScript infere o tipo de retorno

const num = firstElement([1, 2, 3]); // number

const str = firstElement(['a', 'b']); // string

interface HasLength {

length: number;

}

function logLength<T extends HasLength>(item: T): T {

console.log(item.length);

return item;

}

logLength('hello'); // ✅ string tem length

logLength([1, 2, 3]); // ✅ array tem length

// logLength(123); // ❌ number não tem length

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

return obj[key];

}

const user = { name: 'Ana', age: 28 };

const name = getProperty(user, 'name'); // string

const age = getProperty(user, 'age'); // number

// getProperty(user, 'email'); // ❌ Erro!

interface ApiResponse<T = unknown> {

data: T;

status: number;

message: string;

}

// Com tipo específico

const userRes: ApiResponse<User> = { ... };

// Sem especificar (usa unknown)

const genericRes: ApiResponse = { ... };

type Getters<T> = {

[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];

};

interface Person {

name: string;

age: number;

}

type PersonGetters = Getters<Person>;

// { getName: () => string; getAge: () => number; }

interface Shape {

kind: string;

radius?: number;

width?: number;

height?: number;

}

// Propriedades opcionais geram incerteza

function area(shape: Shape) {

if (shape.kind === 'circle') {

return Math.PI * shape.radius! ** 2; // ! é perigoso

}

interface Fish { swim: () => void }

interface Bird { fly: () => void }

// Sem type predicate, TS não sabe qual tipo é

function move(animal: Fish | Bird) {

if ('swim' in animal) {

animal.swim(); // funciona, mas não é ideal

}

type Status = 'active' | 'inactive' | 'banned';

function getLabel(status: Status) {

switch (status) {

case 'active': return 'Ativo';

case 'inactive': return 'Inativo';

// Esqueceu 'banned' — sem erro!

}

type EventName = 'click' | 'focus' | 'blur';

type Handler = `on${Capitalize<EventName>}`;

// 'onClick' | 'onFocus' | 'onBlur'

type CSSProperty = 'margin' | 'padding';

type Direction = 'Top' | 'Right' | 'Bottom' | 'Left';

type CSSKey = `${CSSProperty}${Direction}`;

// 'marginTop' | 'marginRight' | ... 8 combinações

type IsString<T> = T extends string ? true : false;

type A = IsString<'hello'>; // true

type B = IsString<42>; // false

// Exemplo prático: extrair tipo de retorno de Promise

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Result = UnwrapPromise<Promise<string>>; // string

type Plain = UnwrapPromise<number>; // number

// Extrair tipo dos elementos de um array

type ElementOf<T> = T extends (infer E)[] ? E : never;

type Num = ElementOf<number[]>; // number

// Extrair tipo dos parâmetros de uma função

type FirstParam<F> = F extends (arg: infer P, ...args: unknown[]) => unknown

? P

: never;

type Param = FirstParam<(name: string, age: number) => void>;

// string

class QueryBuilder<T extends object = object> {

private filters: Partial<T> = {};

where<K extends keyof T>(key: K, value: T[K]) {

this.filters[key] = value;

return this;

}

build() {

return this.filters;

}

// Uso type-safe

new QueryBuilder<User>()

.where('name', 'Ana') // ✅

.where('age', 28) // ✅

// .where('age', 'abc') // ❌ Erro!

.build();

type Brand<T, B> = T & { __brand: B };

type UserId = Brand<string, 'UserId'>;

type OrderId = Brand<string, 'OrderId'>;

function getUser(id: UserId) { /* ... */ }

function getOrder(id: OrderId) { /* ... */ }

const userId = 'u_123' as UserId;

const orderId = 'o_456' as OrderId;

getUser(userId); // ✅

// getUser(orderId); // ❌ Tipo incompatível!