Reference Hell

Topics: General
Sep 18, 2013 at 2:28 PM
Based on responses by the development team, TSC won't organize the dependencies automatically, so the only way to compile to single files correctly is to add a <references /> clause for each file in the correct order.

I believe I'm experiencing what I'd call a "reference hell". Trying to keep all references in order without using a global "references.ts" seems to be completely unmanageable.

I have some "components" folder, similar to how "Controls" are in win/web forms. In a page, I'd like to have access to all components and just build the page, but instead I need to keep adding a reference for each component I use in each page because adding a global "references" makes the output out of order eventually.

This is leading to to pages with things like 50 references and growing.

At the end I just gave up on using TSC for single file output, and have added grunt and batch scripts to do this.

Is there anyone else experiencing this problem? Have anyone tried to create single-file output without global references? Are there better solutions?

Sep 18, 2013 at 5:23 PM
Compiling the .ts files to .js files and then running the results through RequireJS to create a single file should work.
Sep 19, 2013 at 4:17 PM
Hi Dan_s,

In this respect, grunt can do that as well.
I guess the only solution then is to do this kind of thing, running a post processor outside VS.
Apr 23, 2014 at 3:27 PM
Struggled with this myself, so definately same problem here! I'm still amazed why this issue isn't addressed by the official typescript project, isn't the goal to develop enterprise scale javascript applications after all.

I created a makeshift dependency tree analyzer with bash/sed/awk that automatically puts correct references annotations on top of each 100+ .ts files I have. Now it broke when I started using modules and more structured items. Of well, back to drawing board.
Apr 23, 2014 at 4:33 PM
At work I use Visual Studio and managed to make single file output work using references. It's been a struggle though.

At home I use IntelliJ and was thinking of using Browserify to do the single file creation. Unfortunately I think that will mangle the source map.
Apr 28, 2014 at 11:35 PM
Browserify will merge the source-map of files that have them when generating the bundle, it is pretty clever in that.

Also this will allow you to use external-module pattern (using commonJS modules) and get rid of those horrible global references, by using import so you know exactly what is visible in each file.

And as a bonus browserify has shims for most of the node.js standard lib, and you can use modules from npm and bower, which opens you projects for a huge wealth of open-source modules.
Apr 30, 2014 at 7:57 PM
So in my game which has TS libs shared between projects, I use AMD modules for all my TS projects. This makes it easy to import without going through the reference hell you speak of, all I do is declare my dependencies at the top of my files and everything works pretty well. The only dance is copying the required shared files to each dependent lib. I'd much rather have a reference system similar to C# class libraries and such, where I can make a TypeScript Library which I can import easily between projects (including Web App and Node.js Apps).