javascript - 将 JavaScript requestAnimFrame 移植到 TypeScript

Question

我目前无法尝试将此代码移植到 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 错误是:

supplied parameters do not match any signature of call target

我试过声明 interface WindowEx extends Window包含签名，然后转换为 (< WindowEx>window).xxx ，但我怀疑这是转换此“典型”代码的正确方法。

一次尝试:

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
}

Answer 1

这是我为编译您的代码所做的工作。我刚刚定义了 requestAnimFrame()作为全局变量并将其键入，以便 TypeScript 可以验证对它的调用。没有任何扩展内置类型的好方法，例如 window目前因此需要做类似 (<any>window).webkitRequestAnimationFrame 的事情.作为一般规则，如果编译器提示并且您知道它是有效的 JavaScript，您总是可以转换为 <any>使其发挥作用。

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