Enabling TypeScript (ts-loader)

Version: 4.2
Edit this page

Warning: You are browsing the documentation for Symfony 4.2, which is no longer maintained.

Read the updated version of this page for Symfony 5.3 (the current stable version).

Enabling TypeScript (ts-loader)

Want to use TypeScript? No problem! First, enable it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack.config.js
// ...

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

+     .enableTypeScriptLoader()

    // optionally enable forked type script for faster builds
    // https://www.npmjs.com/package/fork-ts-checker-webpack-plugin
    // requires that you have a tsconfig.json file that is setup correctly.
+     //.enableForkedTypeScriptTypesChecking()
;

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!

Any .ts files that you require will be processed correctly. You can also configure the ts-loader options via the enableTypeScriptLoader() method. See the Encore's index.js file for detailed documentation.

If React is enabled (.enableReactPreset()), any .tsx file will also be processed by ts-loader.

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