akhileshcoer akhileshcoer - 1 month ago 12x
TypeScript Question

Typescript Inheritance with separate compiled files

I'm trying to setup an angularJS based code in using typescript.

Created initial project structure using yeoman.io using 'generator-gulp-angular' module.
For my business code trying to use typescript, I followed this TypeScript - How to keep compiled files in a separate directory? to separate out js files into another directory.

All different JS file are automatically merged into single JS file - this came with yeoman generated code.

The issue I'm facing is I wanted to used inheritance feature of typescript, after compiling TS code base.js and derived.js is generated.
However when I run gulp build (again came with yeoman code), which tries to launch phantomJS it gives me below error:

undefined is not an object (evaluating 'b.prototype')

After searching on net I found that It has something to do with sequence with of JS files being loaded but in my case I've one single JS file.


Your single JS file is still a concatenation of separately compiled files (for the most part). Your error hints that the order within your output file is wrong.

The fastest way to solve this, is to use a TypeScript reference tag. Reference the base class from within the subclass, like this:

/// <reference path='./base.ts' />

Do not reference the other way round. Now the compiler should respect the order in the output file.

Though I must warn you: have a look at ES6 style modules and module loaders. The reference strategy has scaling issues.