How to include/NOT include a typescript file

Question

We have a project which is an independent collection of javascript controls. We use typecript in this project and have enabled "Combine JavaScript output into file". As you can imagine this eventually compiles to a rather large JS file.

We then have a separate project where our app resides - it references some of the controls in the above project via the JS file.

My question is this: what is the best way to include only the controls we need in our project in such a way so as to contain the size of the JS file. We only want to include JS for controls we need. Am I forced to "not combine" and include individual JS - or is there a better way to independently combine "specific" typescript files into one file.

Answer 1

If you have a large number of optional components, consider switching to AMD modules. This allows you to load modules on demand and was invented to solve the problem you describe.

If you currently have internal modules, you can convert them to external modules by adding an export statement. For example, this internal module:

module MyInternalModule {
    export class Example {

    }
}

Can be converted into an external module by adding one line of code:

module MyInternalModule {
    export class Example {

    }
}

export = MyInternalModule;

You can then use an import statement to load it when you need it:

import GiveItAnAlias = require('./MyInternalModule');

(You don't put .ts in that path).

You will need to supply a module flag to the compiler (or change the project settings if you are using Visual Studio):

tsc --module amd app.ts

You are now able to build a collection of modules and load them asynchronously on demand.