Portera JavaScript requestAnimFrame till TypeScript

Jag sitter för närvarande fast och försöker porta den här koden till TypeScript.

if (typeof window !== 'undefined') {
  window.requestAnimFrame = (function(callback){
      return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback){
          window.setTimeout(callback, 1000 / 60, new Date().getTime());
      };
  })();
}

TSC-felmeddelandet jag får är:

de angivna parametrarna matchar ingen signatur för anropsmålet

Jag har försökt deklarera ett interface WindowEx extends Window som innehåller signaturerna, och sedan kasta till (< WindowEx>window).xxx, men jag tvivlar på att detta är rätt sätt att konvertera denna "typiska" kod.

Ett försök:

interface WindowEx extends Window {
  requestAnimFrame(callback, target?):number;
  webkitRequestAnimationFrame(callback, target?):number;
  mozRequestAnimationFrame(callback, target?):number;
  oRequestAnimationFrame(callback, target?):number;
  // msRequestAnimationFrame already at WindowAnimationTiming interface
}

Svar #1

Här är vad jag gjorde för att få din kod att kompilera. Jag definierade bara requestAnimFrame() som global och skrev typ på den så att TypeScript kunde validera anrop till den. Det finns för närvarande inget bra sätt att utöka inbyggda typer som window, därav behovet av att göra saker som (<any>window).webkitRequestAnimationFrame. Som en allmän regel, om kompilatorn klagar och du vet att det är giltig JavaScript, kan du alltid kasta till <any> för att få det att fungera.

var requestAnimFrame: (callback: () => void) => void = (function(){ 
  return window.requestAnimationFrame || 
  (<any>window).webkitRequestAnimationFrame || 
  (<any>window).mozRequestAnimationFrame || 
  (<any>window).oRequestAnimationFrame || 
  window.msRequestAnimationFrame || 
  function(callback){ 
      window.setTimeout(callback, 1000 / 60, new Date().getTime()); 
  }; 
})();

Svar #2

Anledningen till att de angivna parametrarna inte matchar signaturen för anropsmålet är att du anropar en funktion på detta sätt:

(function(callback) { ... })();

Det vill säga, funktionen accepterar callback men du skickar inte in någon.

Du bör ta bort callback som en parameter eftersom du inte använder den någonstans i funktionen.

Relaterade artiklar