Derik Whittaker



Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering

Today I extended one of our classes to use inheritance via Typescript (love that).  When I refreshed the page I received an error here


When I dropped to the Chrome debugger and outputted both the values for both ‘d’ and ‘b’ I was a bit shocked.  ‘d’ was valid, but ‘b’ was undefined.  I tried a whole slew of things but nothing came to mind.  Of course I thought maybe I was using inheritance wrong, but my syntax was right.

After some digging online I found this link which talks about how a parent class has to be loaded prior to it child for everything to work.  This makes perfect sense given the way JavaScript parses code.  I had this brilliant idea that I would simply add a _ prefix to my base class name and that would have the file loaded first.  WRONG…

If you look at the image below you can see that _BaseViewModel.js is way at the bottom of the list and my error was being thrown in the AthleteListingViewModel…


Somehow I needed to force the bundler to load the files in the order I wanted.  In our case I am NOT including each file into the bundle manually, rather I am using the ‘IncludeDirectory’ feature. 

After a bit more searching I found this link which solved the same basic problem but in a much more complex way than I needed.  However it showed me how I could solve the problem in a few lines of code.  What I needed to do was create a new instance of IBundleOrderer and use it.

This code is my AlphaSortedBundleOrderer which solved my issues.


After I created my new AlphaSortedBundleOrdered I just needed to use it in my bundler.  I did this as you see below.


Once I had my bundler setup correctly I re-ran the page and my .js files were ordered as expected.


Now I am sure there is a 100 ways to solve this problem, but this worked for me.

Till next time,

Posted 04-30-2013 8:08 AM by Derik Whittaker



Mark Rendle wrote re: Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering
on 04-30-2013 10:41 AM

I prefer to let the TypeScript compiler take care of concatenating everything into a single JS file, which ensures everything is in the right order.

Rob Eisenberg wrote re: Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering
on 05-01-2013 12:01 PM

Compile TypeScript to AMD modules and then use require.js. Done.

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)