0Pricing
React Academy · Aula

Tipos condicionais e mapeados no React

Crie tipos de propriedades de componentes cuja forma mude com base nos valores de outras propriedades usando tipos condicionais.

Tipos condicionais e mapeados no React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Noções básicas de tipos condicionais

Um tipo condicional usa a sintaxe T extends U ? X : Y: se T puder ser atribuído a U, o tipo será resolvido como X; caso contrário, como Y.

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

type A = IsString<string>;  // true
type B = IsString<number>;  // false
type C = IsString<'hello'>; // true

Propriedades condicionais com base em outras propriedades

Use tipos condicionais para tornar uma propriedade obrigatória ou opcional com base no valor de outra propriedade.

type InputProps<T extends 'text' | 'number'> = {
  type: T;
} & (T extends 'number' ? { min?: number; max?: number } : { maxLength?: number });

const numInput: InputProps<'number'> = { type: 'number', min: 0, max: 100 };
const txtInput: InputProps<'text'> = { type: 'text', maxLength: 50 };

Tipos mapeados

Tipos mapeados criam um novo tipo transformando cada propriedade de um tipo existente. A sintaxe in keyof percorre todas as chaves.

type Optional<T> = { [K in keyof T]?: T[K] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Nullable<T> = { [K in keyof T]: T[K] | null };

Tornando propriedades opcionais em formulários de atualização

Use Partial<T> (um tipo mapeado integrado) para propriedades de formulários de atualização nos quais nem todos os campos são obrigatórios.

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

// Update form — all fields optional:
type UserUpdateProps = Partial<Omit<User, 'id'>>;

function UserUpdateForm(props: UserUpdateProps) {
  // name, email, role are all optional
}

Record com tipos mapeados

Crie tipos de consulta cujas chaves vêm de uma união e cujos valores têm um formato consistente.

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

type StatusConfig = Record<Status, {
  label: string;
  icon: React.ReactNode;
  color: string;
}>;

const statusConfig: StatusConfig = {
  idle: { label: 'Ready', icon: <ReadyIcon />, color: 'gray' },
  loading: { label: 'Loading...', icon: <Spinner />, color: 'blue' },
  success: { label: 'Done', icon: <CheckIcon />, color: 'green' },
  error: { label: 'Error', icon: <XIcon />, color: 'red' },
};

Selecionando chaves obrigatórias

Use tipos condicionais com -? (remover opcionalidade) para extrair somente as chaves obrigatórias de um tipo.

type RequiredKeys<T> = {
  [K in keyof T]-?: undefined extends T[K] ? never : K;
}[keyof T];

interface FormData { name: string; email: string; phone?: string; }
type Required = RequiredKeys<FormData>; // 'name' | 'email'

Tipos de literais de modelo

Tipos de literais de modelo combinam tipos de literais de cadeia de caracteres, permitindo nomes de eventos tipados, cadeias de caracteres de classes CSS e caminhos de API.

type EventName = 'click' | 'change' | 'focus';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onChange' | 'onFocus'

type ApiPath<R extends string> = `/api/${R}`;
type UserPath = ApiPath<'users'>; // '/api/users'

Extraindo propriedades condicionalmente

Use Extract e Exclude para filtrar tipos de união.

type AllProps = 'onClick' | 'onHover' | 'onChange' | 'style';
type EventHandlers = Extract<AllProps, `on${string}`>;
// 'onClick' | 'onHover' | 'onChange'

type NonEventProps = Exclude<AllProps, `on${string}`>;
// 'style'

Tipos mapeados para validação de formulários

Gere tipos de erros de validação que espelhem o formato dos dados do formulário — uma mensagem de erro para cada campo.

interface LoginForm { email: string; password: string; }

type FormErrors<T> = { [K in keyof T]?: string };
type LoginErrors = FormErrors<LoginForm>;
// { email?: string; password?: string }

const errors: LoginErrors = { email: 'Invalid email format' };

Tipos mapeados discriminados

Combine tipos mapeados com tipos condicionais para criar tipos que mudam de formato com base em um discriminador.

type EventMap = {
  click: { x: number; y: number };
  keydown: { key: string; code: string };
  resize: { width: number; height: number };
};

type Handler<E extends keyof EventMap> = (event: EventMap[E]) => void;

function on<E extends keyof EventMap>(event: E, handler: Handler<E>) {
  window.addEventListener(event, handler as EventListener);
}

Quando não sofisticar demais os tipos

Tipos condicionais e mapeados oferecem mais poder, mas também acrescentam complexidade. Use-os quando eliminarem duplicação real ou evitarem erros concretos — não apenas para demonstrar conhecimento de TypeScript.

Verificação rápida

O que o tipo mapeado { [K in keyof T]?: T[K] } faz?

Recapitulação

Tipos condicionais (T extends U ? X : Y) criam tipos que seguem caminhos diferentes com base na possibilidade de atribuição. Tipos mapeados ([K in keyof T]) transformam cada propriedade de um tipo. Use-os para tipos parciais de formulários de atualização, mapas de eventos tipados, formatos de erros de formulários e caminhos de API em literais de modelo.

Perguntas Frequentes

A aula “Tipos condicionais e mapeados no React” é grátis?

Sim — o texto completo de “Tipos condicionais e mapeados no React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Tipos condicionais e mapeados no React”?

Crie tipos de propriedades de componentes cuja forma mude com base nos valores de outras propriedades usando tipos condicionais. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Tipos condicionais e mapeados no React”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Uniões discriminadas para variantes de componentes
  2. Tipos condicionais e mapeados no React
  3. Componentes polimórficos com a propriedade 'as'
  4. Formulários seguros quanto aos tipos e contratos de respostas de API
← Voltar para React Academy