TypeScript Build Tools

Build tools are programming utilities that help to automate the transformation and bundling of our source code into a single file.

Building means compiling, linking, and packaging the code into the executable form.

There are several common build tools available that can be integrated with TypeScript. The Build tools are usually run on the command line, either in IDE (for instance VS Code).

TypeScript Build Tools

We will take a look at how to integrate these TypeScript build tools:

• Browserify
• Grunt
• Gulp
• Webpack

Grunt

Use the grunt-ts plugin from Grunt for TypeScript.

Install Grunt using npm:
npm install grunt-ts

You will need to include the grunt config file:

module.exports = function(grunt) {
    grunt.initConfig({
        ts: {
                default : {
                src: ["**/*.ts", "!node_modules/**/*.ts"]
            }
        }
    });
    grunt.loadNpmTasks("grunt-ts");
    grunt.registerTask("default", ["ts"]);
};

Gulp

Use gulp-typescript plugin for TypeScript.

Install Gulp using npm:
npm install gulp-typescript

You will need to include the gulp config file:

var gulp = require("gulp");
var ts = require("gulp-typescript");

gulp.task("default", function () {
                var tsResult = gulp.src("src/*.ts")
        .pipe(ts({
              noImplicitAny: true,
                out: "output.js"
        }));
                return tsResult.js.pipe(gulp.dest("built/local"));
});

Webpack

Use ts-loader plugin for TypeScript.

Install Webpack using npm:

npm install gulp-typescript

You will need to include the webpack.config.js config file:

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js"
    },
    resolve: {
                // Add '.ts' and '.tsx' as a resolvable extension.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
                // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            { test: /\.tsx?$/, loader: "ts-loader" } // replace with your plugin of choice
        ]
    }

Refer to the next section for TypeScript Resources.