TypeScript Academy · Урок

Практические шаблоны satisfies

Применяйте satisfies к объектам конфигурации и таблицам соответствий

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

Проверка цветовой палитры

Распространённый шаблон для палитры — satisfies Record<string, Color>: каждое значение проверяется на соответствие допустимому цвету, а ключи сохраняются в точном виде для автодополнения.

type Color = "red" | "green" | "blue";
const palette = {
  primary: "blue",
  secondary: "green"
} satisfies Record<string, Color>;
console.log(palette.primary);

Обнаружение недопустимых значений палитры

Если значение не соответствует допустимому Color, satisfies сообщает об ошибке, а ключи сохраняются с точными типами.

type Color = "red" | "green" | "blue";
// const bad = { primary: "purple" } satisfies Record<string, Color>; // Error
const ok = { primary: "red" } satisfies Record<string, Color>;
console.log(ok.primary);

Сохранение автодополнения ключей

Поскольку выведенные ключи имеют тип "primary" | "secondary", редактор предлагает их в автодополнении. Обычная аннотация Record привела бы к потере конкретных ключей.

type Color = "red" | "green" | "blue";
const palette = { primary: "red", accent: "blue" } satisfies Record<string, Color>;
// palette.<autocomplete: primary, accent>
console.log(palette.accent);

Проверка карты маршрутов

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

type Route = { method: "GET" | "POST"; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  login: { method: "POST", path: "/login" }
} satisfies Record<string, Route>;
console.log(routes.login.method);

Индексация карты

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

type Route = { method: string; path: string };
const routes = {
  home: { method: "GET", path: "/" },
  about: { method: "GET", path: "/about" }
} satisfies Record<string, Route>;
type RouteName = keyof typeof routes; // "home" | "about"
const pick: RouteName = "about";
console.log(routes[pick].path);

Типизированная конфигурация со смешанными значениями

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

type Setting = number | boolean | string;
const config = {
  retries: 3,
  verbose: true,
  region: "eu"
} satisfies Record<string, Setting>;
console.log(config.retries, config.verbose);

Таблицы поиска, похожие на перечисления

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

type Status = "active" | "inactive";
const userStatus = {
  alice: "active",
  bob: "inactive"
} satisfies Record<string, Status>;
const s: "active" = userStatus.alice;
console.log(s);

Сочетание с as const

Сочетайте as const и satisfies, чтобы получать глубоко неизменяемые проверенные данные: as const делает их неизменяемыми, а satisfies проверяет их.

type Color = "red" | "blue";
const theme = {
  primary: "red",
  secondary: "blue"
} as const satisfies Record<string, Color>;
console.log(theme.primary);

Проверка числовых диапазонов с помощью типов

Можно ограничить значения объединением числовых литералов, чтобы описать фиксированный набор вариантов и проверить его во время определения.

type Level = 1 | 2 | 3;
const levels = {
  easy: 1,
  medium: 2,
  hard: 3
} satisfies Record<string, Level>;
console.log(levels.hard);

Карта функциональных флагов

Практический пример конфигурации функциональных флагов: имена флагов в ключах предлагаются в автодополнении, а значения проверяются как логические с помощью satisfies.

const flags = {
  newDashboard: true,
  betaSearch: false
} satisfies Record<string, boolean>;
type Flag = keyof typeof flags;
const f: Flag = "betaSearch";
console.log(flags[f]);

Почему этот шаблон лучше

Для палитр, маршрутов и флагов конструкция satisfies Record<...> обеспечивает проверенные значения, точные ключи и литералы — это оптимальный повседневный вариант для типизированной конфигурации.

type Color = "red" | "green" | "blue";
const ui = { brand: "green", warn: "red" } satisfies Record<string, Color>;
console.log(Object.keys(ui).join(","));

Быстрая проверка: практическое применение satisfies

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

Итоги: практические шаблоны satisfies

Вы применили satisfies Record<string, Color> к палитрам, картам маршрутов, флагам и таблицам поиска, сохранив точные ключи и литералы для автодополнения и проверив каждое значение.

type Color = "red" | "blue";
const theme = { bg: "blue", fg: "red" } satisfies Record<string, Color>;
console.log(theme.bg, theme.fg);

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

Урок «Практические шаблоны satisfies» бесплатный?

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

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

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

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

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

Сколько времени занимает урок «Практические шаблоны satisfies»?

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

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

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

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

← Назад к TypeScript Academy