Repository files navigation

See also:

1. tsdoc.io — TypeScript documentation portal (backed bytygen).

npm install awesome-typescript-loader --save-dev

Please note that ATL worksthe same way as a TypeScript compiler as much as possible. So please be careful with yourfiles/exclude/include sections.

ADVICE: Turn onuseCache option.

ADVICE: Typically you want yourfiles section to include only entry points.

ADVICE: The loader works faster if you useisolatedModules orforceIsolatedModules options.

ADVICE: The loader works faster if you will usereportFiles to restrictchecking scope.

ADVICE: Use the loader together withhard-source-webpack-plugin

The world is changing, other solutions are evolving and ATL may workslowerforsome workloads. Feel free to tryts-loader withHappyPack orthread-loader andhard-source-webpack-plugin.

awesome-typescript-loader loader was created mostly to speed-up compilation in my own projects.Some of them are quite big and I wanted to have full control on how my files are compiled. There are two major points:

1. atl has first-class integration with Babel and enables caching possibilities. This can be useful for those who use Typescript with Babel.WhenuseBabel anduseCache flags are enabled, typescript's emit will be transpiled with Babel and cached.So next time if source file (+environment) has the same checksum we can totally skip typescript's and babel's transpiling.This significantly reduces build time in this scenario.

2. atl is able to fork type-checker and emitter to a separate process, which also speeds-up some development scenarios (e.g. react with react-hot-loader)So your webpack compilation will end earlier and you can explore compiled version in your browser while your files are typechecked.

1. Add.ts as a resolvable extension.
2. Configure all files with a.ts extension to be handled byawesome-typescript-loader.

webpack.config.js

// `CheckerPlugin` is optional. Use it if you want async error reporting.// We need this plugin to detect a `--watch` mode. It may be removed later// after https://github.com/webpack/webpack/issues/3460 will be resolved.const{ CheckerPlugin}=require('awesome-typescript-loader')module.exports={// Currently we need to add '.ts' to the resolve.extensions array.resolve:{extensions:['.ts','.tsx','.js','.jsx']},// Source maps support ('inline-source-map' also works)devtool:'source-map',// Add the loader for .ts files.module:{rules:[{test:/\.tsx?$/,loader:'awesome-typescript-loader'}]},plugins:[newCheckerPlugin()]};

After that, you will be able to build TypeScript files with webpack.

The loader supports NodeJS 4 and newer.

You can use the tsconfig.json file to configure your compiler and loader:

{    "compilerOptions": {        "noImplicitAny": true,        "removeComments": true    },    "awesomeTypescriptLoaderOptions": {        /* ... */    }}

awesome-typescript-loader@2.x aims to support onlytypescript@2.x andwebpack@2x, if you need old compilers please use1.x or0.x versions.

If you want to use newpaths andbaseUrl feature of TS 2.0 please includeTsConfigPathsPlugin.This feature is available only forwebpack@2.1.

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');resolve: {    plugins: [        new TsConfigPathsPlugin(/* { configFileName, compiler } */)    ]}

No logging from the checker. Please note that this option disables async error reporting becausethis option bansconsole.log() usage.

Allows use of TypeScript compilers other than the official one. Must beset to the NPM name of the compiler, e.g.ntypescript or the path to a package folder.Note that the compiler must be installed inyour project. You can also usenightly versions.

Use fasttranspileModule emit mode. Disables automatically when you set compilerOptiondeclaration: true (reference).

Allows the use of several TypeScript compilers with different settings in one app. Overrideinstance to initialize another instance.

Specifies the path to a TS config file. This is useful when you have multiple config files. This setting is uselessinside a TS config file.

Use this setting to disable type checking, enabling this will nullify theCheckerPlugin usage in your webpack configuration.

Emit all typescript errors as warnings.

Use this setting to disable dependent module recompilation.

You can squelch certain TypeScript errors by specifying an array ofdiagnostic codes to ignore.For example, you can transpilestage 1 properties from*.js using"ignoreDiagnostics": [8014].

Invoke Babel to transpile files. Useful with ES6 target. Please seeuseCache optionwhich can improve warm-up time.

If you're usingbabelOptions, anything in.babelrc will take precedence. This breaks expected usage for scenarios where you need two sets of Babel configs (example: one for Webpack, one for your build tools).

You may want to"babelrc": false to disable.babelrc if you don't want it:

{"useBabel":true,"babelOptions": {"babelrc":false,/* Important line */"presets": [            ["@babel/preset-env", {"targets":"last 2 versions, ie 11","modules":false }]        ]    },"babelCore":"@babel/core",// needed for Babel v7}

Override the path used to findbabel-core. Useful ifnode_modules is installed in a non-standard place or webpack is being invoked from a directory not at the root of the project.

For Babel 7, this should be set to"@babel/core".

Use this option to pass some options to Babel (e.g. presets). Please note that.babelrc file is more universal way to do this.

Use internal file cache. This is useful with Babel, when processing takes a long time to complete. Improves warm-up time.

Use pre-compiled files if any. Files must be named as{filename}.js and{filename}.map.

Directory where cache is stored.

Specifyglobs to report file diagnostics. ALL OTHER ERRORS WILL NOT BE REPORTED. Example:

reportFiles: [    "src/**/*.{ts,tsx}"]

Provide custom transformers, TypeScript 2.4.1+. Example:

conststyledComponentsTransformer=require('typescript-plugin-styled-components').default;constkeysTransformer=require('ts-transformer-keys/transformer').default;// ...rules:[{test:/\.tsx?$/,loader:'awesome-typescript-loader',options:{// ... other loader's optionsgetCustomTransformers:program=>({before:[styledComponentsTransformer(),keysTransformer(program)]})}}]

You can pass compiler options inside the loader query string or in a TS config file.