TypeScript Academy · Урок

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

Получайте автодополнение в редакторе для известных строковых значений

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

Объединения управляют автодополнением

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

Базовое объединение строковых литералов

Объявите объединение разрешённых строк. Редактор предложит именно эти варианты, а недопустимые значения станут ошибками компиляции.

type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Error

Автодополнение в редакторе

Если параметр имеет тип объединения строковых литералов, при вводе в вызове появляются именно его элементы. Это одна из наиболее ценимых возможностей TypeScript.

type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue

Ограничение

Строгое объединение запрещает любое значение, отсутствующее в списке. Иногда нужно предлагать распространённые значения, но при этом разрешать произвольные пользовательские строки — обычное объединение не умеет делать и то и другое.

type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))

Расширение типа лишает подсказок

Если просто использовать string, подойдёт любое значение, но автодополнение полностью исчезнет. Вы обменяете все подсказки на полную гибкость, что не всегда удобно.

function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestions

Приём с string и объединением литералов

Приём заключается в объединении литералов с string & {}. Литералы по-прежнему появляются в автодополнении, а string & {} разрешает любую другую строку, не сворачивая объединение.

type Color = "red" | "green" | (string & {})
const a: Color = "red"        // suggested
const b: Color = "#ff8800"    // also allowed
console.log(a, b)

Почему работают string и пустой объект

Обычно 'red' | string упрощается просто до string, стирая литералы. Пересечение с {} создаёт немного другой тип, который TypeScript сохраняет отдельно. Поэтому литералы остаются доступными для автодополнения, а любая строка по-прежнему подходит.

type A = "red" | string          // collapses to string — no hints
type B = "red" | (string & {})   // keeps "red" as a suggestion
const x: B = "red"
console.log(x)

Повторно используемый помощник

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

type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)

Применение к функции

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

type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home"))     // suggested
console.log(setIcon("my-icon")) // allowed

Когда использовать этот приём

Используйте его, когда программный интерфейс должен оставаться открытым, но имеет известные значения: имена значков, единицы CSS, токены theme и предустановки платформы. Для закрытых наборов предпочитайте строгое объединение, обеспечивающее полную безопасность типов.

type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)

Компромиссы

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

type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)

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

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

Итоги

Объединения строковых литералов обеспечивают автодополнение в редакторе и ограничивают значения, но строгое объединение запрещает пользовательские строки, а обычный string лишает всех подсказок. Приём T | (string & {}) сохраняет литералы в качестве подсказок и одновременно принимает любую строку. Оформите его как помощник LiteralUnion<T> и используйте только там, где открытость предусмотрена намеренно: этот приём жертвует защитой от опечаток.

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

Урок «Строковые объединения и автодополнение» бесплатный?

Да — полный текст урока «Строковые объединения и автодополнение» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 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 — локальная установка не требуется.

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

← Назад к TypeScript Academy