Frontend Academy · Урок

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

Объединяйте типы строковых литералов с синтаксисом шаблонных литералов, чтобы выводить типы для названий событий, строк свойств CSS и путей маршрутов API

«Типы шаблонных литералов» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое типы шаблонных литералов

TypeScript может создавать строковые типы из шаблонных литералов на уровне типов. В сочетании с типами-объединениями они позволяют описывать тысячи допустимых строк, не перечисляя каждую из них.

Базовый тип шаблонного литерала

Используйте строки в обратных кавычках в позиции типа — они принимают другие типы в качестве подстановок.

type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!';  // OK
const b: Greeting = 'Hi, Alice!';     // Error

Объединение типов

Если подставить тип-объединение, TypeScript создаст декартово произведение всех комбинаций.

type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';

type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)

Вывод названий событий

Выводите имена обработчиков из названий событий — это классический пример практического применения.

type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'

type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }

Вспомогательные типы для работы со строками

TypeScript предоставляет встроенные помощники: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.

type Hi = Capitalize<'hello'>;    // 'Hello'
type Yell = Uppercase<'hello'>;   // 'HELLO'
type Quiet = Lowercase<'HELLO'>;  // 'hello'
type Lower = Uncapitalize<'Hi'>;  // 'hi'

Типы свойств CSS

Описывайте строковые типы в стиле CSS: значения в пикселях, цвета в шестнадцатеричном формате и проценты.

type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;

type Style = { padding: Px; color: Hex; width: Pct };

const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // Error

Вывод типов с помощью шаблонных литералов

Ключевое слово infer может извлекать части строкового типа — это полезно для анализаторов и типов маршрутов.

type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;

type Result = ExtractName<'Hello, Alice!'>;  // 'Alice'

Типы маршрутов API

Типобезопасные маршруты API: извлекайте параметры пути из строкового шаблона.

type PathParams<T extends string> =
  T extends `${string}/:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
    : T extends `${string}/:${infer Param}`
    ? { [K in Param]: string }
    : {};

type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }

Типы подсказок классов Tailwind

Ограничивайте строковые свойства известными значениями дизайн-системы.

type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'

function Box(props: { className: TwSpacing }) { /* ... */ }

Ограничения и производительность компилятора

Декартовы произведения шаблонных литералов могут быстро разрастаться: объединение 50 × 50 даёт 2500 строк. TypeScript выполнит компиляцию, но вывод типов станет медленным. Используйте небольшой набор вариантов.

Различение строковых литеральных типов

Используйте шаблонные литералы как более выразительную форму маркировки: это по-прежнему строка, но с ограничениями.

Быстрая проверка

Какое значение принимает type X = `on${Capitalize<'click' | 'focus'>}`?

Итоги: типы шаблонных литералов

Создавайте строковые типы из шаблонных литералов с подставляемыми объединениями. Декартовы произведения быстро разрастаются, поэтому используйте небольшой набор вариантов. Применяйте Capitalize/Uppercase/Lowercase/Uncapitalize. Сочетайте их с infer для извлечения частей строк. Это особенно полезно для названий событий, значений CSS, параметров маршрутов и имён классов дизайн-системы.

Часто задаваемые вопросы

Урок «Типы шаблонных литералов» бесплатный?

Да — полный текст урока «Типы шаблонных литералов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Типы шаблонных литералов»?

Объединяйте типы строковых литералов с синтаксисом шаблонных литералов, чтобы выводить типы для названий событий, строк свойств CSS и путей маршрутов API Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Типы шаблонных литералов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy