O que Partial faz e quando devo usá-lo?

Torna toda propriedade em T opcional. Use-o para payloads de atualização onde você muda apenas alguns campos, por exemplo, Partial para o corpo de uma requisição PATCH.

Cria um tipo de objeto com chaves do tipo K e valores do tipo V. Exemplo: Record mapeia cada role para um array de strings de permissão.

Tipos Utilitários para React

Q: Qual a diferença entre Pick e Omit?

Pick cria um tipo com apenas as chaves especificadas de T. Omit cria um tipo com todas as chaves, exceto as especificadas. Use Pick quando quiser um pequeno subconjunto; use Omit quando quiser a maioria dos campos menos alguns.

Q: Qual a diferença entre Extract e Exclude?

Extract mantém membros da união que correspondem a U. Exclude remove membros da união que correspondem a U. Exemplo: Extract resulta em "admin" | "editor".

Q: Posso compor tipos utilitários juntos?

Sim. Eles se compõem livremente: Partial> resulta em { name?: string; email?: string }. A composição mantém os tipos derivados de uma única fonte de verdade.

Q: Armadilha: Omit gera erro se eu especificar uma chave que não existe no tipo?

Não. Omit retorna silenciosamente o tipo User completo. O TypeScript não avisa, então verifique novamente os nomes das suas chaves.

Q: Armadilha: Partial funciona em objetos aninhados profundamente?

Não. Partial afeta apenas as propriedades de nível superior. Para opcionalidade profunda, você precisa de um tipo recursivo personalizado como DeepPartial.

Q: Como faço para tornar apenas alguns campos opcionais, mantendo outros obrigatórios?

Combine Partial> para os campos opcionais com Omit<> para os restantes.

Q: Para que serve NonNullable?

Remove null e undefined de um tipo. NonNullable resulta em User.

Receita

Use os tipos utilitários embutidos do TypeScript para transformar e compor tipos de props do React. Derive novos tipos de tipos existentes em vez de duplicar definições.

Exemplo de Trabalho

// Tipo base
type User = {
  id: string;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  createdAt: Date;
};
 
// Partial - todos os campos se tornam opcionais (ótimo para formulários de atualização)
type UpdateUserPayload = Partial<User>;
 
// Pick - seleciona campos específicos
type UserPreview = Pick<User, "id" | "name">;
 
// Omit - exclui campos específicos
type CreateUserPayload = Omit<User, "id" | "createdAt">;
 
// Record - mapa de chave-valor tipado
type RolePermissions = Record<User["role"], string[]>;
 
const permissions: RolePermissions = {
  admin: ["read", "write", "delete"],
  editor: ["read", "write"],
  viewer: ["read"],
};

// Componente prático usando tipos derivados
type UserFormProps = {
  initialData?: Partial<User>;
  onSubmit: (data: CreateUserPayload) => void;
};
 
function UserForm({ initialData, onSubmit }: UserFormProps) {
  const [form, setForm] = useState<CreateUserPayload>({
    name: initialData?.name ?? "",
    email: initialData?.email ?? "",
    role: initialData?.role ?? "viewer",
  });
 
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(form);
      }}
    >
      <input
        value={form.name}
        onChange={(e) => setForm({ ...form, name: e.target.value })}
      />
      <input
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
      <button type="submit">Salvar</button>
    </form>
  );
}

Mergulho Profundo

Como Funciona

Partial<T>: Torna todas as propriedades em T opcionais. Útil para payloads de atualização onde você muda apenas alguns campos.
Required<T>: É o inverso de Partial - torna todas as propriedades obrigatórias. Útil para normalizar objetos de configuração com padrões.
Pick<T, K>: Cria um tipo com apenas as chaves especificadas de T. Use-o para criar subtipos focados.
Omit<T, K>: Cria um tipo com todas as chaves, exceto as especificadas. Comum para payloads de criação onde o servidor gera o id.
Record<K, V>: Cria um tipo de objeto com chaves do tipo K e valores do tipo V. Perfeito para mapas de consulta.
Extract<T, U>: Puxa membros de uma união que correspondem a U. Extract<User["role"], "admin" | "editor"> resulta em "admin" | "editor".
Exclude<T, U>: Remove membros de uma união que correspondem a U. O inverso de Extract.

Variações

Extraindo tipos de props de componentes:

// Obtém props de um componente existente
type ButtonProps = React.ComponentProps<typeof Button>;
 
// Obtém props de um elemento HTML
type DivProps = React.ComponentPropsWithoutRef<"div">;
 
