programing

TypeScript는 클래스에 대한 이벤트를 지원합니까?

nasanasas 2020. 12. 11. 08:17
반응형

TypeScript는 클래스에 대한 이벤트를 지원합니까?


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);
}

개량?

이것에 대한 요점


타이프 라이터에 대한 강력한 형식의 이벤트 프로젝트 (버전 0.3 :) 구현 이벤트의 3 종류 IEvent<TSender, TArgs>, ISimpleEvent<TArgs>ISignal. 이렇게하면 프로젝트에 적합한 종류의 이벤트를 더 쉽게 사용할 수 있습니다. 또한 좋은 정보 숨김이 수행해야하는 것처럼 이벤트에서 디스패치 메서드를 숨 깁니다.

이벤트 유형 / 인터페이스 - 이벤트 의 정의 :

interface IEventHandler<TSender, TArgs> {
    (sender: TSender, args: TArgs): void
}

interface ISimpleEventHandler<TArgs> {
    (args: TArgs): void
}

interface ISignalHandler {
    (): void;
}

-이 예는 똑딱 거리는 시계를 사용하여 세 가지 유형의 이벤트를 구현하는 방법을 보여줍니다.

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);
        }
    }
}

좀 더 구체적인 작업을 원하시면 알려주세요.


이 솔루션을 사용하면 모든 매개 변수를 객체에 래핑 할 필요없이 함수 호출에서 매개 변수를 직접 작성할 수 있습니다.

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");

표준 이미 터 패턴을 사용하여 인텔리 센스 유형 검사를 얻으려면 이제 다음을 수행 할 수 있습니다.

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);    
}

참고URL : https://stackoverflow.com/questions/12881212/does-typescript-support-events-on-classes

반응형