有效JavaScript的TypeScript错误

Question

以下代码是有效的JavaScript，但在打字稿中会引发以下错误。 知道为什么吗？

错误7名称“ gameloop”在当前范围中不存在

(function gameloop() {
    window.requestAnimationFrame(gameloop);
})();

编辑：第一个答案后注意到与实际问题无关的复制和粘贴错误。

Answer 1

那只是一个缺少的分号，从而使其在Javascript和Typescript中都无法正确使用。

这应该工作：

   var game = new Game(); // <== don't forget ';' here
   (function gameloop() {

       // stats.update();
        game.step();
        game.update();
        game.draw();

        window.requestAnimationFrame(gameloop);
    })();

不要依靠自动分号插入：规则太复杂了。

在您的情况下，编译器发现

... new Game()(something) ...

并且它没有足够的信息来不认为传递给函数new Game()的参数是something 。 因此错误...

Answer 2

得到它了。 错误与功能范围有关。 所以我需要这个

(function gameloop() {
window.requestAnimationFrame(this.gameloop);
})();

即使它符合Javascript的要求。

(function gameloop() {
window.requestAnimationFrame(gameloop);
})();

Answer 3

我也遇到了这个问题，但是它需要另外解决。 就我而言，我使用TypeScript中的window.requestAnimationFrame，然后在Chrome上运行代码。 但是，出现运行时错误，“窗口没有requestAnimationFrame”。 这是因为requestAnimationFrame在Chrome中仍然是前缀。 您将需要在TypeScript声明中添加前缀声明，或者只是将JavaScript文件添加到您的项目中，以标准方式展开window.requestAnimationFrame；

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

我使用polyfill方法使requestAnimationFrame在chrome上工作，因为它是一种常见的解决方法。 polyfill本身可以用纯TypeScript编写，并带有大量转换，但是Javascript简洁明了，您可以在Chrome删除前缀时将其删除，而不会影响您的TypeScript。

Answer 4

还要注意，当前在所述函数表达式中调用命名函数表达式存在一个问题，这可能会在类似于上面的代码中咬住您。 即，以下代码即使有效，也会给您注释中显示的错误：

function a() {
    var x = function b() {
        b(); // <-- "**The name 'b' does not exist in the current scope**"
    }
}

根据ECMAScript规范的第13节这是有效的，但当前失败。