Typescript - Loading external modules and convert into a single JS-file

Question

I've got a TypeScript project with different external modules. For example, I import the module with the following statement and it works

import myExternalModule = module("http://mylocalapphost/tsmodules/mod1");
var myObject = new myExternalModule.importedInteface('var1', 'var2');

When I convert the .ts with tsc to .js, I'm getting only this:

var myExternalModule = require("http://mylocalapphost/tsmodules/mod1");

but I need the implementation of the module in this .js-File, like an internal module. How can I do it?

This are the two files (sorry for the bad naming...):

// mod1.ts (at a local server)
export class importedClass {
  private prVar: number = 0;
  constructor(public var1: string, public var2: string){}
  public func1(km: number){
    this.prVar += km;
  }
  public getPrVar(){
    return this.prVar;
  }
}

// main.ts
import myExternalModule = module(" path to mod1 ");
var myObject = new myExternalModule.importedClass('string var1', 'string var2');
myObject.func1(20);

As the result I want one .js-file with all imported modules/classes etc. inside, because the app runs at a server (without connection to the local server, where the modules are placed), like this:

var importedClass = (function () {
    function importedClass(var1, var2) {
        this.var1 = var1;
        this.var2 = var2;
        this.prVar = 0;
    }
    importedClass.prototype.func1 = function (km) {
        this.prVar += km;
    };
    importedClass.prototype.getPrVar = function () {
        return this.prVar;
    };
    return importedClass;
})();
var myObject = new importedClass('string var1', 'string var2');
myObject.func1(20);

Fenton Fenton · Accepted Answer · 2012-12-17T11:48:35

If you are loading an external module, not a module that you have a TypeScript code file or definition for, you are better off declaring the require function and loading it like this:

declare var require: any;

var myExternalModule = require("http://mylocalapphost/tsmodules/mod1");
var myObject = new myExternalModule.importedInteface('var1', 'var2');

Which will result in the following JavaScript:

var myExternalModule = require("http://mylocalapphost/tsmodules/mod1");
var myObject = new myExternalModule.importedInteface('var1', 'var2');

Not that different - but you could optionally add typing to the code in TypeScript instead of having it purely dynamic!

In respect of having a single JS file output - if you are using module-loading, that isn't really relevant. Your module-loader handles getting the files at runtime.

Typescript - Loading external modules and convert into a single JS-file

1 Answers