// Estende props de elementos HTML
type CardProps = React.ComponentPropsWithoutRef<"div"> & {
  title: string;
  elevated?: boolean;
};

Props somente leitura:

type ImmutableUser = Readonly<User>;
// Todos os campos agora são somente leitura - evita mutação acidental
 
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

Tipos mapeados para estado de formulário:

type FormErrors<T> = Partial<Record<keyof T, string>>;
 
type UserFormErrors = FormErrors<CreateUserPayload>;
// { name?: string; email?: string; role?: string }

NonNullable para remover null/undefined:

type MaybeUser = User | null | undefined;
type DefiniteUser = NonNullable<MaybeUser>; // User

Notas do TypeScript

Tipos utilitários se compõem: Partial<Pick<User, "name" | "email">> resulta em { name?: string; email?: string }.
React.ComponentProps<typeof MyComponent> extrai o tipo de props de qualquer componente, mesmo de terceiros onde o tipo não é exportado.
Parameters<T> e ReturnType<T> funcionam em tipos de função. ReturnType<typeof useAuth> fornece o tipo de retorno de um hook personalizado.

Armadilhas

Omit não gera erro para chaves que não existem no tipo original. Omit<User, "nonExistent"> retorna silenciosamente o tipo User completo.
Partial torna tudo opcional, incluindo campos que deveriam permanecer obrigatórios. Use Partial<Pick<T, K>> & Omit<T, K> para tornar apenas alguns campos opcionais.
Record<string, T> permite qualquer chave de string. Isso pode ocultar erros de digitação. Prefira chaves de união literal quando o conjunto de chaves for conhecido.
Objetos aninhados profundamente não são afetados por Partial ou Readonly. Estes operam apenas nas propriedades de nível superior. Você precisa de tipos recursivos personalizados para transformações profundas.

Alternativas

Abordagem	Prós	Contras
`Partial<T>` para atualizações	Derivado do tipo original, permanece sincronizado	Torna todos os campos opcionais, não apenas alguns
Subtipos manuais	Controle total sobre cada tipo	Duplica definições, desvia do original
Composição `Pick` / `Omit`	Seleção precisa de campos	Composições aninhadas profundamente são difíceis de ler
Zod `.pick()` / `.omit()`	Validação em tempo de execução + inferência de tipo	Requer dependência do Zod
Operador `satisfies`	Valida a forma sem alargar	Não cria um tipo reutilizável

FAQs

O que `Partial<T>` faz e quando devo usá-lo?

Torna toda propriedade em T opcional.
Use-o para payloads de atualização onde você muda apenas alguns campos, por exemplo, Partial<User> para o corpo de uma requisição PATCH.

Qual a diferença entre `Pick` e `Omit`?

Pick<T, K> cria um tipo com apenas as chaves especificadas de T.
Omit<T, K> cria um tipo com todas as chaves, exceto as especificadas.
Use Pick quando quiser um pequeno subconjunto; use Omit quando quiser a maioria dos campos menos alguns.

Como extraio o tipo de props de um componente existente?

type ButtonProps = React.ComponentProps<typeof Button>;
type DivProps = React.ComponentPropsWithoutRef<"div">;

Funciona tanto em componentes personalizados quanto em elementos HTML.

O que `Record<K, V>` faz?

Cria um tipo de objeto com chaves do tipo K e valores do tipo V.
Exemplo: Record<User["role"], string[]> mapeia cada role para um array de strings de permissão.

Qual a diferença entre `Extract` e `Exclude`?

Extract<T, U> mantém membros da união que correspondem a U.
Exclude<T, U> remove membros da união que correspondem a U.
Exemplo: Extract<"admin" | "editor" | "viewer", "admin" | "editor"> resulta em "admin" | "editor".

Posso compor tipos utilitários juntos?

Sim. Eles se compõem livremente: Partial<Pick<User, "name" | "email">> resulta em { name?: string; email?: string }.
A composição mantém os tipos derivados de uma única fonte de verdade.

Armadilha: `Omit` gera erro se eu especificar uma chave que não existe no tipo?

Não. Omit<User, "nonExistent"> retorna silenciosamente o tipo User completo.
O TypeScript não avisa, então verifique novamente os nomes das suas chaves.

Armadilha: `Partial` funciona em objetos aninhados profundamente?

Não. Partial afeta apenas as propriedades de nível superior.
Para opcionalidade profunda, você precisa de um tipo recursivo personalizado como DeepPartial<T>.

Como faço para tornar apenas alguns campos opcionais, mantendo outros obrigatórios?

