TypeScript ES6 Modules Boilerplate

Posted by robert | Filed under TypeScript

Update: I’ve officially switched over to Gulp and created a boilerplate generator to make things easier. Check out Slush Project Boilerplate Generator.

—-

I’ve been playing with TypeScript off and on since 2012 (version 0.8) and using ES6 modules seems to be the perfect way to do TypeScript/JavaScript.

In this post I will give you a quick overview how to setup your TypeScript project(s) to work with ES6 Modules. I suggest taking a look at my current TypeScript ES6 Modules Boilerplate after looking at the examples below.

I have two different setups:

1. Using TypeScript to develop your website/application
2. Using TypeScript to create a JavaScript library that others can use without TypeScript

TypeScript ES6 Modules Project Setup

TypeScript ES6 Module Sample Class

import AnotherClass from './AnotherClass';

class ExampleClass extends AnotherClass {

    public exampleProperty:string = null;

    constructor() {
        super();
    }

    public exampleMethod():void {
    }

}

export default ExampleClass;

Gruntfile for compiling your TypeScript ES6 Module Code

module.exports = function(grunt) {

    // Intelligently lazy-loads tasks and plugins as needed at runtime.
    require('jit-grunt')(grunt)();

    // -- Configuration --------------------------------------------------------
    grunt.initConfig({

        browserify: {
            buildTypeScript: {
                options: {
                    preBundleCB: function(bundle) {
                        bundle.plugin('tsify', {
                            removeComments: true,
                            noImplicitAny: false,
                            target: 'ES5'
                        });
                    },
                    // sourcemaps
                    browserifyOptions: {
                        debug: true
                    }
                },
                files: {
                    'web/assets/scripts/main.js': ['src/assets/scripts/main.ts']
                }
            }
        }

    });

    grunt.registerTask('default', [
        'browserify:buildTypeScript'
    ]);

};

NPM package.json for node modules used for the Gruntfile build

{
    "name": "Example",
    "version": "1.0.0",
    "browser": {
        "jquery": "./src/assets/vendor/jquery/dist/jquery.js"
    },
    "browserify-shim": {
        "jquery": "global:$"
    },
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    },
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-browserify": "^4.0.1",
        "browserify-shim": "^3.8.11",
        "tsify": "^0.12.2",
        "jit-grunt": "^0.9.1"
    }
}

TypeScript ES6 Modules Library Setup

I maintain a library of code called StructureJS. I use the TypeScript library to generate the JavaScript one so that I only have one codebase. I suggest using grunt-ts and the umd module setting.

ts: {
    default: {
        src: ['ts/**/*.ts'],
        outDir: 'js/',
        options: {
            target: 'es5',
            module: 'umd',
            basePath: '',
            sourceMap: false,
            declaration: false,
            nolib: false,
            comments: true
        }
    }
}

You can see the actual usage here:
https://github.com/codeBelt/StructureJS/blob/master/Gruntfile.js

Comments (3) | January 5th, 2016

3 Responses to “TypeScript ES6 Modules Boilerplate”

1. Sandeep Says:
   May 10, 2016 at 6:51 am

   Hi Robert,

   Great tutorials for typescript. It really helpful to developers. By the way i am facing problem when i am doing Typescript-ES6 sample project. It is showing error like require is not defined. Can you please look at https://github.com/Sandeepvedam/TypeScript-Starter-ES6

   Please provide your contribution or valuable suggestions. Much appreciated on your help.

   Thanks,
   Sandeep.

   Reply
   • robert Says:
     May 12, 2016 at 8:06 am

     It’s hard to tell from your project what TypeScript commands you are using. I’m sorry but I don’t have time to troubleshoot your project.

     Save yourself sometime and check out my slush project boilerplate generator.

     Reply
2. robert Says:
   October 20, 2017 at 11:56 am

   When using TypeScript you want to use types. It helps document you code and give the compiler accurate details on what you are doing. Typically when you are writing your classes most of your methods will be `private` so why not add that in there to tell other developer that I intend this method not to be called outside of the class and this method does not return any values. Hence the `:void` return type.

   Reply