web-dev-qa-db-fra.com

TypeScript prend-il en charge les événements sur les classes?

Je me demande simplement si dans TypeScript vous pouvez définir des événements personnalisés sur vos classes ou interfaces?

À quoi cela ressemblerait-il? 

typescript
55
user231300

Que diriez-vous de cet événement simplifié à utiliser comme une propriété? Taper plus fort de la classe propriétaire et aucune exigence d'héritage:

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

utilisé comme tel:

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

Des améliorations?

Un élément essentiel pour cela

94
Jason Kleban

Les événements fortement typés pour TypeScript project (version 0.3 ) implémentent 3 types d'événements: IEvent<TSender, TArgs>, ISimpleEvent<TArgs> et ISignal. Cela facilite l'utilisation du bon type d'événement pour votre projet. Cela masque également la méthode d'envoi de votre événement, comme le ferait une bonne information. 

Types d'événements/Interfaces - Les définitions des événements:

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

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

interface ISignalHandler {
    (): void;
}

Exemple - Cet exemple montre comment implémenter les 3 types d’événements à l’aide d’une horloge:

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

Usage - Il peut être utilisé comme ceci:

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.`))

Lisez plus ici: Sur les événements, les répartiteurs et les listes (une explication générale du système)

Tutoriels
J'ai écrit quelques tutoriels sur le sujet:

11
Kees C. Bakker

Je pense que vous demandez si une instance de classe peut implémenter addEventListener () et dispatchEvent () comme un élément DOM. Si la classe n'est pas un nœud DOM, vous devrez alors écrire votre propre bus d'événements. Vous définiriez une interface pour une classe pouvant publier des événements, puis implémenteriez l'interface dans vos classes. Voici un exemple naïf;

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

Vous pouvez utiliser des événements personnalisés dans TypeScript. Je ne sais pas exactement ce que vous essayez de faire, mais voici un exemple:

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

Si vous souhaitez faire quelque chose de plus spécifique, faites-le moi savoir.

2
Fenton

Si vous souhaitez obtenir une vérification de type intelli-sense en utilisant le modèle d'émetteur standard, vous pouvez maintenant procéder comme suit:

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);    
}
0
Jason Young

Voici l'implémentation la plus élémentaire de l'abonnement d'événement avec TypeScript:

class Subscription {
    private unsub: () => void;

    constructor(unsub: () => void) {
        this.unsub = unsub;
    }

    public unsubscribe(): void {
        if (this.unsub) {
            this.unsub();
            this.unsub = null; // to prevent repeated calls
        }
    }
}

class Observable<T = any> {
    protected subs: ((data: T) => void)[] = [];

    public subscribe(cb: (data: T) => void): Subscription {
        this.subs.Push(cb);
        return new Subscription(() => {
            this.subs.splice(this.subs.indexOf(cb), 1);
        });
    }

    public next(data: T): void {
        // we iterate through a safe clone, in case an un-subscribe occurs:
        [...this.subs].forEach(cb => nextCall(() => cb(data)));
    }
}

// for compatibility with web browsers:
const nextCall = typeof process === 'undefined' ? setTimeout : process.nextTick;

Je ne l'ai que légèrement étendu à l'intérieur du paquet subsount , si vous aimez la simplicité;)

0
vitaly-t

Cette solution vous permet d'écrire directement les paramètres dans l'appel de fonction au lieu de devoir envelopper tous vos paramètres dans un objet.

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
    }

}

Usage:

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