emit dan on yang Aman Secara Jenis
Pastikan muatan yang benar saat memancarkan dan mendengarkan peristiwa.
emit dan on yang Aman Secara Jenis adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.
Deklarasi emit yang Aman Tipe
Buat emit menjadi generik berdasarkan nama peristiwa K. Parameter muatan kemudian menjadi Events[K], sehingga nama dan muatan harus cocok.
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" });Muatan yang Salah Menjadi Kesalahan Kompilasi
Jika muatan tidak cocok dengan nama peristiwa, TypeScript akan menolaknya. Tipe generik menghubungkan kedua parameter tersebut.
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");Nama Peristiwa yang Tidak Dikenal Ditolak
Karena K extends keyof Events, Anda tidak dapat menerbitkan peristiwa yang tidak ada dalam pemetaan.
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");Penangan Bertipe dengan Pendaftaran
Metode on mendaftarkan penangan yang argumennya tepat berupa Events[K], sehingga penangan menerima muatan dengan tipe yang benar.
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));Argumen Penangan Disimpulkan
Anda tidak perlu memberi anotasi pada parameter penangan; TypeScript menyimpulkannya dari nama peristiwa, sehingga pelengkapan otomatis tersedia sepenuhnya di dalam isi penangan.
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());
});Menangani Peristiwa Tanpa Muatan
Untuk peristiwa void, penangan cukup tidak menggunakan argumen yang berarti. Anda dapat memanggil penangannya tanpa data.
interface Events { logout: void }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("logout", () => console.log("logged out"));Menggabungkan emit dan Pendaftaran
Bersama-sama, emit dan on membentuk pub/sub bertipe. Menerbitkan suatu peristiwa akan mengirimkan muatan bertipe tepat kepada penangannya.
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 });Membatasi Posisi Muatan
Tipe generik memastikan argumen muatan diperiksa terhadap peristiwa yang dipilih, sehingga ketidakcocokan terdeteksi di lokasi pemanggilan, bukan jauh di dalam penangan.
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");Pelengkapan Otomatis untuk Nama Peristiwa
Karena parameter pertama adalah keyof Events, editor melengkapi nama peristiwa yang valid secara otomatis saat Anda mengetik pemanggilan.
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");Mengapa Tipe Generik Penting di Sini
Tanpa tipe generik, Anda harus membuat kelebihan beban untuk setiap peristiwa. Satu deklarasi generik dapat menangani jumlah peristiwa berapa pun secara otomatis.
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" }));Pola yang Dapat Digunakan Kembali
Pola emit<K>(event, payload) dan on<K>(event, handler) ini merupakan inti setiap pemancar yang aman tipe, yang akan kita kemas ke dalam sebuah kelas berikutnya.
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));Pemeriksaan Singkat: emit dan Pendaftaran Bertipe
Uji pemahaman Anda tentang emit dan pendaftaran yang aman tipe.
Ringkasan: emit dan Pendaftaran yang Aman Tipe
Anda membuat deklarasi generik emit dan on dengan muatan berupa Events[K], sehingga nama peristiwa dilengkapi otomatis, muatan yang salah menjadi kesalahan kompilasi, dan argumen penangan disimpulkan.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
console.log(emit("login", { userId: "u1" }));Pertanyaan yang Sering Diajukan
Apakah pelajaran “emit dan on yang Aman Secara Jenis” gratis?
Ya — teks lengkap “emit dan on yang Aman Secara Jenis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “emit dan on yang Aman Secara Jenis”?
Pastikan muatan yang benar saat memancarkan dan mendengarkan peristiwa. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “emit dan on yang Aman Secara Jenis” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menentukan Jenis Peta Peristiwa
- emit dan on yang Aman Secara Jenis
- Kelas Pemancar Peristiwa Generik
- Menyimpulkan Argumen Pendengar