Multiple Files Making Up Type Script Project

Recently I have been working with TypeScript and everything has been fine and I really, really like it.. Makes JavaScript workable again! :) we have tried to follow the same idea a

Solution 1:

I wrote about getting the right set up for TypeScript and one of the ideas in there will help you - I originally got the idea from Mark Rendle.

The idea is that create a file named references.ts and have all of your dependencies listed in there. A bit like this:

///<reference path="modulea.ts" />///<reference path="moduleb.ts" />///<reference path="modulec.ts" />///<reference path="moduled.ts" />///<reference path="modulee.ts" />

You can then simply reference this file at the top of all your TypeScript files:

/// <reference path="references.ts" />moduleModuleA {
    exportclassMyClass {
        doSomething() {
            return'Hello';
        }
        tester() {
            var x = newModuleB.MyClass();
        }
    }
}

The references.ts file acts like the References folder you have for a .NET project.

The other recommendation, which works quite well with this set up, is to use the --out flag to compile a single JavaScript file, starting with app.ts. The TypeScript compiler walks all the dependencies and works out the correct order for all the generated JavaScript.

tsc --outfinal.js app.ts

This strategy will scale with your program much better than manually referencing specific files everywhere.

Solution 2:

If you come like me from a C++ / C background and miss the .h (or .hpp) files, I have a way. And you don't have to change compiler flags, or use ///, or anything. Just plain simple .ts files, import, export.

You create a folder, name it "models"

In this folder, you can create your models, say:

automobile.ts

exportclassAutomobile {...}

car.ts

import { Automobile } from'./automobile.ts';

exportclassCarextendsAutomobile {...}

ferrari.ts

import { Automobile } from'./automobile.ts';
import { Car } from'./car.ts';

exportclassFerrariextendsCar {...}

and then the magic - header files!

you create a file called models.ts (could be header.ts, whatever) in the same folder, where you just do

export { Automobile } from'./automobile.ts';
export { Car } from'./car.ts';    
export { Ferrari } from'./ferrari.ts';

now, in your other files, to import all your models

import * as x from'src/app/models/models';

and be happy using

let myCar: x.Car = new x.Car();
let myFerrari: x.Ferrari = new x.Ferrari();

Solution 3:

You have two options here, either commonjs, or AMD (asynchronous module loading). Using commonjs, you will need to place a

<scripttype="text/javascript"src="lib/jquery-1.7.2.js"></script>

for each separate javascript file in your project in your html page. Obviously this can become very tedious, especially if you have hundreds of files in your project. Alternatively, as Steve Fenton pointed out, you can use the --out parameter to compile various files into a single file, and then reference just this single file in your html page.

Using AMD is the third option - where you only need to include one script tag in your html page, and AMD takes care of references. Have a look at my blog on how to get this working : http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/