globalThis is the future.

First, TypeScript files have two kinds of scopes

global scope

If your file hasn't any import or export line, this file would be executed in global scope that all declaration in it are visible outside this file.

So we would create global variables like this:

// xx.d.ts
declare var age: number

// or 
// xx.ts
// with or without declare keyword
var age: number

// other.ts
globalThis.age = 18 // no error

All magic come from var. Replace var with let or const won't work.

module scope

If your file has any import or export line, this file would be executed within its own scope that we need to extend global by declaration-merging.

// xx[.d].ts
declare global {
  var age: number;
}

// other.ts
globalThis.age = 18 // no error

You can see more about module in official docs

• Global variables: You can't define globals in JAVA, so why try it in Typescript? Do what you would do in Java: Declare a static variable on a class.

• One class per file: That's perfectly fine and I do it all the time. You have to explicitly import files though. I usually have 1 class per file, and an index.ts that exports all these things. EG:

// core/user/IUserService.ts
import { IUser } from "./IUser"

export interface IUserService {
  getUserById(id: string): Promise<IUser>
}

// core/user/IUser.ts
export interface IUser {
  id: string;
}

// core/user/index.ts
export * from "./IUserService"
export * from "./IUser"

// core/index.ts
export * from "./user"

// http/HttpUserService.ts
import { IUserService, IUser } from "../core/user";

export class HttpUserService implements IUserService {
  constructor(
    private endpoint: string,
    private fetch: Fetch,
  ) {
  }

  async public getUserById(id: string): Promise<IUser|null> {
    const response = await this.fetch(this.endpoint + "/users/" + id);
    return response.status === 200 ? parseUserResponse(await response.json()) : null;
  }
}

// essentially a prive function
// no need to embed it in the class since it won't be using `this` either
function parseUserResponse(data: any): IUser {
  return ...;
}

// http/index.ts
export * from "./HttpUserService";

// index.ts
export * from "core";
export * from "http";

Also, an example of a "global" variable by using a singleton pattern: https://github.com/tobyhinloopen/injector/blob/master/src/core/Injector.ts

export class Injector {
  public static readonly instance = new Injector();
  ...
}

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