TypeScript Academy · Урок

Типизация карт событий

Сопоставляйте имена событий с типами их данных

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

Что такое карта событий

Карта событий — это интерфейс, который связывает имя каждого события с формой его полезной нагрузки. Это единственный источник истины для системы событий.

interface Events {
  login: { userId: string };
  logout: void;
}
// "login" carries a payload; "logout" carries none.

Сопоставление имён с полезными нагрузками

Каждый ключ свойства — это имя события, а его тип значения — полезная нагрузка. Благодаря этому система типов точно знает, какие данные ожидает каждое событие.

interface Events {
  message: { text: string; from: string };
  typing: { userId: string };
}
const sample: Events["message"] = { text: "hi", from: "ada" };
console.log(sample.text, sample.from);

События без полезной нагрузки

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

interface Events {
  open: void;
  close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");

Извлечение типа имени события

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

interface Events {
  login: { userId: string };
  logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);

Получение типа полезной нагрузки

Проиндексируйте карту именем события, чтобы получить тип полезной нагрузки этого события: Events["login"] имеет тип { userId: string }.

interface Events {
  login: { userId: string };
  logout: void;
}
type LoginPayload = Events["login"]; // { userId: string }
const p: LoginPayload = { userId: "u1" };
console.log(p.userId);

Более содержательная карта событий

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

interface Events {
  cartAdd: { productId: string; qty: number };
  cartRemove: { productId: string };
  checkout: { total: number };
}
const a: Events["cartAdd"] = { productId: "p1", qty: 2 };
console.log(a.productId, a.qty);

Полезные нагрузки могут быть объединениями

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

interface Events {
  status:
    | { kind: "online" }
    | { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);

Повторное использование типов полезных нагрузок

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

type User = { id: string; name: string };
interface Events {
  userCreated: User;
  userDeleted: { id: string };
}
const u: Events["userCreated"] = { id: "1", name: "Ada" };
console.log(u.name);

Почему карта лучше отдельных строк

Без карты имена событий являются простыми строками, а полезные нагрузки имеют тип any. Карта обеспечивает автодополнение, проверку и контракт.

// Loose: emit("login", { usrId: "x" }) typo unnoticed, payload any
// Mapped: the interface forces the correct name and payload shape.
console.log("the map is the contract");

Карта определяет API

В следующих уроках emit и on будут обобщёнными относительно карты событий и будут использовать keyof и доступ по индексу для сохранения типобезопасности.

interface Events {
  login: { userId: string };
  logout: void;
}
type Name = keyof Events;
type PayloadOf<K extends Name> = Events[K];
const id: PayloadOf<"login"> = { userId: "u" };
console.log(id.userId);

Единственный источник истины

Поскольку всё строится на основе карты событий, изменение полезной нагрузки в одном месте обновляет каждый вызов emit и обработчик, который её использует.

interface Events {
  ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);

Быстрая проверка: карты событий

Проверьте своё понимание типизации карт событий.

Итоги: типизация карт событий

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

interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);

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

Урок «Типизация карт событий» бесплатный?

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