Typescript global variables

Question

Is there a convenient way to have global variables accessible within modules,without compiler errors, ie CANVAS_WIDTH used below?

    export class Bullet {           x: number = 22;         y: number = 22;          constructor (speed: number) {             this.xVelocity = speed;         }          inBounds() {             return this.x >= 0 && this.x <= CANVAS_WIDTH &&                 this.y >= 0 && this.y <= CANVAS_HEIGHT;         }; } } 

Answer 1

You need to define those properties as static, then you can access it easily like this,

export class Game {     static canvas: JQuery;     static CANVAS_WIDTH: number;     static CANVAS_HEIGHT: number;     bullet: Bullet;      constructor(canvasElem: JQuery) {         Game.canvas = canvasElem;         Game.CANVAS_WIDTH = Game.canvas.width();         Game.CANVAS_HEIGHT = Game.canvas.height();     } }  export class Bullet {     x: number = 22;     y: number = 22;      public inBounds() {         // accessing static properties         return this.x >= 0 && this.x <= Game.CANVAS_WIDTH && this.y >= 0 && this.y <= Game.CANVAS_HEIGHT;     } } 

---

This compiles to:

define(["require", "exports"], function(require, exports) {     var Game = (function () {         function Game(canvasElem) {             Game.canvas = canvasElem;             Game.CANVAS_WIDTH = Game.canvas.width();             Game.CANVAS_HEIGHT = Game.canvas.height();         }         return Game;     })();     exports.Game = Game;      var Bullet = (function () {         function Bullet() {             this.x = 22;             this.y = 22;         }         Bullet.prototype.inBounds = function () {             // accessing static properties             return this.x >= 0 && this.x <= Game.CANVAS_WIDTH && this.y >= 0 && this.y <= Game.CANVAS_HEIGHT;         };         return Bullet;     })();     exports.Bullet = Bullet; }); //# sourceMappingURL=dhdh.js.map 

Answer 2

This is a contrived example, but rather than trying to push to global scope, you can use the module scope to enclose a variable that will be used from several classes.

module MyModule {     var x: number = 5;      export class FirstClass {         doSomething() {             x = 10;         }     }      export class SecondClass {         showSomething() {             alert(x.toString());         }     } }  var a = new MyModule.FirstClass(); a.doSomething();  var b = new MyModule.SecondClass(); b.showSomething(); 

All the usual rules about multiple things using the same variable apply here - you don't want to enforce a particular order of events on the calling code.

---

Compiles to:

var MyModule; (function (MyModule) {     var x = 5;      var FirstClass = (function () {         function FirstClass() {         }         FirstClass.prototype.doSomething = function () {             x = 10;         };         return FirstClass;     })();     MyModule.FirstClass = FirstClass;      var SecondClass = (function () {         function SecondClass() {         }         SecondClass.prototype.showSomething = function () {             alert(x.toString());         };         return SecondClass;     })();     MyModule.SecondClass = SecondClass; })(MyModule || (MyModule = {}));  var a = new MyModule.FirstClass(); a.doSomething();  var b = new MyModule.SecondClass(); b.showSomething();