Tipos de literais de modelo
Combinar tipos de literais de cadeia de caracteres com a sintaxe de literais de modelo para derivar tipos como nomes de eventos, cadeias de propriedades CSS e caminhos de rotas de API.
Tipos de literais de modelo é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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.
O que são tipos de literais de modelo
O TypeScript pode construir tipos de cadeias de caracteres a partir de literais de modelo no nível dos tipos. Combinados com tipos de união, eles permitem expressar milhares de cadeias de caracteres válidas sem listar cada uma.
Tipo de literal de modelo básico
Use cadeias de caracteres entre crases na posição de tipo — elas aceitam outros tipos como interpolações.
type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!'; // OK
const b: Greeting = 'Hi, Alice!'; // ErrorCombinando uniões
Quando você interpola uma união, o TypeScript cria o produto cartesiano de todas as combinações.
type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';
type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)Inferência de nomes de eventos
Derive nomes de manipuladores de eventos a partir dos nomes dos eventos — um uso clássico no mundo real.
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'
type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }Tipos utilitários para manipulação de cadeias de caracteres
O TypeScript fornece auxiliares integrados: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.
type Hi = Capitalize<'hello'>; // 'Hello'
type Yell = Uppercase<'hello'>; // 'HELLO'
type Quiet = Lowercase<'HELLO'>; // 'hello'
type Lower = Uncapitalize<'Hi'>; // 'hi'Tipos de propriedades CSS
Expresse tipos de cadeias de caracteres semelhantes aos do CSS: valores em pixels, cores hexadecimais e porcentagens.
type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;
type Style = { padding: Px; color: Hex; width: Pct };
const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // ErrorInferência com literais de modelo
A palavra-chave infer pode extrair partes de um tipo de cadeia de caracteres — útil para analisadores e tipos de rotas.
type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;
type Result = ExtractName<'Hello, Alice!'>; // 'Alice'Tipos de rotas de API
Rotas de API com segurança de tipos: extraia parâmetros de caminho de um padrão de cadeia de caracteres.
type PathParams<T extends string> =
T extends `${string}/:${infer Param}/${infer Rest}`
? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
: T extends `${string}/:${infer Param}`
? { [K in Param]: string }
: {};
type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }Tipos de sugestão de classes do Tailwind
Limite as propriedades de cadeia de caracteres aos valores conhecidos do sistema de design.
type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'
function Box(props: { className: TwSpacing }) { /* ... */ }Limites e desempenho do compilador
Os produtos cartesianos de literais de modelo podem explodir (uma união de 50 × 50 produz 2500 cadeias de caracteres). O TypeScript compila, mas a inferência fica lenta. Mantenha o alfabeto pequeno.
Distinguindo tipos de literais de cadeia de caracteres
Use literais de modelo como uma forma mais expressiva de marcação — ainda é uma cadeia de caracteres, mas com restrições.
Verificação rápida
Em que resulta type X = `on${Capitalize<'click' | 'focus'>}`?
Recapitulação: tipos de literais de modelo
Construa tipos de cadeias de caracteres a partir de literais de modelo com uniões interpoladas. Os produtos cartesianos crescem rapidamente — mantenha os alfabetos pequenos. Use as utilidades de capitalização, conversão para maiúsculas e minúsculas e remoção da capitalização inicial. Combine-as com infer para extrair partes de cadeias de caracteres. Elas são ótimas para nomes de eventos, valores de CSS, parâmetros de rotas e nomes de classes do sistema de design.
Perguntas Frequentes
A aula “Tipos de literais de modelo” é grátis?
Sim — o texto completo de “Tipos de literais de modelo” é 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 de literais de modelo”?
Combinar tipos de literais de cadeia de caracteres com a sintaxe de literais de modelo para derivar tipos como nomes de eventos, cadeias de propriedades CSS e caminhos de rotas de API. 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 1 de 4.
Quanto tempo leva a aula “Tipos de literais de modelo”?
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
- Tipos de literais de modelo
- Decoradores e metadados
- TypeScript com React: genéricos, FC e hooks
- Modo estrito e eliminação de any