TypeScript Academy · Aula

Tipos literais de modelo: padrões de texto

Combine uniões de textos em tipos de padrão

Tipos literais de modelo: padrões de texto é uma aula grátis de TypeScript 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 TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

Boas-vindas

Os tipos literais de modelo usam a sintaxe de crases em nível de tipo para construir tipos de cadeias de caracteres a partir de combinações de outros tipos de cadeias de caracteres.

Tipo literal de modelo básico

Combine tipos literais de cadeias de caracteres com a sintaxe de modelo.

type Greeting = `Hello, ${string}`;
const g: Greeting = 'Hello, World'; // OK
// const bad: Greeting = 'Hi there'; // Error

Combinando uniões

Quando uma união é usada em um literal de modelo, o TypeScript gera todas as combinações.

type Color = 'red' | 'green' | 'blue';
type Size = 'sm' | 'lg';
type ColorSize = `${Color}-${Size}`;
// 'red-sm' | 'red-lg' | 'green-sm' | ...

Padrão de nomes de eventos

Um uso comum é gerar nomes de eventos tipados a partir de entidades.

type Entity = 'user' | 'product';
type EventName = `on${Capitalize<Entity>}Created`;
// 'onUserCreated' | 'onProductCreated'

Capitalize e outros tipos intrínsecos

O TypeScript fornece Capitalize, Uncapitalize, Uppercase e Lowercase como tipos integrados de manipulação de cadeias de caracteres.

type T = Capitalize<'hello world'>; // 'Hello world'
type U = Uppercase<'hello'>;        // 'HELLO'
type L = Lowercase<'WORLD'>;        // 'world'

Padrão de geração de acessadores

Use tipos literais de modelo com tipos mapeados para gerar nomes de métodos de acesso.

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

Parâmetros de rota tipados

Extraia parâmetros de rota tipados de uma cadeia de caracteres que representa um padrão de URL.

type RouteParams<T extends string> =
  T extends `${infer _Start}:${infer Param}/${infer Rest}`
    ? Param | RouteParams<Rest>
    : T extends `${infer _Start}:${infer Param}`
    ? Param
    : never;

Nomenclatura de propriedades CSS

Gere nomes tipados de propriedades personalizadas de CSS.

type CSSVar = `--${string}`;
const color: CSSVar = '--primary-color'; // OK

Literal de modelo em parâmetros de função

Use tipos literais de modelo para restringir parâmetros de cadeias de caracteres.

function emit<E extends `on${string}`>(event: E): void {
  console.log('Emitting:', event);
}
emit('onClick'); // OK
// emit('click'); // Error — must start with 'on'

Extraindo partes com infer

Use infer dentro de literais de modelo para extrair subcadeias de caracteres em nível de tipo.

type GetSuffix<T extends string> =
  T extends `${infer _Prefix}_${infer Suffix}` ? Suffix : never;
type S = GetSuffix<'user_created'>; // 'created'

Interseção com Record

Combine tipos literais de modelo com Record para criar mapas tipados de manipuladores de eventos.

type Handlers<T extends string> = Record<`on${Capitalize<T>}`, () => void>;

Verificação rápida

Ao que `type R = `${string | number}-id`` é avaliado?

Recapitulação

Os tipos literais de modelo constroem tipos de cadeias de caracteres a partir de combinações usando a sintaxe de crases. Eles são distribuídos pelas uniões, funcionam com auxiliares como Capitalize e Uppercase e permitem padrões poderosos para nomes de eventos, parâmetros de rota e variáveis CSS.

Perguntas Frequentes

A aula “Tipos literais de modelo: padrões de texto” é grátis?

Sim — o texto completo de “Tipos literais de modelo: padrões de texto” é 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 “Tipos literais de modelo: padrões de texto”?

Combine uniões de textos em tipos de padrã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 3 de 4.

Quanto tempo leva a aula “Tipos literais de modelo: padrões de texto”?

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

Tipos mapeados: transformando tipos de objetos
Modificadores em tipos mapeados: readonly e ?
Tipos literais de modelo: padrões de texto
Remapeamento de chaves com as em tipos mapeados

← Voltar para TypeScript Academy