0

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.

Community
  • 1
  • 1
akhileshcoer
  • 162
  • 10

1 Answers1

0

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.

sgrtho
  • 228
  • 1
  • 6
  • got the point about reference path. Is it always required to have single output file or I can live with multiple files? – akhileshcoer Sep 08 '16 at 06:58
  • The reference basically tells TypeScript what to expect "being there" - that's it. It stands apart from the final bundling process. But when using the *outFile* option the compiler, kindly as it is, will consider the reference as dependency and adjust the concatenation order (if the referenced file is within the range of compiled files). Sure you can live with that, but it won't scale as nice. A reference tag is not a real dependency, just a reference. – sgrtho Sep 08 '16 at 07:08
  • As to the single output file: when using Node you'll never need a single output file, because Node can require modules from the file system - need to use ES6 style modules for that anyways. In a remote/browser environment you'll need something to bridge the gap between your files/modules. That can be a single output file providing *everything*, which you can achieve like you do - more sophisticatedly with a tool like browserify (again using ES6 modules). Or some async loading mechanism. – sgrtho Sep 08 '16 at 07:15
  • Note that TS will translate *ES6 style module* syntax to compatible formats understood by Node or bundling tools (depending on what compile options you use). – sgrtho Sep 08 '16 at 07:16