Multiple files making up Type Script project

Question

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 as we would behind any .net project e.g single file per class/interface

module Infrastructure {     export interface IBaseViewModel {         addOrRemoveClass(selector: string, className: string);     } } 

the problem we have come across is this - all the dependent files are not being included? when it comes to being run.

If you look at this file which is the main entry point to our application, I get an undefined error on creating a new ViewModelBuilder

module Infrastructure {     export class Fusion {         constructor() {             this.vmBuilder = new ViewModelBuilder();             this.setApplicationDefaults();             this.start();         }          private vmBuilder: IViewModelBuilder;          private start() {             this.vmBuilder.process();         }          private setApplicationDefaults() {             $.pnotify.defaults.styling = "jqueryui";             $.pnotify.defaults.history = false;             $.pnotify.defaults.auto_display = false;         }     } } 

and at the top of the file we have

/// <reference path="../Typings/jquery.d.ts" /> /// <reference path="ViewModelBuilder/ViewModelBuilder.ts" /> /// <reference path="ViewModelBuilder/IViewModelBuilder.ts" /> 

also ViewModelBuilder

module Infrastructure {      export class ViewModelBuilder { } } 

So the question is this - What is the best way to go on? how can we get other class declarations to work? our project is going to grow considerably we probably 100 view models which will represent each view (the project is a conversion from windows forms to web)

Any help would be fantastic as we really need to conquer this and move on! :)

Answer 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" /> module ModuleA {     export class MyClass {         doSomething() {             return 'Hello';         }         tester() {             var x = new ModuleB.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 --out final.js app.ts 

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

Answer 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

export class Automobile {...} 

car.ts

import { Automobile } from './automobile.ts';  export class Car extends Automobile {...} 

ferrari.ts

import { Automobile } from './automobile.ts'; import { Car } from './car.ts';  export class Ferrari extends Car {...} 

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();