type UpdateUser = Partial<Pick<User, "name" | "email">> & Omit<User, "name" | "email">;

Combine Partial<Pick<>> para os campos opcionais com Omit<> para os restantes.

Para que serve `NonNullable<T>`?

Remove null e undefined de um tipo.
NonNullable<User | null | undefined> resulta em User.

Como obtenho o tipo de retorno de um hook personalizado?

type AuthData = ReturnType<typeof useAuth>;

ReturnType<T> funciona em qualquer tipo de função, incluindo hooks e funções utilitárias.

O que é um tipo mapeado e como `FormErrors` o utiliza?

type FormErrors<T> = Partial<Record<keyof T, string>>;

Record<keyof T, string> mapeia cada chave de T para um valor string.
Envolver em Partial torna cada mensagem de erro opcional.

// Tipo base
type User = {
  id: string;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  createdAt: Date;
};
 
// Partial - todos os campos se tornam opcionais (ótimo para formulários de atualização)
type UpdateUserPayload = Partial<User>;
 
// Pick - seleciona campos específicos
type UserPreview = Pick<User, "id" | "name">;
 
// Omit - exclui campos específicos
type CreateUserPayload = Omit<User, "id" | "createdAt">;
 
// Record - mapa de chave-valor tipado
type RolePermissions = Record<User["role"], string[]>;
 
const permissions: RolePermissions = {
  admin: ["read", "write", "delete"],
  editor: ["read", "write"],
  viewer: ["read"],
};

// Componente prático usando tipos derivados
type UserFormProps = {
  initialData?: Partial<User>;
  onSubmit: (data: CreateUserPayload) => void;
};
 
function UserForm({ initialData, onSubmit }: UserFormProps) {
  const [form, setForm] = useState<CreateUserPayload>({
    name: initialData?.name ?? "",
    email: initialData?.email ?? "",
    role: initialData?.role ?? "viewer",
  });
 
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(form);
      }}
    >
      <input
        value={form.name}
        onChange={(e) => setForm({ ...form, name: e.target.value })}
      />
      <input
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
      <button type="submit">Salvar</button>
    </form>
  );
}

Mergulho Profundo

Como Funciona

Partial<T>: Torna todas as propriedades em T opcionais. Útil para payloads de atualização onde você muda apenas alguns campos.
Required<T>: É o inverso de Partial - torna todas as propriedades obrigatórias. Útil para normalizar objetos de configuração com padrões.
Pick<T, K>: Cria um tipo com apenas as chaves especificadas de T. Use-o para criar subtipos focados.
Omit<T, K>: Cria um tipo com todas as chaves, exceto as especificadas. Comum para payloads de criação onde o servidor gera o id.
Record<K, V>: Cria um tipo de objeto com chaves do tipo K e valores do tipo V. Perfeito para mapas de consulta.
Extract<T, U>: Puxa membros de uma união que correspondem a U. Extract<User["role"], "admin" | "editor"> resulta em "admin" | "editor".
Exclude<T, U>: Remove membros de uma união que correspondem a U. O inverso de Extract.

Variações

Extraindo tipos de props de componentes:

// Obtém props de um componente existente
type ButtonProps = React.ComponentProps<typeof Button>;
 
// Obtém props de um elemento HTML
type DivProps = React.ComponentPropsWithoutRef<"div">;
 
// Estende props de elementos HTML
type CardProps = React.ComponentPropsWithoutRef<"div"> & {
  title: string;
  elevated?: boolean;
};

Props somente leitura:

type ImmutableUser = Readonly<User>;
// Todos os campos agora são somente leitura - evita mutação acidental
 
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

Tipos mapeados para estado de formulário:

type FormErrors<T> = Partial<Record<keyof T, string>>;
 
type UserFormErrors = FormErrors<CreateUserPayload>;
// { name?: string; email?: string; role?: string }

NonNullable para remover null/undefined:

type MaybeUser = User | null | undefined;
type DefiniteUser = NonNullable<MaybeUser>; // User

Notas do TypeScript

Tipos utilitários se compõem: Partial<Pick<User, "name" | "email">> resulta em { name?: string; email?: string }.
React.ComponentProps<typeof MyComponent> extrai o tipo de props de qualquer componente, mesmo de terceiros onde o tipo não é exportado.
Parameters<T> e ReturnType<T> funcionam em tipos de função. ReturnType<typeof useAuth> fornece o tipo de retorno de um hook personalizado.

Armadilhas

