标签：cocos creator super void T2 教程 callback type any

【muzzik 教程】：框架 - 事件

相信大多数人经常用到事件，那么我们真正需要的其实是什么呢？简单，安全 有这两个就够了

简单

为什么简单，因为我们直接继承了 cc.EventTarget，这是我们 cocos 开发者接触最多的事件类型了

安全

直接上图更有说服力

1. 具有事件键提示及注释
   

2. 事件参数注释
   

3. 类型安全
   

两种实现方式

单参数事件

顾名思义，事件只有一个参数，多参数则包含在一个对象内，这样的好处是有参数注释提示

import * as cc from "cc";

class event<T> extends cc.EventTarget {
	key: { [key in keyof T]: key } = new Proxy(Object.create(null), {
		get: (target, key) => key,
	});

	// @ts-ignore
	on<T2 extends keyof T, T3 extends (event: T[T2]) => void>(
		type_: T2 | T2[],
		callback_: T3,
		this_?: any,
		once_b_?: boolean
	): typeof callback_ | null {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.on(v as any, callback_, this_, once_b_);
			});
			return null;
		} else {
			return super.on(type_ as any, callback_, this_, once_b_);
		}
	}

	// @ts-ignore
	once<T2 extends keyof T, T3 extends (event: T[T2]) => void>(type_: T2 | T2[], callback_: T3, this_?: any): typeof callback_ | null {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.once(v as any, callback_, this_);
			});
			return null;
		} else {
			return super.once(type_ as any, callback_, this_);
		}
	}

	// @ts-ignore
	off<T2 extends keyof T, T3 extends (event: T[T2]) => void>(type_: T2 | T2[], callback_?: T3, this_?: any): void {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.off(v as any, callback_, this_);
			});
		} else {
			super.off(type_ as any, callback_, this_);
		}
	}

	// @ts-ignore
	emit<T2 extends keyof T, T3 extends T[T2]>(type_: T2 | T2[], args_: T3): void {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.emit(v as any, args_);
			});
		} else {
			super.emit(type_ as any, args_);
		}
	}

	// @ts-ignore
	hasEventListener<T2 extends keyof T, T3 extends (event: T[T2]) => void>(type_: T2, callback_?: T3, target_?: any): boolean {
		return super.hasEventListener(type_ as any, callback_, target_);
	}

	clear(): void {
		return super["clear"]();
	}
}

export default event;

使用方式

多参数事件

可以存在多个参数，但是非对象类型的参数没有注释提示

import * as cc from "cc";

class event<T> extends cc.EventTarget {
	key: { [key in keyof T]: key } = new Proxy(Object.create(null), {
		get: (target, key) => key,
	});

	// @ts-ignore
	on<T2 extends keyof T, T3 extends (...event_: Parameters<T[T2]>) => void>(
		type_: T2 | T2[],
		callback_: T3,
		this_?: any,
		once_b_?: boolean
	): typeof callback_ | null {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.on(v as any, callback_ as any, this_, once_b_);
			});
			return null;
		} else {
			return super.on(type_ as any, callback_ as any, this_, once_b_);
		}
	}

	// @ts-ignore
	once<T2 extends keyof T, T3 extends (...event_: Parameters<T[T2]>) => void>(
		type_: T2 | T2[],
		callback_: T3,
		this_?: any
	): typeof callback_ | null {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.once(v as any, callback_ as any, this_);
			});
			return null;
		} else {
			return super.once(type_ as any, callback_ as any, this_);
		}
	}

	// @ts-ignore
	off<T2 extends keyof T, T3 extends (...event_: Parameters<T[T2]>) => void>(type_: T2 | T2[], callback_?: T3, this_?: any): void {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.off(v as any, callback_ as any, this_);
			});
		} else {
			super.off(type_ as any, callback_ as any, this_);
		}
	}

	// @ts-ignore
	emit<T2 extends keyof T, T3 extends Parameters<T[T2]>>(type_: T2 | T2[], ...args_: T3): void {
		if (Array.isArray(type_)) {
			type_.forEach((v) => {
				super.emit(v as any, ...args_);
			});
		} else {
			super.emit(type_ as any, ...args_);
		}
	}

	// @ts-ignore
	hasEventListener<T2 extends keyof T, T3 extends (...event_: Parameters<T[T2]>) => void>(type_: T2, callback_?: T3, target_?: any): boolean {
		return super.hasEventListener(type_ as any, callback_ as any, target_);
	}

	clear(): void {
		return super["clear"]();
	}
}

export default event;

使用方式

---

以上两种都是类型安全的，但是我更喜欢使用第一种，因为可以看到参数注释

标签：cocos,creator,super,void,T2,教程,callback,type,any
From： https://www.cnblogs.com/muzzik/p/17044999.html