Tipos Literais e Asserções

TypeScript fornece ferramentas avançadas para restringir os valores possíveis de variáveis ​​e forçar o compilador a reconhecer tipos mais específicos quando necessário.

Tipos Literais

Um tipo literal representa um valor único e exato (por exemplo, uma string ou número específico). Eles geralmente são combinados com tipos de união:

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLight

Asserções de tipo (as)

Às vezes você tem informações sobre um tipo que o TypeScript não consegue saber em tempo de compilação. Nestes casos, você pode usar uma asserção de tipo usando a palavra-chave as:

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

A afirmação diz ao compilador: "Confie em mim, eu sei que este elemento é um HTMLCanvasElement". Ele não realiza nenhuma verificação ou conversão em tempo de execução; isso só ajuda o verificador de tipo.

Asserções Const (as const)

Quando declaramos um objeto ou array com const, o TypeScript ainda permite modificar suas propriedades internas. Ao adicionar as const no final, toda a estrutura é congelada e tornada somente leitura, convertendo todas as propriedades em seus tipos literais exatos:

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-only

Tipos literais de modelo

Os tipos literais de modelo são construídos sobre strings de modelo JavaScript, mas são usados ​​em posições de tipo. Eles permitem combinar vários tipos literais em um:

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

Utilitários de string em tipos literais de modelo

TypeScript fornece tipos de utilitários especiais para manipular caracteres dentro de tipos literais de modelo:

• Capitalize<StringType>: Coloca a primeira letra da string em maiúscula.
• Uncapitalize<StringType>: Descapitaliza a primeira letra da string.
• Uppercase<StringType>: Converte toda a string em maiúsculas.
• Lowercase<StringType>: Converte toda a string em minúsculas.

type ActionType = 'click' | 'hover';

// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

Experimente você mesmo

Exercício 1: Direção União Literal

Exercício 2: Asserção em JSON.parse

Exercício 3: Literal de modelo para eventos

Exercício 4: Tipo Literal de Modelo com Capitalização