1. Home
  2. Documentation
  3. Frontend
  4. Enabling TypeScript (ts-loader)
WARNING: You are browsing the documentation for Symfony 4.0 which is not maintained anymore. Consider upgrading your projects to Symfony 5.1.

Enabling TypeScript (ts-loader)

4.0 version
Maintained
3.4 4.4 5.1 current 5.0 5.2 master
Unmaintained
3.3 4.1 4.2 4.3

Enabling TypeScript (ts-loader)

Want to use TypeScript? No problem! First, install the dependencies:

1
$ yarn add --dev typescript ts-loader

Then, activate the ts-loader in webpack.config.js:

1
2
3
4
5
6
7
8
9
// webpack.config.js
// ...

Encore
    // ...
    .addEntry('main', './assets/main.ts')

    .enableTypeScriptLoader()
;

That’s it! Any .ts files that you require will be processed correctly. You can also configure the ts-loader options via a callback:

1
2
3
4
.enableTypeScriptLoader(function (typeScriptConfigOptions) {
    typeScriptConfigOptions.transpileOnly = true;
    typeScriptConfigOptions.configFile = '/path/to/tsconfig.json';
});

If React assets are enabled (.enableReactPreset()), any .tsx file will be processed as well by ts-loader.

More information about the ts-loader can be found in its README.

Faster Builds with fork-ts-checker-webpack-plugin

By using fork-ts-checker-webpack-plugin, you can run type checking in a separate process, which can speedup compile time. To enable it, install the plugin:

1
$ yarn add --dev fork-ts-checker-webpack-plugin

Then enable it by calling:

1
2
3
4
5
6
// webpack.config.js

Encore
    // ...
    .enableForkedTypeScriptTypesChecking()
;

This plugin requires that you have a tsconfig.json file that is setup correctly.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.