Modelando Textos Estruturados
Imponha formatos como nomes de eventos e caminhos de rotas.
Modelando Textos Estruturados é uma aula grátis de TypeScript 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 TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.
Garantindo formatos de cadeias
Muitas cadeias de caracteres em aplicações reais seguem uma estrutura: nomes de manipuladores de eventos, caminhos de rotas de API e variáveis CSS. Os tipos literais de modelo permitem modelar esses formatos para que o compilador os imponha.
Modelando nomes de manipuladores de eventos
Um nome de manipulador costuma ser formado por on mais um evento com inicial maiúscula. Usando o auxiliar intrínseco Capitalize dentro de um modelo, o evento 'click' corresponde ao nome de manipulador 'onClick'.
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)Por que Capitalize importa aqui
Sem Capitalize, o modelo produziria 'onclick'. O tipo intrínseco coloca a primeira caractere do literal em maiúscula, produzindo nomes idiomáticos de manipuladores em camelCase.
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)Gerando um mapa de manipuladores
Combine chaves de literal de modelo com um tipo mapeado para gerar um tipo de objeto de manipuladores — uma função tipada por evento, com nomes corretamente capitalizados.
type Events = "click" | "hover"
type Handlers = {
[E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)Modelando caminhos de rotas
As rotas de API compartilham uma estrutura formada por uma barra inicial, um recurso e um segmento de identificador. Um modelo que combina texto fixo com um espaço reservado captura os caminhos válidos.
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)Caminhos parametrizados
Adicione um espaço reservado para um identificador dinâmico. Um modelo com uma barra, um recurso, outra barra e um segmento de identificador genérico modela caminhos como um caminho de usuários seguido de um identificador numérico.
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42Impondo formatos em tempo de compilação
Ao tipar um parâmetro como um tipo literal de modelo, você rejeita qualquer cadeia que não corresponda à estrutura — uma proteção contra rotas ou chaves malformadas.
type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")Compondo nomes de variáveis CSS
As propriedades personalizadas de CSS seguem um esquema de nomenclatura. Um modelo com dois hifens iniciais e um espaço reservado para o token modela nomes como uma variável de token de cor.
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)Separando com inferência
Os tipos literais de modelo também podem analisar cadeias: com tipos condicionais e infer, você extrai partes de uma cadeia estruturada no nível de tipos — por exemplo, extraindo o método de uma cadeia de caracteres de um ponto de acesso.
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)Benefício no mundo real
Os tipos de cadeias estruturadas identificam classes inteiras de erros: um nome de manipulador escrito incorretamente, uma rota desconhecida ou um token CSS incorreto — tudo se torna um erro de compilação, em vez de uma falha silenciosa em tempo de execução.
type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))Mantenha-os legíveis
Por mais poderosos que sejam, tipos de modelo profundamente aninhados prejudicam a legibilidade. Dê nomes a apelidos de tipo intermediários para que a estrutura permaneça clara para o próximo leitor.
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)Verificação rápida
Teste sua compreensão da modelagem de cadeias estruturadas.
Recapitulação
Os tipos literais de modelo modelam cadeias estruturadas — nomes de manipuladores (on + Capitalize de um evento), caminhos de rotas e variáveis CSS — e impõem esses formatos em tempo de compilação. Combinados com tipos mapeados, eles geram mapas de manipuladores; com tipos condicionais e infer, analisam cadeias. Dê nomes aos apelidos intermediários para manter padrões complexos legíveis.
Perguntas Frequentes
A aula “Modelando Textos Estruturados” é grátis?
Sim — o texto completo de “Modelando Textos Estruturados” é 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 TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.
O que vou aprender em “Modelando Textos Estruturados”?
Imponha formatos como nomes de eventos e caminhos de rotas. Você pratica TypeScript 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 TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript 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 “Modelando Textos Estruturados”?
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 TypeScript Academy?
Sim. Cada aula de TypeScript 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
- Fundamentos dos Tipos Literais de Modelo
- Modelando Textos Estruturados
- Uniões de Texto e Autocompletar
- Tipos Intrínsecos de Manipulação de Texto