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


Use Browserify plugin Tsify for compiling TypeScript files.

Install Tsify using npm:
npm install tsify

Compile your code using:
browserify main.ts -p [tsify noImplicitAny] > bundle.js


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) {
        ts: {
                default : {
                src: ["**/*.ts", "!node_modules/**/*.ts"]
    grunt.registerTask("default", ["ts"]);


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")
              noImplicitAny: true,
                out: "output.js"
                return tsResult.js.pipe(gulp.dest("built/local"));


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.