Question

我的印象是＆＃34;所有有效的JavaScript都是有效的TypeScript＆＃34 ;;但每当我尝试使用它时，我都会试图做一些简单的事情:(

在这种情况下，我尝试将一些.js文件重命名为.ts，并尽可能少地编译。我想逐步转换为TypeScript;因此，重点是让它编译而不是翻译所有代码。

我从一些包含CustomEvent polyfill的代码开始： https://developer.mozilla.org/en/docs/Web/API/CustomEvent

代码是这样的：

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

然后有一些代码调用它：

window.dispatchEvent(new CustomEvent('typeScriptIsTehCool', { detail: 1 }));

但是，如果您将所有这些内容粘贴到http://www.typescriptlang.org/Playground中，您会发现一些问题：

window.Event未在基础库中定义
document.createEvent不会返回initCustomEvent函数
window.CustomEvent（因为window已知，并且您无法在未定义的情况下组成已知类型的属性）
对new CustomEvent(x, y)的调用失败，因为TypeScript使用了没有此构造函数的CustomEvent的lib定义

我尝试了各种各样的事情来实现这个目标;包括在Event中将CustomEvent和window添加到.d.ts，使CustomEvent成为标准函数;和其他事情，但我不能消除所有的错误。

我错过了一些明显的东西吗？

Answer 1

使用any会让你到达那里：

interface Window {
    CustomEvent: CustomEvent;
}

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt:CustomEvent = <any>document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = Event.prototype;

  window.CustomEvent = <any>CustomEvent;
})();

Answer 2

您可以通过以下模式在对象上添加新属性/函数来扩展对象。

interface Window {
    Event : Event;
    CustomEvent(event : any, params : any) : Event;
}
interface Event {
    prototype : Event;
}
declare var CustomEvent: {
    new (event : string, detail : any) : CustomEvent;
}

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = <CustomEvent>document.createEvent('CustomEvent');
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

window.dispatchEvent(new CustomEvent('typeScriptIsTehCool', { detail: 1 }));

我不确定参数类型是什么，所以你必须自己添加，但这应该让你朝着正确的方向前进。

Answer 3

interface IWindow extends Window {
    CustomEvent: CustomEvent;
}

interface IParams {
    bubbles: boolean;
    cancelable: boolean;
    detail: any;
}

(() => {
    function CustomEvent(
        event: string,
        params: IParams = {
            bubbles: false,
            cancelable: false,
            detail: undefined
        }
    ) {
        const evt: CustomEvent = document.createEvent('CustomEvent') as any;
        evt.initCustomEvent(
            event,
            params.bubbles,
            params.cancelable,
            params.detail
        );
        return evt;
    }

    CustomEvent.prototype = Event.prototype;
    const win = window as IWindow;
    win.CustomEvent = CustomEvent as any;
})();

IE11和Typescript是的，可能需要这种组合。

获取简短的JavaScript CustomEvent polyfill以在TypeScript中编译？

3 个答案: