Laravel mix TypeScript setup

By default, latest Laravel (8 at this point) comes with Laravel mix  which help you a lot with with CSS and JavaScript pre-processors.  In this tutorial we will take a look how to use if for TypeScript.

1. Step  - create tsconfig.json

First thing firs, let's create tsconfig.json file, in your root folder (where webpack.mix.js) is stored create this file and use this configuration:

                    {
    "compilerOptions": {
        "target": "esnext",
        "module": "amd",
        "moduleResolution": "node",
        "allowJs": true,
        "strict": false,
        "esModuleInterop": true
    },
    "include": ["resources/js"]
}
                  

2. Step - create app.ts and config webpack.mix.js

cretae app.ts and place it in resources/js/ folder and then open webpack.mix.js and edit the configuration to look like this:

                    mix.ts('resources/js/app.ts', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
                  

Basically from here npm will actually tell you what to do, so let's run:

                    npm run watch
                  

3. Install ts-loader

After you executed npm run watch you will get this message:

                    > mix watch

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install ts-loader typescript --save-dev --legacy-peer-deps
 
        Finished. Please run Mix again.

                  

so let's install it by running:

                    npm install ts-loader typescript --save-dev --legacy-peer-deps
                  

4. Run npm watch

So, let's try again:

                    npm run watch
                  

and this time we got success message

                    webpack compiled successfully

                  

and that is it, your TypeScript will be compiled to public/js/app.js and you can start using resource/js/app.ts as your starting TypeScript file for Laravel application.

Additional:

If you would like to use file versioning for your compiled JS, please check this tutorial: