TypeScript Internal and External Modules

Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out.

Final I figured out how to do both TypeScript AMD & CommonJS external modules and TypeScript Internal module classes. Hopefully you can get started right away with my examples below.

TypeScript External Modules Classes

Below is how to setup TypeScript AMD/CommonJS classes so they will output correctly. You can check out my TypeScript AMD(RequireJS) Example files to see how to setup an TypeScript application with RequireJS.

// TestApp.ts file
import Base = require("view/Base");

class TestApp extends Base {

    private _title:string = 'TypeScript AMD Boilerplate';

    constructor() {
        super();
    }

    public createChildren():void {

    }

}

export = TestApp;

Here is the Base.ts class that the TestApp.ts will extend.

// Base.ts file
import $ = require("jquery");

class Base {

    private _parent:JQuery = null;

    constructor() {
    }

    public createChildren():void {

    }

    public appendTo(selector:string):void {
        this._parent = $(selector);
        this.createChildren();
    }

}

export = Base;

TypeScript Internal Modules Classes

Below is how to setup TypeScript Internal classes so they will output correctly. This is the way I like to setup my TypeScript files. You can check out my TypeScript Internal Modules Example files to see how to setup an TypeScript application with regular classes.

///<reference path='_declare/jquery.d.ts'/>

///<reference path='view/Base.ts'/>

module namespace {

    export class TestApp extends Base {

        private _title:string = 'TypeScript Boilerplate';

        constructor() {
            super();
        }

        public createChildren():void {

        }

    }
}

Here is the Base.ts class that the TestApp.ts will extend.

module namespace {

    export class Base {

        private _parent:JQuery = null;

        constructor() {
        }

        public createChildren():void {

        }

        public appendTo(selector:string):void {
            this._parent = $(selector);
            this.createChildren();
        }

    }
}

If you want to learn more about TypeScript Namespace with Internal Modules check out this other post.

Go ahead and leave comments because I know people are trying to figure this out and I think this is the way to do TypeScript Internal and External Modules.

4 Responses to “TypeScript Internal and External Modules”

  1. Hi Robert. I just tried this in my project, and I get syntax errors when I add the final export line. My class is not in a module.

    On the other hand, I just tried using export like “export class MyClass {…}” and I got no syntax error.

    Does the above approach work for you? What version of TypeScript are you working with?

    • Eric you can checkout my example code here: https://github.com/codeBelt/TypeScript-AMD-Boilerplate. I am using TypeScript 0.9.7 but using GruntJS to do all my compiling.

      If you navigate to my ‘src/assets/scripts/AppBootstrap.ts’ and type tsc –module amd AppBootstrap.ts you can see how my classes compile with no errors.

      I’ve tried the “export class MyClass {…}” syntax before but the output is not what I want because you need to create a class like: new MyClass.MyClass(); . Check out definitive guide to typescript for more detailed information.

      • It’s an IDE error I get, and I am using Eclipse with the Palantir TS plugin. This “double-naming” of the external-module/class is irritating for me too, but it seems like I am stuck with it if I stay in Eclipse.

        I am reading your guide now and it’s informative. I decided to dive into TypeScript and learn as I go, but this guide is definitely worth a read. Thanks!

        • I would suggest getting WebStorm or another product from JetBrains to do your TypeScript development. WebStorm has great support for TypeScript but I mainly use GruntJS to do my TypeScript compiling.

Leave a Reply