Babel

Install

  1. npm install @babel/cli @babel/core @babel/preset-typescript --save-dev

.babelrc

  1. {
    "presets": ["@babel/preset-typescript"]
    }

Using Command Line Interface

  1. ./node_modules/.bin/babel --out-file bundle.js src/index.ts

package.json

  1. {
    "scripts": {
    "build": "babel --out-file bundle.js main.ts"
    },
    }

Execute Babel from the command line

  1. npm run build

Browserify

Install

  1. npm install tsify

Using Command Line Interface

  1. browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js

Using API

  1. var browserify = require("browserify");
    var tsify = require("tsify");
    browserify()
    .add("main.ts")
    .plugin("tsify", { noImplicitAny: true })
    .bundle()
    .pipe(process.stdout);

More details: smrq/tsify

Duo

Install

  1. npm install duo-typescript

Using Command Line Interface

  1. duo --use duo-typescript entry.ts

Using API

  1. var Duo = require("duo");
    var fs = require("fs");
    var path = require("path");
    var typescript = require("duo-typescript");
    var out = path.join(__dirname, "output.js");
    Duo(__dirname)
    .entry("entry.ts")
    .use(typescript())
    .run(function (err, results) {
    if (err) throw err;
    // Write compiled result to output file
    fs.writeFileSync(out, results.code);
    });

More details: frankwallis/duo-typescript

Grunt

Install

  1. npm install grunt-ts

Basic Gruntfile.js

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

More details: TypeStrong/grunt-ts

Gulp

Install

  1. npm install gulp-typescript

Basic gulpfile.js

  1. 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"));
    });

More details: ivogabe/gulp-typescript

Jspm

Install

  1. npm install -g jspm@beta

Note: Currently TypeScript support in jspm is in 0.16beta

More details: TypeScriptSamples/jspm

Webpack

Install

  1. npm install ts-loader --save-dev

Basic webpack.config.js when using Webpack 2

  1. module.exports = {
    entry: "./src/index.tsx",
    output: {
    path: "/",
    filename: "bundle.js",
    },
    resolve: {
    extensions: [".tsx", ".ts", ".js", ".json"],
    },
    module: {
    rules: [
    // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
    { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ },
    ],
    },
    };

Basic webpack.config.js when using Webpack 1

  1. 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: {
    rules: [
    // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
    { test: /\.tsx?$/, loader: "ts-loader" },
    ],
    },
    };

See more details on ts-loader here.

Alternatives:

MSBuild

Update project file to include locally installed Microsoft.TypeScript.Default.props (at the top) and Microsoft.TypeScript.targets (at the bottom) files:

  1. <?xml version="1.0" encoding="utf-8"?>
    <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <!-- Include default props at the top -->
    <Import
    Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
    Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
    <!-- TypeScript configurations go here -->
    <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    </PropertyGroup>
    <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    </PropertyGroup>
    <!-- Include default targets at the bottom -->
    <Import
    Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
    Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
    </Project>

More details about defining MSBuild compiler options: Setting Compiler Options in MSBuild projects

NuGet

  • Right-Click -> Manage NuGet Packages
  • Search for Microsoft.TypeScript.MSBuild
  • Hit Install
  • When install is complete, rebuild!

More details can be found at Package Manager Dialog and using nightly builds with NuGet