TypeScript Webpack Loader

TypeScript loader for Webpack.

Example Configuration

webpack.config.js

module.exports={// Currently we need to add '.ts' to resolve.extensions array.resolve: {extensions: ['','.webpack.js','.web.js','.ts','.js']},// Source maps support (or 'inline-source-map' also works)devtool: 'source-map',// Add loader for .ts files.module: {loaders: [{test: /\.ts$/,loader: 'typescript-loader'}]}};

After that, you would be able to write JSX in TypeScript!

Best Practices

Using with JSX-TypeScript compiler

You can use typescript-loader together with jsx-typescript compiler which has support for JSX syntax (used in React.js).

For that you need to install jsx-typescript:

% npm install jsx-typescript

And specify typescriptCompiler loader option:

module.exports={module: {loaders: [{test: /\.ts$/,loader: 'typescript-loader?typescriptCompiler=jsx-typescript'}]}};

External Modules

The most natural way to structure your code with TypeScript and webpack is to use external modules, and these work as you would expect.

npm install --save react

importReact= require('react');

Internal Modules

TypeScript Loader will work with internal modules too, however acquiring a reference to modules declared this way requires some work using the exports-loader. This is required because webpack wraps every file in a closure and internal modules are meant to run in a global context.

foo.ts

module Foo{exportvarbar=42;}

main.ts

/// <reference path="foo.ts" />varfoo: typeofFoo=require('exports?Foo!./foo');console.log(foo.bar)// 42