来自有效 JavaScript 的 TypeScript 错误答案

【问题标题】：TypeScript error from valid JavaScript来自有效 JavaScript 的 TypeScript 错误
【发布时间】：2012-10-11 13:31:11
【问题描述】：

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

错误 7 当前作用域中不存在名称“gameloop”

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

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

【问题讨论】：

标签： javascript typescript

【解决方案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) ...

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

【讨论】：

我实际上有分号（那里有复制和粘贴错误）。将您的代码复制粘贴到操场上。您将看到错误 (typescriptlang.org/Playground)

【解决方案2】：

知道了。错误与函数的范围有关。所以我需要这个

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

即使它在 Javascript 中符合这一点。

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

另请注意，目前在所述函数表达式中调用命名函数表达式存在问题，这可能会在与上述类似的代码中对您不利。即下面的代码即使有效也会给你在 cmets 中显示的错误：

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

这根据 ECMAScript 规范的 section 13 有效，但目前失败。

【讨论】：