Tipos mapeados e tipos condicionais
Crie tipos mapeados para transformar todas as propriedades de um tipo e use tipos condicionais com infer para lógica avançada no nível dos tipos.
Tipos mapeados e tipos condicionais é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Tipos mapeados — transformando cada propriedade
Os tipos mapeados iteram pelas chaves de um tipo e as transformam. Eles são a base dos tipos utilitários Partial, Readonly e Record.
// Partial implemented as a mapped type:
type MyPartial<T> = {
[K in keyof T]?: T[K];
};
// Readonly:
type MyReadonly<T> = {
readonly [K in keyof T]: T[K];
};Remapeando chaves com as
Use as na cláusula de mapeamento para remapear nomes de chaves. Combine-o com tipos de literais de modelo para criar transformações poderosas.
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }Filtrando propriedades com never
Retorne never de um remapeamento de chaves para remover essa propriedade do tipo resultante.
// Keep only function-valued properties:
type FunctionProperties<T> = {
[K in keyof T as T[K] extends Function ? K : never]: T[K];
};Tipos condicionais — se/senão para tipos
Os tipos condicionais usam o padrão T extends U ? TrueType : FalseType. Eles são avaliados no nível de tipos, não em tempo de execução.
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>; // numberTipos condicionais distributivos
Quando T é uma união, os tipos condicionais são distribuídos por cada membro. string | number extends string ? ... verifica cada um separadamente: (string extends string ? ...) | (number extends string ? ...).
type ToArray<T> = T extends any ? T[] : never;
type StringOrNumberArray = ToArray<string | number>;
// string[] | number[] (not (string | number)[])Usando infer para extrair tipos
infer R introduz uma variável de tipo que o TypeScript preenche. Isso permite capturar partes da estrutura de um tipo.
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>; // numberTipos de literais de modelo
Os tipos de literais de modelo usam a mesma sintaxe de crases dos literais de modelo, mas no nível de tipos, criando tipos união a partir de combinações de literais de string.
type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'
type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'Combinando tipos mapeados e condicionais
Os padrões mais poderosos do TypeScript combinam ambos. Os tipos integrados required, partial, readonly e record são todos tipos mapeados.
// Make all functions in an object async:
type Asyncify<T> = {
[K in keyof T]: T[K] extends (...args: infer A) => infer R
? (...args: A) => Promise<R>
: T[K];
};DeepPartial — Tipo utilitário recursivo
O utilitário integrado para tornar propriedades opcionais atua apenas em um nível. DeepPartial percorre recursivamente os objetos aninhados.
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};Uso no mundo real: tipos de resposta de API
Tipos mapeados e condicionais permitem derivações avançadas de tipos de API — por exemplo, extrair apenas as propriedades serializáveis como JSON de um objeto.
Evite engenharia excessiva
Malabarismos complexos com tipos podem tornar o código difícil de entender. Pergunte sempre: um alias de tipo ou uma interface mais simples seria mais claro? Os tipos devem documentar a intenção, não demonstrar domínio de TypeScript.
Verificação rápida
O que T extends U ? A : B resulta quando T é um tipo união?
Recapitulação: tipos mapeados e condicionais
Os tipos mapeados iteram pelas chaves com [K in keyof T]. Utilize as para remapear chaves. Retorne never para filtrar. Tipos condicionais: T extends U ? A : B. infer extrai variáveis de tipo. Tipos literais de modelo constroem uniões de strings. Combine ambos para obter transformações avançadas de tipos, como DeepPartial e a transformação assíncrona.
Perguntas Frequentes
A aula “Tipos mapeados e tipos condicionais” é grátis?
Sim — o texto completo de “Tipos mapeados e tipos condicionais” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Tipos mapeados e tipos condicionais”?
Crie tipos mapeados para transformar todas as propriedades de um tipo e use tipos condicionais com infer para lógica avançada no nível dos tipos. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 3 de 4.
Quanto tempo leva a aula “Tipos mapeados e tipos condicionais”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Genéricos: T extends e restrições
- Tipos utilitários: Partial Required Pick Omit
- Tipos mapeados e tipos condicionais
- Restrição de tipos: typeof instanceof uniões discriminadas