TypeScript error from valid JavaScript

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

That's just a missing semicolon, preventing it to be correct both in Javascript and Typescript.

This should work :

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

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

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

Don't rely on automatic semicolon insertion : rules are too complex.

In your case, the compiler was seeing

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

and it hadn't enough information not to think that something was the arguments passed to the function new Game() . Hence the error...

Answer 2

Got it. The error was to do with scope of the function. So I need to have this

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

even though it complies down to this in Javascript.

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

Answer 3

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.

Answer 4

Note also that there is an issue currently with calling a named function expression within said function expression, which may bite you in code similar to the above. Namely the below code will give you the error shown in the comments even though valid:

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

This is valid as per section 13 of the ECMAScript spec, but fails currently.