TypeScript Academy · Урок

Основы шаблонных литеральных типов

Создавайте строковые типы из объединений и заполнителей

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

Строки на уровне типов

Шаблонные литеральные типы создают новые строковые литеральные типы, объединяя другие строковые типы. Они используют тот же синтаксис с обратными кавычками и заполнителями, что и шаблонные строки времени выполнения, но работают исключительно на уровне типов.

Простой шаблонный литеральный тип

Представьте псевдоним типа Greeting, определённый как шаблонный литерал, содержащий текст Hello, и следующий за ним заполнитель для типа Name. Если Name — это литерал 'Ada', то Greeting будет литеральным типом 'Hello, Ada'.

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

Заполнители встраивают другие типы

Внутри заполнителя можно указать любой строкоподобный тип: литерал, параметр типа или объединение. TypeScript подставляет его в окружающий текст, формируя новый литеральный тип.

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

Объединение типов умножает варианты

Если заполнитель содержит объединение, шаблон разворачивается по каждому его элементу. Шаблон, объединяющий 'a' | 'b' с фиксированным суффиксом, создаёт объединение всех комбинаций.

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

Несколько заполнителей перемножаются

Два заполнителя-объединения образуют декартово произведение. Объединение sizes 'sm' | 'lg' с colors 'red' | 'blue' через разделитель даёт четыре литеральных типа.

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

Зачем это нужно

Шаблонные литеральные типы позволяют точно описывать семейства строк — имена классов CSS, имена событий и пути маршрутов, — чтобы компилятор отклонял неправильно сформированные строки ещё до запуска программы.

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

Числа и логические значения преобразуются

Нестрочные типы, помещённые в шаблонный литеральный тип, преобразуются в строковое представление. Числовой литерал 42 становится текстом 42 в результирующем строковом типе.

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

Использование обобщённого заполнителя

Обобщённая функция может сформировать возвращаемый шаблонный литеральный тип из литерального типа своего аргумента, поэтому точная строка известна в месте каждого вызова.

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

Ограничение входных значений

Можно потребовать, чтобы значение соответствовало шаблонному литеральному типу. Принимаются только строки, подходящие под описанный шаблон, поэтому опечатки обнаруживаются на этапе компиляции.

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

Широкий тип string нарушает шаблон

Если заполнитель имеет широкий тип string, а не литеральный тип, весь шаблон сворачивается в string. Для сохранения конкретности нужны литеральные входные значения, часто получаемые с помощью as const.

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

Где их использовать

Шаблонные литеральные типы особенно полезны везде, где строки следуют определённой структуре: в служебных классах CSS, идентификаторах с префиксами, ключах запросов и именах событий. Они превращают соглашения о строках в контракты, проверяемые компилятором.

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

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

Проверьте, насколько хорошо Вы понимаете основы шаблонных литеральных типов.

Итоги

Шаблонные литеральные типы создают строковые литеральные типы, подставляя заполнители в окружающий текст. Заполнители-объединения разворачиваются во все комбинации, а несколько объединений образуют декартово произведение. Нестрочные литералы преобразуются в текстовое представление. Широкий заполнитель string сворачивает результат в string, поэтому для точных типов нужны литеральные входные значения, часто получаемые с помощью as const. Такие типы позволяют проверять соглашения о строках компилятором.

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

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

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

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

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

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

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

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

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

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

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

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

← Назад к TypeScript Academy