akhileshcoer akhileshcoer - 3 months ago 26
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.

Answer

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.