Kelas Pemancar Acara Generik
Bina pemancar acara bertaip yang boleh digunakan semula dari awal.
Kelas Pemancar Acara Generik ialah pelajaran TypeScript Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran TypeScript Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.
Matlamat: Kelas TypedEmitter yang Selamat dari Segi Jenis
Kami akan membina class TypedEmitter<E> yang boleh digunakan semula dan bersifat generik terhadap peta acara E, dengan kaedah on, off dan emit yang ditaip sepenuhnya.
interface Events { login: { userId: string }; logout: void }
// class TypedEmitter<Events> will manage handlers safely.
console.log("building a typed emitter");Alias Jenis Pengendali
Takrifkan jenis pengendali yang diparameterkan mengikut nama acara supaya setiap pendengar menerima muatan yang betul.
type Handler<E, K extends keyof E> = (payload: E[K]) => void;
// E[K] is the payload type for event K in map E.
console.log("handler typed by E[K]");Peta listeners
Simpan pengendali dengan kunci nama acara. Jenis terpetakan memberikan setiap kunci tatasusunan pengendali yang ditaip dengan betul.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
}
console.log("listeners map ready");Melaksanakan Pendaftaran
Kaedah on menambahkan pengendali kepada tatasusunan untuk acaranya, dengan mencipta tatasusunan itu pada penggunaan pertama.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(event: K, handler: (p: E[K]) => void): void {
(this.listeners[event] ||= []).push(handler);
}
}
console.log("on implemented");Melaksanakan emit
Kaedah emit mencari pengendali untuk acara tersebut dan memanggil setiap satunya dengan muatan yang ditaip.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, payload: E[K]): void {
(this.listeners[e] || []).forEach(h => h(payload));
}
}
console.log("emit implemented");Melaksanakan Pembuangan
Kaedah off membuang pengendali yang telah didaftarkan dengan menapisnya keluar daripada tatasusunan.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
off<K extends keyof E>(e: K, h: (p: E[K]) => void) {
this.listeners[e] = (this.listeners[e] || []).filter(x => x !== h);
}
}
console.log("off implemented");Menggabungkan Kelas
Berikut ialah class penuh dengan ketiga-tiga kaedah, bersifat generik terhadap apa-apa peta acara yang Anda berikan.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
off<K extends keyof E>(e: K, h: (p: E[K]) => void) { this.listeners[e] = (this.listeners[e] || []).filter(x => x !== h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
console.log("TypedEmitter complete");Menggunakan TypedEmitter
Bina contoh dengan peta acara khusus. Kini on dan emit ditaip sepenuhnya untuk acara tersebut.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { login: { userId: string } }
const bus = new TypedEmitter<Events>();
bus.on("login", p => console.log("hi", p.userId));
bus.emit("login", { userId: "u1" });Ralat Jenis Dikesan
Class ini menolak acara yang tidak dikenali dan muatan yang salah semasa kompilasi, sama seperti fungsi kendiri sebelum ini.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { ping: { at: number } }
const bus = new TypedEmitter<Events>();
// bus.emit("pong", { at: 1 }); // Error
bus.emit("ping", { at: 1 });
console.log("typed bus");Berbilang Pengendali bagi Setiap Acara
Oleh sebab setiap acara dipetakan kepada tatasusunan, Anda boleh mendaftarkan banyak pengendali dan semuanya dicetuskan apabila emit berlaku.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { tick: { n: number } }
const bus = new TypedEmitter<Events>();
bus.on("tick", p => console.log("a", p.n));
bus.on("tick", p => console.log("b", p.n));
bus.emit("tick", { n: 7 });Asas yang Boleh Anda Kembangkan
Class ini ialah asas yang kukuh. Seterusnya kami akan memperhalus kesimpulan jenis bagi argumen pendengar dan menambahkan semantik once.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
const bus = new TypedEmitter<{ go: void }>();
bus.on("go", () => console.log("go!"));
bus.emit("go", undefined as void);Semakan Pantas: Class Pemancar Generik
Uji pemahaman Anda tentang class pemancar acara generik.
Imbas Kembali: Class Pemancar Acara Generik
Anda membina TypedEmitter<E> dengan stor pendengar terpetakan serta kaedah on, off dan emit yang ditaip sepenuhnya, lalu menyediakan sistem penerbitan/langganan yang boleh digunakan semula dan selamat dari segi jenis untuk apa-apa peta acara.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
const bus = new TypedEmitter<{ hi: { name: string } }>();
bus.on("hi", p => console.log(p.name));
bus.emit("hi", { name: "Ada" });
Pelajari TypeScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 101
- Pelajaran
- 352
Soalan Lazim
Adakah pelajaran “Kelas Pemancar Acara Generik” percuma?
Ya — teks penuh “Kelas Pemancar Acara Generik” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus TypeScript Academy, tingkat taraf kepada CoddyKit PRO. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Kelas Pemancar Acara Generik”?
Bina pemancar acara bertaip yang boleh digunakan semula dari awal. Anda berlatih TypeScript Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan TypeScript Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran TypeScript Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Kelas Pemancar Acara Generik” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mentaip Peta Acara
- emit dan on yang Selamat dari Segi Jenis
- Kelas Pemancar Acara Generik
- Membuat Inferens Argumen Pendengar