Question

The below code is valid JavaScript, yet in typescript it throws the following error. Any idea why?

Error 7 The name ‘gameloop’ does not exist in the current scope

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

EDIT: After first answer noticed copy and paste error that wasn’t related to actual problem.

Answer 1

I have run into this also, but it required a different fix. In my case, I was using window.requestAnimationFrame from TypeScript, then running the code on Chrome. However, I got a runtime error, “window does not have requestAnimationFrame”. This is because requestAnimationFrame is still prefixed in Chrome. You will either need to add a prefixed declaration to your TypeScript declarations OR just add a JavaScript file to your project that plolyfills window.requestAnimationFrame in the standard way;

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

I used the polyfill method to make requestAnimationFrame work on chrome, since it is such a common fix. The polyfill itself could be written in pure TypeScript with a bunch of casting, but the Javascript is clean and easy and you can remove it when Chrome removes the prefix without affecting your TypeScript.