Літеральні типи та твердження

TypeScript надає розширені інструменти для звуження можливих значень змінних і змусити компілятор розпізнавати більш конкретні типи, коли це необхідно.

Літеральні типи

Літеральний тип представляє точне єдине значення (наприклад, певний рядок або число). Зазвичай вони поєднуються з типами союзів:

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

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

Твердження типу (as)

Іноді у вас є інформація про тип, яку TypeScript не може знати під час компіляції. У цих випадках ви можете використовувати затвердження типу за допомогою ключового слова as:

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

Твердження повідомляє компілятору: "Повір мені, я знаю, що цей елемент є HTMLCanvasElement". Він не виконує жодних перевірок або приведення під час виконання; це лише допомагає перевірці типів.

Const Assertions (as const)

Коли ми оголошуємо об’єкт або масив за допомогою const, TypeScript все ще дозволяє змінювати його внутрішні властивості. Додавши as const в кінці, вся структура заморожується і стає доступною лише для читання, перетворюючи всі властивості на їхні точні літеральні типи:

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

Типи літеральних шаблонів

Типи літеральних шаблонів створюються на основі рядків шаблону JavaScript, але використовуються в позиціях типів. Вони дозволяють поєднувати декілька типів літералів в один:

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

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

Утиліти рядків у типах літеральних шаблонів

TypeScript надає спеціальні типи утиліт для маніпулювання символами в межах типів літеральних шаблонів:

• Capitalize<StringType>: робить першу літеру рядка великою.
• Uncapitalize<StringType>: Вилучає першу літеру рядка з великої літери.
• Uppercase<StringType>: перетворює весь рядок у верхній регістр.
• Lowercase<StringType>: перетворює весь рядок на нижній регістр.

type ActionType = 'click' | 'hover';

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

Спробуйте самі

Вправа 1: Direction Literal Union

Вправа 2: твердження на JSON.parse

Вправа 3: Літерал шаблону для подій

Вправа 4: Тип літералу шаблону з великими літерами