How do I declare a prototype "monkey" in typescript

Question

I am creating a d.ts file for webgl-utils.js from google

I have a problem with one of the last lines where the method in the global object is "decapitated" (I think this is the correct terminology)

The problem line reads:

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

How can I declare this in my typescript file so that I don't get compilation errors when using the function:

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

I tried it now:

  interface window { requestAnimFrame(): any; } 

But this does not fix the error:

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

Answer 1

You were heading in the right direction, but you need to identify all the options that you have:

  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

make sure the interface name starts with capital "W" and not "w"

 interface Window { requestAnimFrame():any; } 

In the calling code, use window.requestAnimFrame(); . Hope this solves your problem.

Answer 3

another way:

 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

The only way that worked for me:

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