TypeScript Webpack Loader
TypeScript loader for Webpack.
Example Configuration
webpack.config.js
moduleexports = // 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-typscript 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:
moduleexports = 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
;
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
main.ts
/// ;console.logfoo.bar // 42