TypeScript Internal and External Modules
Posted by robert | Filed under TypeScript
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.
Hello, my name is Robert and I am an interactive developer at
March 19, 2014 at 3:50 pm
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?
March 19, 2014 at 8:40 pm
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.
March 21, 2014 at 10:58 am
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!
March 22, 2014 at 9:46 pm
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.