[DEPRECATED] TypeScript Webpack Plugin
JavaScript TypeScript Makefile Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example Reorganize Jan 25, 2015
lib Fix scoping error Mar 21, 2015
.gitignore example: add code splitting example Jan 20, 2015
LICENSE Add LICENSE (fixes #15) Mar 8, 2015
Makefile Makefile: fix release targets Feb 16, 2015
README.md Update README.md Feb 21, 2017
package.json 1.1.3 Mar 22, 2015

README.md

TypeScript Webpack Loader

DEPRECATED: Use awesome-typescript-loader or ts-loader instead.

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
import React = 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 {
  export var bar = 42;
}

main.ts

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