Typescript One File Per Class

Question

I have just started with Typescript, using Visual Studio 2015, and can't find a way to use classes in separate files.

In a single file, there is no problem:

module someModule {
    export class TitleScreenState extends Phaser.State {
        game: Phaser.Game;
        constructor() {
            super();
        }
       //some code here
    }

    class GameRunningState extends Phaser.State {
        constructor() {
            super();
       //some code here
    }

    class SimpleGame {
        game: Phaser.Game;

         //some code here
        }

    }
}

    window.onload = () => {
        var game = new MyGame.Game();
    };

However, when the classes are moved into their own files, they show no errors, but at runtime I get:

0x800a1391 - JavaScript runtime error: 'MyGame' is undefined

// app.ts

/// <reference path='Game.ts'/>
/// <reference path='StateTitleScreen.ts'/>
/// <reference path='StateGameRunning.ts'/>


    window.onload = () => {
        var game = new MyGame.Game();
    };


//----------------------------------------
// Game.s

module MyGame {
    export class Game {
    // some code here
}
  

//-----------------------------------------
// StateTitleScreen.ts
  
module MyGame {
    export class StateTitleScreen {
    // some code here
}
  
//-----------------------------------------
// StateGameRunning.ts
  
module MyGame {
    export class StateGameRunning {
    // some code here
}

Answer 1

When you split your code into many files, you need to ensure they are all loaded at runtime.

For example:

<script src="Game.js"></script>
<script src="StateTitleScreen.js"></script>
<script src="StateGameRunning.js"></script>
<script src="app.js"></script>

Note that your app.js is last (because it depends on the others and the order matters).

You can also ask TypeScript to supply you with a single file using:

--out combined.js

You can then reference the combined file on your page, rather than many individual files - but you still get to manage your application by splitting into many files at design time.