0Pricing
TypeScript Academy · Урок

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

Объединяйте строковые объединения в типы-шаблоны

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

Добро пожаловать

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

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

Объединяйте строковые литеральные типы с синтаксисом шаблонов.
type Greeting = `Hello, ${string}`;
const g: Greeting = 'Hello, World'; // OK
// const bad: Greeting = 'Hi there'; // Error

Объединение вариантов

Когда объединение используется в шаблонном литерале, TypeScript создаёт все комбинации.
type Color = 'red' | 'green' | 'blue';
type Size = 'sm' | 'lg';
type ColorSize = `${Color}-${Size}`;
// 'red-sm' | 'red-lg' | 'green-sm' | ...

Шаблон имён событий

Распространённый вариант использования — создание типизированных имён событий на основе сущностей.
type Entity = 'user' | 'product';
type EventName = `on${Capitalize<Entity>}Created`;
// 'onUserCreated' | 'onProductCreated'

Capitalize и другие встроенные типы

TypeScript предоставляет Capitalize, Uncapitalize, Uppercase и Lowercase как встроенные типы для работы со строками.
type T = Capitalize<'hello world'>; // 'Hello world'
type U = Uppercase<'hello'>;        // 'HELLO'
type L = Lowercase<'WORLD'>;        // 'world'

Шаблон создания методов-геттеров

Используйте типы шаблонных литералов вместе с отображаемыми типами, чтобы создавать имена методов-геттеров.
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

Типизированные параметры маршрутов

Извлекайте типизированные параметры маршрута из строкового шаблона 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;

Именование свойств CSS

Создавайте типизированные имена пользовательских свойств CSS.
type CSSVar = `--${string}`;
const color: CSSVar = '--primary-color'; // OK

Шаблонный литерал в параметрах функции

Используйте типы шаблонных литералов, чтобы ограничивать строковые параметры.
function emit<E extends `on${string}`>(event: E): void {
  console.log('Emitting:', event);
}
emit('onClick'); // OK
// emit('click'); // Error — must start with 'on'

Извлечение частей с помощью infer

Используйте infer внутри шаблонных литералов, чтобы извлекать подстроки на уровне типов.
type GetSuffix<T extends string> =
  T extends `${infer _Prefix}_${infer Suffix}` ? Suffix : never;
type S = GetSuffix<'user_created'>; // 'created'

Пересечение с Record

Объединяйте типы шаблонных литералов с Record для создания типизированных отображений обработчиков событий.
type Handlers<T extends string> = Record<`on${Capitalize<T>}`, () => void>;

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

Во что вычисляется `type R = `${string | number}-id``?

Итоги

Типы шаблонных литералов создают строковые типы из комбинаций с помощью синтаксиса обратных кавычек. Они распределяются по объединениям, работают с помощниками Capitalize и Uppercase и позволяют реализовывать мощные шаблоны для имён событий, параметров маршрутов и переменных CSS.

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

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

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

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

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

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

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

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

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

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

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

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

  1. Отображаемые типы: преобразование типов объектов
  2. Модификаторы в отображаемых типах: readonly и ?
  3. Типы шаблонных литералов: шаблоны строк
  4. Переименование ключей с помощью as в отображаемых типах
← Назад к TypeScript Academy