Integrating with Build Tools

Babel

Install

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

.babelrc

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

Using Command Line Interface

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

package.json

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

Execute Babel from the command line

sh
npm run build

Browserify

Install

sh
npm install tsify

Using Command Line Interface

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

Using API

js
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

sh
npm install duo-typescript

Using Command Line Interface

sh
duo --use duo-typescript entry.ts

Using API

js
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

sh
npm install grunt-ts

Basic Gruntfile.js

js
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

sh
npm install gulp-typescript

Basic gulpfile.js

js
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

sh
npm install -g jspm@beta

Note: Currently TypeScript support in jspm is in 0.16beta

More details: TypeScriptSamples/jspm

Webpack

Install

sh
npm install ts-loader --save-dev

Basic webpack.config.js when using Webpack 2

js
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

js
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:

xml
<?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

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request

Contributors to this page:
MHMohamed Hegazy  (53)
OTOrta Therox  (10)
MDBMaurice de Beijer  (6)
RCRyan Cavanaugh  (3)
DRDaniel Rosenwasser  (3)
11+

Last updated: Jul 18, 2020