Dispatching custom events

Question

I have version 0.9.0.1 of the typescript compiler installed in my VS 2012 Update 3.

I want to dispatch a custom event but the ambient variable declared in lib.d.ts does not expose the expected constructor signatures.

When I use

var myEvent = new CustomEvent("my:event:type", { detail: { some: "data"} });
window.dispatchEvent(myEvent);

the type script compiler complains, because according to him, only

var myEvent = new CustomEvent();

is correct.

The latter is erroneous according to Chrome 27 and Aurora 24.02, due to "missing arguments"

MDN also lists the actually-correct-but-not-for-typescript constructor signatures.

My thinking was now to add the known-correct constructor signature to the ambient variable declaration, but without touching the shipped lib.d.ts file. Would this technically be possible? I could not come up with the correct syntax for it, and the language specification did not mention how to merge two such declarations.

Alternatively, I simply edited lib.d.ts, which after a restart of the IDE provided me with the updated signature. Nevertheless, I'd rather not tamper with 3rd-party files in such a way.

Last, is there some other mechanism I (sh|c)ould use to write type script code that dispatches a custom event?

(Update: Restarting the IDE reloads lib.d.ts correctly. Also, corrected made-up event type name)

Fenton · Accepted Answer · 2013-07-12 15:21:07Z

3

The reason this isn't part of lib.d.ts is that Internet Explorer doesn't support this object in IE10.

If the CustomEvent definition was purely an interface, you would be able to extend it thus:

interface CustomEvent {
    new(eventType: string, data: {});
}

But the CustomEvent constructor is actually defined in a variable declaration, which you can't extend:

declare var CustomEvent: {
    prototype: CustomEvent;
    new(): CustomEvent;
}

You can use this (nasty looking) work around to get hold of custom events while you wait for Internet Explorer / the TypeScript library to be updated.

class StandardsCustomEvent {
    static get(eventType: string, data: {}) {
        var customEvent = <any>CustomEvent;
        var event = new customEvent(eventType, data);
        return <CustomEvent> event;
    }
}

var x = StandardsCustomEvent.get("myevent",  { detail: { some: "data"} });

This fixes your compiler warnings - but won't make it work in IE10 or older - you would need to polyfill.

edited Jul 12, 2013 at 15:21

answered Jul 10, 2013 at 15:59

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arne Over a year ago

Defining a TypeScript type the constructor of which does not return an object of that type is indeed nasty...

Arne · Accepted Answer · 2013-07-10 15:21:14Z

1

I ended up doing all of this:

Use the --nolib option on build
Add a local copy of the lib.d.ts
Patch in the expected constructor signatures
Add a polyfill for IE <= 11 as proposed by MDN

answered Jul 10, 2013 at 15:21

Arne

7505 silver badges10 bronze badges

Comments

lampiclobe · Accepted Answer · 2013-12-24 09:39:47Z

0

var event = <CustomEvent>(new (<any>CustomEvent)('specifiedEvent'))

Might be a solution. Nice looking and tricky.

answered Dec 24, 2013 at 9:39

lampiclobe

1

Collectives™ on Stack Overflow

Dispatching custom events

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related