Confuse between ES6 module syntax and Typescript module syntax

Question

All:

I am pretty new to both ES6 and TypeScript, but I am learning and comparing them parallel right now.

The first thing confuses me so much is there are many similarity overlaps, for example, in terms of the namespace and module( like import/from/export etcs):

I wonder if anyone could give me a brief comparison summary about the usage of them.

I also wonder if there is relationship between Typescript and ES6?

Thanks

@JohnWhite Thanks, one thing to clear first, are all concepts you talked about is Typescript but not ES6 right? — Kuan
@JohnWhite Thanks so much. It will be even better to give a roadmap about how to learn them.. — Kuan

John Weisz John Weisz · Accepted Answer · 2016-02-01T18:07:10

This question might be better suited for the Programmers section of StackExchange, but here we go.

There are two types of modules in Typescript, internal modules (namespaces) and external modules. The syntax of the latter is equivalent to the ES6 module syntax.

Internal Modules

Also called namespaces. Internal modules are used when the module is to be compiled along a project, and are primarily a tool for separation concerns, much akin to the use of namespaces in C#. When compiled with the TypeScript compiler, internal modules are put into closures (via self-invoking functions).

MyApp.ts

namespace MyApp {
    export class MyClass { }
}

... when compiled into ES5, becomes the following abomination:

MyApp.js

// ES5 compatible
var MyApp;
(function (MyApp) {
    var MyClass = (function () {
        function MyClass() { }
        return MyClass;
    })();
    MyApp.MyClass = MyClass;
})(MyApp || (MyApp = {}));

When compiled into ES6, becomes a bit cleaner, as there is native syntax for classes:

MyApp.js

// ES6 compatible
var MyApp;
(function (MyApp) {
    class MyClass { }
    MyApp.MyClass = MyClass;
})(MyApp || (MyApp = {}));

Internal modules are especially useful when you compile your entire codebase into a single output file.

External Modules

External modules are compiled separately (per file), and are to be loaded with a module loading system (like RequireJS in ES5, or natively in ES6) during runtime. There is no top-level module declaration, as a top-level export or import statement itself will instruct the compiler that the file itself is a module, and should be compiled accordingly.

When compiled with the TypeScript compiler, external modules are wrapped into the selected module syntax. Currently supported are AMD, CommonJS, UMD, System on the ES5 platform, and the native syntax on the ES6 platform.

MyApp.ts

export class MyClass { }

... when compiled into ES5 - with say, UMD - becomes the following blasphemy:

MyApp.js

// ES5 compatible
(function (deps, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    } else if (typeof define === 'function' && define.amd) {
        define(deps, factory);
    }
})(["require", "exports"], function (require, exports) {
    var MyClass = (function () {
        function MyClass() { }
        return MyClass;
    })();
    exports.MyClass = MyClass;
});

When compiled into ES6 however, the resulting code becomes infinitely cleaner, as the TypeScript module syntax is based on (equivalent to) the ES6 module syntax:

MyApp.js

// ES6 compatible
export class MyClass { }

However, the ES6 platform is not widely supported yet, so I suggest going with ES5 compilation. This comes with the expense of additional generated boilerplate code, but besides the marginally increased bandwidth there are no additional side effects: the same codebase can be compiled into both ES5 and ES6, with functionally identical results.

Confuse between ES6 module syntax and Typescript module syntax

1 Answers

Internal Modules

External Modules