Omit não gera erro para chaves que não existem no tipo original. Omit<User, "nonExistent"> retorna silenciosamente o tipo User completo.
Partial torna tudo opcional, incluindo campos que deveriam permanecer obrigatórios. Use Partial<Pick<T, K>> & Omit<T, K> para tornar apenas alguns campos opcionais.
Record<string, T> permite qualquer chave de string. Isso pode ocultar erros de digitação. Prefira chaves de união literal quando o conjunto de chaves for conhecido.
Objetos aninhados profundamente não são afetados por Partial ou Readonly. Estes operam apenas nas propriedades de nível superior. Você precisa de tipos recursivos personalizados para transformações profundas.

Alternativas

Abordagem	Prós	Contras
`Partial<T>` para atualizações	Derivado do tipo original, permanece sincronizado	Torna todos os campos opcionais, não apenas alguns
Subtipos manuais	Controle total sobre cada tipo	Duplica definições, desvia do original
Composição `Pick` / `Omit`	Seleção precisa de campos	Composições aninhadas profundamente são difíceis de ler
Zod `.pick()` / `.omit()`	Validação em tempo de execução + inferência de tipo	Requer dependência do Zod
Operador `satisfies`	Valida a forma sem alargar	Não cria um tipo reutilizável

FAQs

O que `Partial<T>` faz e quando devo usá-lo?

Torna toda propriedade em T opcional.
Use-o para payloads de atualização onde você muda apenas alguns campos, por exemplo, Partial<User> para o corpo de uma requisição PATCH.

Qual a diferença entre `Pick` e `Omit`?

Pick<T, K> cria um tipo com apenas as chaves especificadas de T.
Omit<T, K> cria um tipo com todas as chaves, exceto as especificadas.
Use Pick quando quiser um pequeno subconjunto; use Omit quando quiser a maioria dos campos menos alguns.

Como extraio o tipo de props de um componente existente?

type ButtonProps = React.ComponentProps<typeof Button>;
type DivProps = React.ComponentPropsWithoutRef<"div">;

Funciona tanto em componentes personalizados quanto em elementos HTML.

O que `Record<K, V>` faz?

Cria um tipo de objeto com chaves do tipo K e valores do tipo V.
Exemplo: Record<User["role"], string[]> mapeia cada role para um array de strings de permissão.

Qual a diferença entre `Extract` e `Exclude`?

Extract<T, U> mantém membros da união que correspondem a U.
Exclude<T, U> remove membros da união que correspondem a U.
Exemplo: Extract<"admin" | "editor" | "viewer", "admin" | "editor"> resulta em "admin" | "editor".

Posso compor tipos utilitários juntos?

Sim. Eles se compõem livremente: Partial<Pick<User, "name" | "email">> resulta em { name?: string; email?: string }.
A composição mantém os tipos derivados de uma única fonte de verdade.

Armadilha: `Omit` gera erro se eu especificar uma chave que não existe no tipo?

Não. Omit<User, "nonExistent"> retorna silenciosamente o tipo User completo.
O TypeScript não avisa, então verifique novamente os nomes das suas chaves.

Armadilha: `Partial` funciona em objetos aninhados profundamente?

Não. Partial afeta apenas as propriedades de nível superior.
Para opcionalidade profunda, você precisa de um tipo recursivo personalizado como DeepPartial<T>.

Como faço para tornar apenas alguns campos opcionais, mantendo outros obrigatórios?

type UpdateUser = Partial<Pick<User, "name" | "email">> & Omit<User, "name" | "email">;

Combine Partial<Pick<>> para os campos opcionais com Omit<> para os restantes.

Para que serve `NonNullable<T>`?

Remove null e undefined de um tipo.
NonNullable<User | null | undefined> resulta em User.

Como obtenho o tipo de retorno de um hook personalizado?

type AuthData = ReturnType<typeof useAuth>;

ReturnType<T> funciona em qualquer tipo de função, incluindo hooks e funções utilitárias.

O que é um tipo mapeado e como `FormErrors` o utiliza?

type FormErrors<T> = Partial<Record<keyof T, string>>;

Record<keyof T, string> mapeia cada chave de T para um valor string.
Envolver em Partial torna cada mensagem de erro opcional.

Tipos Utilitários para React

Receita

Exemplo de Trabalho

Mergulho Profundo

Como Funciona

Variações

Notas do TypeScript

Armadilhas

Alternativas

FAQs

Relacionados

Tipos Utilitários para React

Receita

Exemplo de Trabalho

Mergulho Profundo

Como Funciona

Variações

Notas do TypeScript

Armadilhas

Alternativas

FAQs

Relacionados

Tipos Utilitários para React

Buscar na documentação

Tipos Utilitários para React