Integrating with Build Tools

Build tools

Babel

Install

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

.babelrc

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

Using Command Line Interface

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

package.json

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

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");
  2. var tsify = require("tsify");
  4. browserify()
  5.     .add("main.ts")
  6.     .plugin("tsify", { noImplicitAny: true })
  7.     .bundle()
  8.     .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");
  2. var fs = require("fs")
  3. var path = require("path")
  4. var typescript = require("duo-typescript");
  6. var out = path.join(__dirname, "output.js")
  8. Duo(__dirname)
  9.     .entry("entry.ts")
  10.     .use(typescript())
  11.     .run(function (err, results) {
  12.         if (err) throw err;
  13.         // Write compiled result to output file
  14.         fs.writeFileSync(out, results.code);
  15.     });

More details: frankwallis/duo-typescript

Grunt

Install

  1. npm install grunt-ts

Basic Gruntfile.js

  1. module.exports = function(grunt) {
  2.     grunt.initConfig({
  3.         ts: {
  4.             default : {
  5.                 src: ["**/*.ts", "!node_modules/**/*.ts"]
  6.             }
  7.         }
  8.     });
  9.     grunt.loadNpmTasks("grunt-ts");
  10.     grunt.registerTask("default", ["ts"]);
  11. };

More details: TypeStrong/grunt-ts

Gulp

Install

  1. npm install gulp-typescript

Basic gulpfile.js

  1. var gulp = require("gulp");
  2. var ts = require("gulp-typescript");
  4. gulp.task("default", function () {
  5.     var tsResult = gulp.src("src/*.ts")
  6.         .pipe(ts({
  7.               noImplicitAny: true,
  8.               out: "output.js"
  9.         }));
  10.     return tsResult.js.pipe(gulp.dest("built/local"));
  11. });

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 = {
  2.     entry: "./src/index.tsx",
  3.     output: {
  4.         path: '/',
  5.         filename: "bundle.js"
  6.     },
  7.     resolve: {
  8.         extensions: [".tsx", ".ts", ".js", ".json"]
  9.     },
  10.     module: {
  11.         rules: [
  12.             // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
  13.             { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ }
  14.         ]
  15.     }
  16. }

Basic webpack.config.js when using Webpack 1

  1. module.exports = {
  2.     entry: "./src/index.tsx",
  3.     output: {
  4.         filename: "bundle.js"
  5.     },
  6.     resolve: {
  7.         // Add '.ts' and '.tsx' as a resolvable extension.
  8.         extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  9.     },
  10.     module: {
  11.         rules: [
  12.             // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
  13.             { test: /\.tsx?$/, loader: "ts-loader" }
  14.         ]
  15.     }
  16. }

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"?>
  2. <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  3.   <!-- Include default props at the top -->
  4.   <Import
  5.       Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
  6.       Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
  8.   <!-- TypeScript configurations go here -->
  9.   <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  10.     <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
  11.     <TypeScriptSourceMap>true</TypeScriptSourceMap>
  12.   </PropertyGroup>
  13.   <PropertyGroup Condition="'$(Configuration)' == 'Release'">
  14.     <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
  15.     <TypeScriptSourceMap>false</TypeScriptSourceMap>
  16.   </PropertyGroup>
  18.   <!-- Include default targets at the bottom -->
  19.   <Import
  20.       Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
  21.       Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
  22. </Project>

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

NuGet