Enabling TypeScript (ts-loader)
Edit this pageWarning: You are browsing the documentation for Symfony 4.0, which is no longer maintained.
Read the updated version of this page for Symfony 6.3 (the current stable version).
Enabling TypeScript (ts-loader)
Want to use TypeScript? No problem! First, install the dependencies:
1
$ yarn add --dev typescript ts-loaderThen, 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-pluginThen 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.
