TypeScriptでクラスまたはインターフェイスにカスタムイベントを定義できるかどうか疑問に思っていますか?
これはどのように見えますか?
プロパティとして使用されるこの簡略化されたイベントはどうですか?所有クラスのより強力なタイピングと継承要件なし:
interface ILiteEvent<T> {
on(handler: { (data?: T): void }) : void;
off(handler: { (data?: T): void }) : void;
}
class LiteEvent<T> implements ILiteEvent<T> {
private handlers: { (data?: T): void; }[] = [];
public on(handler: { (data?: T): void }) : void {
this.handlers.push(handler);
}
public off(handler: { (data?: T): void }) : void {
this.handlers = this.handlers.filter(h => h !== handler);
}
public trigger(data?: T) {
this.handlers.slice(0).forEach(h => h(data));
}
public expose() : ILiteEvent<T> {
return this;
}
}
そのように使用されます:
class Security{
private readonly onLogin = new LiteEvent<string>();
private readonly onLogout = new LiteEvent<void>();
public get LoggedIn() { return this.onLogin.expose(); }
public get LoggedOut() { return this.onLogout.expose(); }
// ... onLogin.trigger('bob');
}
function Init() {
var security = new Security();
var loggedOut = () => { /* ... */ }
security.LoggedIn.on((username?) => { /* ... */ });
security.LoggedOut.on(loggedOut);
// ...
security.LoggedOut.off(loggedOut);
}
改善?
TypeScript用のNPMパッケージの強い型付きイベント(GitHubIEvent<TSender, TArgs>
)は、、、ISimpleEvent<TArgs>
およびの3種類のイベントを実装しISignal
ます。これにより、プロジェクトに適切な種類のイベントを簡単に使用できるようになります。また、適切な情報隠蔽が行うように、ディスパッチメソッドをイベントから隠します。
イベントタイプ/インターフェース-イベントの定義:
interface IEventHandler<TSender, TArgs> {
(sender: TSender, args: TArgs): void
}
interface ISimpleEventHandler<TArgs> {
(args: TArgs): void
}
interface ISignalHandler {
(): void;
}
例-この例は、時を刻む時計を使用して3種類のイベントを実装する方法を示しています。
class Clock {
//implement events as private dispatchers:
private _onTick = new SignalDispatcher();
private _onSequenceTick = new SimpleEventDispatcher<number>();
private _onClockTick = new EventDispatcher<Clock, number>();
private _ticks: number = 0;
constructor(public name: string, timeout: number) {
window.setInterval( () => {
this.Tick();
}, timeout);
}
private Tick(): void {
this._ticks += 1;
//trigger event by calling the dispatch method and provide data
this._onTick.dispatch();
this._onSequenceTick.dispatch(this._ticks);
this._onClockTick.dispatch(this, this._ticks);
}
//expose the events through the interfaces - use the asEvent
//method to prevent exposure of the dispatch method:
public get onTick(): ISignal {
return this._onTick.asEvent();
}
public get onSequenceTick() : ISimpleEvent<number>{
return this._onSequenceTick.asEvent();
}
public get onClockTick(): IEvent<Clock, number> {
return this._onClockTick.asEvent();
}
}
使用法-次のように使用できます。
let clock = new Clock('Smu', 1000);
//log the ticks to the console
clock.onTick.subscribe(()=> console.log('Tick!'));
//log the sequence parameter to the console
clock.onSequenceTick.subscribe((s) => console.log(`Sequence: ${s}`));
//log the name of the clock and the tick argument to the console
clock.onClockTick.subscribe((c, n) => console.log(`${c.name} ticked ${n} times.`))
詳細はこちら:イベント、ディスパッチャ、リスト(システムの一般的な説明)
チュートリアル
私はこのテーマについていくつかのチュートリアルを書きました:
クラスインスタンスがDOM要素のようにaddEventListener()とdispatchEvent()を実装できるかどうかを尋ねていると思います。クラスがDOMノードでない場合は、独自のイベントバスを作成する必要があります。イベントを公開できるクラスのインターフェースを定義してから、クラスにインターフェースを実装します。これは素朴な例です。
interface IEventDispatcher{
// maintain a list of listeners
addEventListener(theEvent:string, theHandler:any);
// remove a listener
removeEventListener(theEvent:string, theHandler:any);
// remove all listeners
removeAllListeners(theEvent:string);
// dispatch event to all listeners
dispatchAll(theEvent:string);
// send event to a handler
dispatchEvent(theEvent:string, theHandler:any);
}
class EventDispatcher implement IEventDispatcher {
private _eventHandlers = {};
// maintain a list of listeners
public addEventListener(theEvent:string, theHandler:any) {
this._eventHandlers[theEvent] = this._eventHandlers[theEvent] || [];
this._eventHandlers[theEvent].push(theHandler);
}
// remove a listener
removeEventListener(theEvent:string, theHandler:any) {
// TODO
}
// remove all listeners
removeAllListeners(theEvent:string) {
// TODO
}
// dispatch event to all listeners
dispatchAll(theEvent:string) {
var theHandlers = this._eventHandlers[theEvent];
if(theHandlers) {
for(var i = 0; i < theHandlers.length; i += 1) {
dispatchEvent(theEvent, theHandlers[i]);
}
}
}
// send event to a handler
dispatchEvent(theEvent:string, theHandler:any) {
theHandler(theEvent);
}
}
TypeScriptでカスタムイベントを使用できます。あなたが何をしようとしているのか正確にはわかりませんが、ここに例があります:
module Example {
export class ClassWithEvents {
public div: HTMLElement;
constructor (id: string) {
this.div = document.getElementById(id);
// Create the event
var evt = document.createEvent('Event');
evt.initEvent('customevent', true, true);
// Create a listener for the event
var listener = function (e: Event) {
var element = <HTMLElement> e.target;
element.innerHTML = 'hello';
}
// Attach the listener to the event
this.div.addEventListener('customevent', listener);
// Trigger the event
this.div.dispatchEvent(evt);
}
}
}
より具体的なことをしたい場合は、私に知らせてください。
標準のエミッターパターンを使用してインテリセンスタイプチェックを取得する場合は、次の操作を実行できます。
type DataEventType = "data";
type ErrorEventType = "error";
declare interface IDataStore<TResponse> extends Emitter {
on(name: DataEventType, handler : (data: TResponse) => void);
on(name: ErrorEventType, handler: (error: any) => void);
}
このソリューションでは、すべてのパラメーターをオブジェクトにラップする必要はなく、関数呼び出しでパラメーターを直接書き込むことができます。
interface ISubscription {
(...args: any[]): void;
}
class PubSub<T extends ISubscription> {
protected _subscribed : ISubscriptionItem[] = [];
protected findSubscription(event : T) : ISubscriptionItem {
this._subscribed.forEach( (item : ISubscriptionItem) =>{
if (item.func==event)
return item;
} );
return null;
}
public sub(applyObject : any,event : T) {
var newItem = this.findSubscription(event);
if (!newItem) {
newItem = {object : applyObject, func : event };
this._subscribed.push(newItem);
this.doChangedEvent();
}
}
public unsub(event : T) {
for ( var i=this._subscribed.length-1 ; i>=0; i--) {
if (this._subscribed[i].func==event)
this._subscribed.splice(i,1);
}
this.doChangedEvent();
}
protected doPub(...args: any[]) {
this._subscribed.forEach((item : ISubscriptionItem)=> {
item.func.apply(item.object, args);
})
}
public get pub() : T {
var pubsub=this;
var func= (...args: any[]) => {
pubsub.doPub(args);
}
return <T>func;
}
public get pubAsync() : T {
var pubsub=this;
var func = (...args: any[]) => {
setTimeout( () => {
pubsub.doPub(args);
});
}
return <T>func;
}
public get count() : number {
return this._subscribed.length
}
}
使用法:
interface ITestEvent {
(test : string): void;
}
var onTestEvent = new PubSub<ITestEvent>();
//subscribe to the event
onTestEvent.sub(monitor,(test : string) => {alert("called:"+test)});
//call the event
onTestEvent.pub("test1");
サブイベントを使用して、カスタムタイプのイベントをクラスに追加する簡単な例を次に示します。
class MyClass {
readonly onMessage: SubEvent<string> = new SubEvent();
readonly onData: SubEvent<MyCustomType> = new SubEvent();
sendMessage(msg: string) {
this.onMessage.emit(msg);
}
sendData(data: MyCustomType) {
this.onData.emit(data);
}
}
そして、どのクライアントもこれらのイベントを受信するためにサブスクライブできます。
const a = new MyClass();
const sub1 = a.onMessage.subscribe(msg => {
// msg here is strongly-typed
});
const sub2 = a.onData.subscribe(data => {
// data here is strongly-typed
});
また、イベントが不要になったら、サブスクリプションをキャンセルできます。
sub1.cancel();
sub2.cancel();
これを実現するためにrxjsを使用できます。
クラスでフォローを宣言します。
export class MyClass {
private _eventSubject = new Subject();
public events = this._eventSubject.asObservable();
public dispatchEvent(data: any) {
this._eventSubject.next(data);
}
}
そして、次の方法でイベントをトリガーできます。
let myClassInstance = new MyClass();
myClassInstance.dispatchEvent(data);
そして、次の方法でこのイベントを聞いてください。
myClassInstance.events.subscribe((data: any) => { yourCallback(); });
イベントディスパッチャ宣言はYouTubeで見つけることができます。ビデオに続いて、イベントディスパッチャーの完全に入力されたバージョンを持つことができます