javascript - 我将如何在打字稿中声明一个“猴子补丁”原型

Question

我正在为谷歌的 webgl-utils.js 创建一个d.ts文件

我对全局对象中的方法是“猴子补丁”的最后一行有疑问（我认为这是正确的术语）

问题行如下：

 /**
  * Provides requestAnimationFrame in a cross browser way.
  */
 window.requestAnimFrame = (function() {
   return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            window.setTimeout(callback, 1000/60);
          };
 })();

我将如何在我的打字稿文件中声明它，以便在使用该函数时不会出现编译错误：

 function tick()
 {
      requestAnimFrame(tick);
      drawScene();
 }

我现在尝试过：

 interface window
 {
      requestAnimFrame(): any;
 }

但这并不能消除错误：

 The name 'requestAnimFrame' does not exist in the current scope

Answer 1

您正朝着正确的方向前进，但您需要定义您拥有的所有变体：

 interface Window {
     requestAnimFrame(callback: any, element?: any): void;
     webkitRequestAnimationFrame(callback: any, element?: any): void;
     mozRequestAnimationFrame(callback: any, element?: any): void;
     oRequestAnimationFrame(callback: any, element?: any): void;
 }

 window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback, element?) {
            window.setTimeout(callback, 1000/60);
        };
 })();

function tick() {
    window.requestAnimFrame(tick);
}

Answer 2

确保接口名称以大写“W”而不是“w”开头

interface Window {
   requestAnimFrame():any;
}

在调用代码中使用window.requestAnimFrame();. 希望这能解决你的问题

Answer 3

其他方式：

declare var wnd: {
    requestAnimationFrame: any;
    webkitRequestAnimationFrame: any;
    mozRequestAnimationFrame: any;
    oRequestAnimationFrame: any;
    msRequestAnimationFrame: any;
}
var wnd = window;

export var requestAnimFrame = (function () {
    return wnd.requestAnimationFrame ||
           wnd.webkitRequestAnimationFrame ||
           wnd.mozRequestAnimationFrame ||
           wnd.oRequestAnimationFrame ||
           wnd.msRequestAnimationFrame ||
           function (/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
               window.setTimeout(callback, 1000 / 60);
           };
})();

Answer 4

对我有用的唯一方法：

declare global {
    interface Window {
        requestAnimFrame(callback: () => void): any;
        webkitRequestAnimationFrame(callback: () => void): any;
        mozRequestAnimationFrame(callback: () => void): any;
        oRequestAnimationFrame(callback: () => void): any;
    }
}

Window.prototype.requestAnimFrame = function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
}