TypeScript Academy · Урок

Моделирование структурированных строк

Задавайте форматы, например имена событий и пути маршрутов

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

Проверка формата строк

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

Моделирование имён обработчиков событий

Имя обработчика часто состоит из on и имени события с заглавной буквы. Встроенный помощник Capitalize внутри шаблона преобразует событие 'click' в имя обработчика 'onClick'.

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

Зачем здесь нужен Capitalize

Без Capitalize шаблон дал бы результат 'onclick'. Встроенный тип переводит первый символ литерала в верхний регистр, создавая соответствующие соглашениям имена обработчиков в стиле camelCase.

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

Создание карты обработчиков

Объедините ключи шаблонных литералов с отображаемым типом, чтобы создать тип объекта обработчиков — по одной типизированной функции на событие с правильно оформленными именами.

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

Моделирование путей маршрутов

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

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

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

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

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

Проверка форматов на этапе компиляции

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

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

Составление имён переменных CSS

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

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

Разделение с помощью вывода типов

Шаблонные литеральные типы умеют также выполнять разбор: с помощью условных типов и infer можно извлекать части структурированной строки на уровне типов — например, получать метод из строки конечной точки.

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

Практическая польза

Типы структурированных строк выявляют целые классы ошибок: опечатку в имени обработчика, неизвестный маршрут или неправильный токен CSS. Всё это становится ошибками компиляции, а не незаметными сбоями во время выполнения.

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

Сохраняйте их читаемыми

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

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

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

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

Итоги

Шаблонные литеральные типы моделируют структурированные строки — имена обработчиков (on + Capitalize события), пути маршрутов и переменные CSS — и проверяют эти форматы на этапе компиляции. В сочетании с отображаемыми типами они создают карты обработчиков, а вместе с условными типами и infer выполняют разбор строк. Называйте промежуточные псевдонимы, чтобы сложные шаблоны оставались читаемыми.

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

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

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

Чему я научусь в уроке «Моделирование структурированных строк»?

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

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

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

Сколько времени занимает урок «Моделирование структурированных строк»?

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

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

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

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

← Назад к TypeScript Academy