MaYaN MaYaN - 3 months ago 119
Javascript Question

TypeScript: error TS2339: Property 'CustomEvent' does not exist on type 'Window'

I am trying to write a custom element in

Aurelia
using
TypeScript
following THIS guide.

However when trying to compile I am getting the following error:


error TS2339: Property 'CustomEvent' does not exist on type 'Window'.

error TS2339: Property 'val' does not exist on type 'Event'.


My class is:

import {bindable, autoinject, customElement} from 'aurelia-framework';

import * as $ from 'jquery';
import 'select2';
import 'select2/css/select2.css!';

@customElement('select2')
@autoinject
export class CustomSelect{
@bindable name:string;
@bindable selected: boolean = false;
@bindable options: any;
element: Element;

constructor(element: Element){
this.element = element;
}

attached() :void {
$(this.element)
.find('select')
.select2()
.on('change', ev => {
let changeEvent;
if(window.CustomEvent){
changeEvent = new CustomEvent('change', {
detail: {
value: ev.val
},
bubbles: true
});
} else {
changeEvent = document.createEvent('CustomEvent');
changeEvent.initCustomEvent('change', true, true, {value: event.val});
}
this.element.dispatchEvent(changeEvent);
});
}
}

Answer

CustomEvent is defined in lib.es6.d.ts

Configuring the typescript compilation to target ES6 will fix this issue. You may need to close and re-open your IDE after making this change.

Comments