将 JavaScript requestAnimFrame 移植到 TypeScript

Posted 2023-03-13

【中文标题】将 JavaScript requestAnimFrame 移植到 TypeScript

【英文标题】：Porting JavaScript requestAnimFrame to TypeScript

【发布时间】：2012-09-25 07:48:52

【问题描述】：

我目前正试图将此代码移植到 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 错误是：

提供的参数与调用目标的任何签名都不匹配

我尝试声明一个包含签名的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

【参考方案1】：

提供的参数与调用目标的签名不匹配的原因是因为您正在调用这样的函数：

(function(callback)  ... )();

也就是说，该函数接受callback，但您没有传递一个。

您应该删除 callback 作为参数，因为您没有在函数的任何地方使用它。

【参考方案2】：

这是我为编译您的代码所做的工作。我刚刚将 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()); 
  ; 
)();