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 · Accepted Answer · 2012-12-17 11:48:35Z

3

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.

answered Dec 17, 2012 at 11:48

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1829815 Over a year ago

I think my question was indistinct. I have some modules in external files (e.g. on a local host) and I want the imported module in the .js-file, because the app should not load the module at runtime.

Fenton Over a year ago

In that case, I would use a ///<reference... rather than an import statement as the import statement is used to load at runtime. With the reference, you could either bundle the scripts or get the TypeScript compiler to bundle them: ` tsc --out combined.js File1.ts File2.ts`

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related