TypeScript Academy · レッスン

イベントマップの型付け

Q: 「イベントマップの型付け」で何を学びますか？

イベント名を対応するペイロード型にマッピングします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

イベント名を対応するペイロード型にマッピングします。

「イベントマップの型付け」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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);

より豊富なイベントマップ

実際のアプリには多くのイベントがあります。それぞれの明確なペイロードの契約を1か所に記述することで、プロデューサーとコンシューマーは常に合意した形を使えます。

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);

ペイロードにユニオンを使える

ペイロード型自体を判別可能なユニオンにすることもできます。これにより、1つのイベントで関連する複数の形を扱えます。

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);

唯一の信頼できる情報源

すべてがイベントマップから導出されるため、1か所でペイロードを変更すると、それを使うすべての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時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「イベントマップの型付け」で何を学びますか？

イベント名を対応するペイロード型にマッピングします。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「イベントマップの型付け」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る