TypeScript Compile Order to Single File

[royibernthal]

I'm compiling my TypeScript project into a single JS file, at the moment by specifying an outFile in the compiler options. In my project each class is defined in a different file.

The problem is that classes that depend on each other are not concatenated in the output JS in the right order.

For example, if I have class A that extends class B, it'd mean class B would have to be compiled before class A.

(1)

class A extends B { } //error - can't find B

class B { }

(2)

class B { }

class A extends B { } //works as expected

The problem is the file order in TypeScript compile is not defined according to class dependencies, resulting in many instances of (1).

 

It can be solved by manually defining the compile order with many lines of:

/// <reference path="myFile.ts"/>

however it is not ideal and can quickly become a headache in large projects.

 

The other option from what I read is to use external modules and be able to require/import relevant classes/files.

It sounds good, but it seems to only take care of ASYNC loading during runtime of the required files after each ts file has been compiled into its own js file.

What I need is defining the right compile order according to class dependencies during compile time from ts to js.

 

I googled "typescript compile order" and read thoroughly the first 10 results - meaning following references to turoials, documentations, videos, etc...

It seems people have been experiencing the same problem but their questions have never been answered to satisfaction.

From what I understand it should be possible to do using the CommonJS external module, but all I can understand from the answers is a general sense of what should be happening rather than a simple and straightforward answer of how to actually do it.

 

If you know the answer, let's solve this issue once and for all

[b10b]

Yes, I wish someone told me this when I started out with Typescript too.

Have a look at using "webpack" and "import" as direct replacements for "outFile" and "reference" respectively.  Initially this may feel wrong because it introduces another dependency to your project (webpack) and compiling becomes a separated task (e.g. running webpack on watch mode).  Webpack does a lot more than you may initially need, but it also does that basic job well - bundling Typescript in the correct order (or rather order independent) and allowing module loading.  Here's a basic tut:

http://www.jbrantly.com/typescript-and-webpack/

[royibernthal]

@b10b 

I'm just making sure - can this take care of compiling everything in the right order into a single javascript file? (not 1 js per 1 ts)

If so, would it require me to place import statements similarly to the reference tag or would the dependencies be inferred automatically?

Can it handle dependency loops?