DEPRECATED: Use awesome-typescript-loader or ts-loader instead.
TypeScript loader for Webpack.
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!
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'
}
]
}
};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');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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent