型安全なemitとon
イベントの発行時とリスニング時に、正しいペイロードを強制します。
「型安全なemitとon」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
型安全なemitのシグネチャ
emitをイベント名Kに対してジェネリックにします。するとペイロードのパラメーターはEvents[K]になり、名前とペイロードの一致が必須になります。
interface Events { login: { userId: string }; logout: void }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {
console.log("emit", event, JSON.stringify(payload));
}
emit("login", { userId: "u1" });誤ったペイロードはコンパイルエラーになる
ペイロードがイベント名と一致しない場合、TypeScriptは拒否します。このジェネリックによって、2つのパラメーターが関連付けられます。
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("login", { id: "u1" }); // Error: id is not userId
emit("login", { userId: "u1" });
console.log("ok");不明なイベント名は拒否される
K extends keyof Eventsであるため、マップにないイベントをemitすることはできません。
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("signup", { userId: "x" }); // Error: "signup" not a key
emit("login", { userId: "x" });
console.log("only known events");onで型付けされたハンドラーを使う
onメソッドは、引数が正確にEvents[K]となるハンドラーを登録します。そのため、ハンドラーは正しく型付けされたペイロードを受け取ります。
interface Events { login: { userId: string }; logout: void }
function on<K extends keyof Events>(event: K, handler: (payload: Events[K]) => void) {
console.log("subscribed to", event);
}
on("login", (p) => console.log(p.userId));ハンドラーの引数は推論される
ハンドラーパラメーターに型注釈を付ける必要はありません。TypeScriptがイベント名から型を推論するため、ハンドラー本体で完全なオートコンプリートを利用できます。
interface Events { message: { text: string } }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("message", (p) => {
// p is { text: string }
console.log(p.text.toUpperCase());
});ペイロードのないイベントを扱う
voidイベントでは、ハンドラーは実質的に引数を受け取りません。データなしでそのハンドラーを呼び出せます。
interface Events { logout: void }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("logout", () => console.log("logged out"));emitとonを組み合わせる
emitとonを組み合わせると、型付けされたpub/subになります。イベントをemitすると、正しく型付けされたペイロードがハンドラーに届けられます。
interface Events { ping: { at: number } }
type Handler<K extends keyof Events> = (p: Events[K]) => void;
const handlers: { ping: Handler<"ping">[] } = { ping: [] };
function on<K extends keyof Events>(e: K, h: Handler<K>) { handlers[e].push(h as Handler<"ping">); }
function emit<K extends keyof Events>(e: K, p: Events[K]) { handlers[e].forEach(h => h(p as Events["ping"])); }
on("ping", p => console.log("at", p.at));
emit("ping", { at: 5 });ペイロードの位置を制約する
ジェネリックによって、ペイロードの引数が選択したイベントに対して検査されます。そのため、不一致をハンドラーの奥深くではなく、呼び出し箇所で検出できます。
interface Events { add: { x: number; y: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) {
return e;
}
emit("add", { x: 1, y: 2 });
// emit("add", { x: 1 }); // Error: y missing
console.log("payload checked");イベント名のオートコンプリート
最初のパラメーターがkeyof Eventsであるため、呼び出しを入力すると、エディターが有効なイベント名をオートコンプリートします。
interface Events { open: void; close: void }
function emit<K extends keyof Events>(e: K, p: Events[K]) {}
// Typing emit(" suggests "open" and "close"
emit("open", undefined as void);
console.log("autocompleted names");ここでジェネリックが不可欠な理由
ジェネリックがなければ、すべてのイベントに対してオーバーロードが必要になります。1つのジェネリックなシグネチャで、イベント数に関係なく自動的に対応できます。
interface Events { a: { x: number }; b: { y: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return p; }
console.log(emit("a", { x: 1 }), emit("b", { y: "hi" }));再利用可能なパターン
このemit<K>(event, payload)とon<K>(event, handler)のパターンは、すべての型安全なエミッターの中核です。次はこれをクラスにまとめます。
interface Events { tick: { n: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
function on<K extends keyof Events>(e: K, h: (p: Events[K]) => void) { return e; }
console.log(emit("tick", { n: 1 }), on("tick", p => p.n));クイックチェック：型付けされたemitとon
型安全なemitとonについて理解度を確認します。
まとめ：型安全なemitとon
ペイロードをEvents[K]とするジェネリックなemitとonのシグネチャを作成しました。これにより、イベント名がオートコンプリートされ、誤ったペイロードがコンパイルエラーになり、ハンドラーの引数が推論されます。
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
console.log(emit("login", { userId: "u1" }));よくある質問
「型安全なemitとon」レッスンは無料ですか？
はい。「型安全なemitとon」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型安全なemitとon」で何を学びますか？
イベントの発行時とリスニング時に、正しいペイロードを強制します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「型安全なemitとon」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- イベントマップの型付け
- 型安全なemitとon
- ジェネリックイベントエミッタークラス
- リスナー引数の推論