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
}

Fenton · Accepted Answer · 2015-05-07 07:57:04Z

9

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.

answered May 7, 2015 at 7:57

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Russell Over a year ago

Thank you. I like the idea of compiling everything to a single file, though where does "--out combined.js" go? I thought it was a pre-compile command line, but it throws error 9009.

Fenton Over a year ago

For example: tsc --out combined.js app.ts. Most IDEs offer this as an option. Which editor are you using?

Alex Russell Over a year ago

Thanks again, Steve. I'm using Visual Studio CE 2015. On the project's properties page, I found a checkbox for "Combine javascript output into file," where a file name can be defined. This works! Though I never did find where the --out option can be used.

Fenton Over a year ago

That setting applies the --out flag automatically for you (in fact, most of the settings on that page ending up sending flags to the compiler).

Collectives™ on Stack Overflow

Typescript One File Per Class

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related