Fundamentos dos Tipos Literais de Modelo
Crie tipos de texto a partir de uniões e marcadores de posição.
Fundamentos dos Tipos Literais de Modelo é uma aula grátis de TypeScript 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 TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.
Cadeias de caracteres no nível de tipos
Os tipos literais de modelo constroem novos tipos literais de cadeia de caracteres combinando outros tipos de cadeia de caracteres. Eles usam a mesma sintaxe de acento grave e espaço reservado das cadeias de modelo em tempo de execução, mas operam exclusivamente sobre tipos.
Um tipo literal de modelo simples
Imagine um alias de tipo Greeting definido como um literal de modelo contendo o texto Hello, seguido de um espaço reservado para o tipo Name. Se Name for o literal 'Ada', então Greeting será o tipo literal 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)Espaços reservados incorporam outros tipos
Dentro do espaço reservado, pode-se colocar qualquer tipo semelhante a uma cadeia de caracteres: um literal, um parâmetro de tipo ou uma união. O TypeScript o substitui no texto ao redor para formar um novo tipo literal.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)Combinar uniões multiplica as variantes
Quando um espaço reservado contém uma união, o modelo se expande para cada membro. Um modelo que combina 'a' | 'b' com um sufixo fixo produz uma união de cada combinação.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Vários espaços reservados se multiplicam
Dois espaços reservados de união formam um produto cartesiano. Combinar sizes 'sm' | 'lg' com colors 'red' | 'blue' por meio de um separador produz quatro tipos literais.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Por que isso é útil
Os tipos literais de modelo permitem descrever famílias de cadeias de caracteres com precisão — nomes de classes CSS, nomes de eventos e caminhos de rotas — para que o compilador rejeite cadeias malformadas antes do tempo de execução.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Números e booleanos são convertidos
Tipos que não são cadeias de caracteres, quando colocados em um tipo literal de modelo, são convertidos para sua forma textual. Um literal numérico 42 torna-se o texto 42 dentro do tipo de cadeia resultante.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Usando um espaço reservado genérico
Uma função genérica pode construir um tipo de retorno literal de modelo a partir do tipo literal de seu argumento, portanto a cadeia precisa é conhecida em cada ponto de chamada.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeRestringindo entradas
É possível exigir que um valor corresponda a um tipo literal de modelo. Somente cadeias que se encaixam no padrão descrito são aceitas, identificando erros de digitação em tempo de compilação.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignableUma cadeia ampla quebra o padrão
Se um espaço reservado tiver o tipo amplo string, em vez de um literal, todo o modelo será reduzido a string. A especificidade exige entradas literais, geralmente por meio de as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Onde usá-los
Os tipos literais de modelo são ideais sempre que as cadeias seguem uma estrutura: classes utilitárias de CSS, identificadores com prefixo, chaves de consulta e nomes de eventos. Eles transformam convenções de cadeias em contratos verificados pelo compilador.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Verificação rápida
Teste sua compreensão dos conceitos básicos de tipos literais de modelo.
Recapitulação
Os tipos literais de modelo constroem tipos literais de cadeia de caracteres substituindo espaços reservados no texto ao redor. Os espaços reservados de união se expandem para todas as combinações, e várias uniões formam um produto cartesiano. Literais que não são cadeias de caracteres são convertidos para sua forma textual. Um espaço reservado amplo string reduz o resultado a string, portanto são necessárias entradas literais, geralmente por meio de as const, para obter tipos precisos. Assim, as convenções de cadeias passam a ser verificadas pelo compilador.
Perguntas Frequentes
A aula “Fundamentos dos Tipos Literais de Modelo” é grátis?
Sim — o texto completo de “Fundamentos dos Tipos 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 TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.
O que vou aprender em “Fundamentos dos Tipos Literais de Modelo”?
Crie tipos de texto a partir de uniões e marcadores de posição. 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 1 de 4.
Quanto tempo leva a aula “Fundamentos dos Tipos 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 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