How to Set Up TypeScript in Laravel 5.6

I've been encountering errors while trying to set up TypeScript in Laravel 5.6 and running 'npm run dev'. Below is my configuration - can someone help me identify what's wrong?


webpack.mix.js


let mix = require('laravel-mix');

mix.webpackConfig({

    resolve : {
        extensions : ['.ts']
    },
    module : {
        rules : [
            {
                test : /\.ts$/,
                loader : 'ts-loader' 
            }
        ]
    }
});

mix.js('resources/assets/ts/app.ts', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

tsconfig.json

{
  "compilerOptions": {

    "target": "es5",                          
    "module": "commonjs",                     
    "strict": true                           

  },

  "include": [
    "resources/assets/ts/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer №1

One of the great features of Laravel Mix is its native support for TypeScript.

All you have to do is:

let mix = require('laravel-mix');

mix.ts('resources/assets/ts/app.ts', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a JSON file within an Angular application using HTML

I have a JSON (link to the JSON) that I want to display in an html file. JSON: { "recipes": { "FRYING": { "Anchovies": [ [ {"500": "thawing"} ], [ {"60": "nothing"} ] ], "Codfis ...

Building a React TypeScript project is successful on Windows, but encounters issues when attempted on a

Currently, I am immersed in a project that involves React TypeScript. Here is the content of the package.json: { "version": "0.1.0", "private": true, "dependencies": { ///... "react": "^16.8.6", "react-scripts-ts": "3.1.0", }, "scri ...

I need to know the appropriate version of Node.js to use for installing the mobile-first development kit and migration assistance

My server version is mobile-first 8.0.0.00-20180220-083852 I downloaded the cli and migration assistance tool, but I keep encountering this error: npm ERR! node v6.9.3 npm ERR! npm v3.10.10 npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! sysca ...

What is causing this issue in TypeScript version 4.8?

After updating to TypeScript 4.8 in VSCode, I have encountered an error in one of my React projects that was not present before. Strangely, this error does not prevent the code from compiling successfully when building the project. It's challenging to ...

"Error: Database connection in progress! Please remember to close the connection before connecting to another database." Establishing connection between SQL server and nodejs

Here's the code snippet I'm currently using. Sometimes, it fails to enter the .then(function() block. Could someone please advise on how to close the existing connection? I've attempted various solutions like using conn.close() after connect ...

Filling a data entry with simultaneous commitments

Sample code: type Alphabet = 'a' | 'b' | 'c'; const alphabetMap: Record<Alphabet, null> = { 'a': null, 'b': null, 'c': null} // Select any asynchronous processing function you prefer funct ...

Encountered issues during deployment on Heroku platform using npm and Java

Previously, I had challenges installing a Java module on localhost but managed to resolve it using the steps outlined in this post: https://github.com/nodejs/node/issues/10289. It worked well on localhost, and now I am attempting to deploy my app on Heroku ...

Combining 2 arrays with an equal number of elements in PHP

In both arrays $newResponse and $key, the number of items will always be the same. I want to match each item from the $newResponse array with items from the $key array, in the same order they appear in the $key array as shown in the Expected result. How ca ...

Unable to launch React Native project

Error: Module Not Found Cannot find module 'C:\Users\Admin\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@babel\parser\lib\index.js'. Please make sure that your package.jso ...

npm ERROR: 404 - The package '@reactivex/rxjs' cannot be found in the npm registry

Encountering problems with the installation of this package through NPM. Attempting to install as it is a dependency of Angular2. Error: npm ERR! Darwin 15.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "@reactivex/<a href="/cd ...

Angular 2 does not recognize the existence of .then in type void

I have a query regarding Angular2 and I'm struggling with the void function in my code. Can someone help me out? I am new to Angular2 and unsure of what needs to be added in the void function. Check out this image for reference export class PasswordR ...

How can you bundle your Next.js app into a Node library for easy reuse?

After creating a next.js application with essential features such as: Authentication middleware Api routes for serving protected files Error logging functionality I am now interested in packaging and releasing this next.js application as an npm module, e ...

Error occurred while trying to implement style due to unsupported MIME type ('text/html') for the stylesheet

I am encountering multiple errors while attempting to access my application: Encountered errors while trying to load the application:</p> <pre><code>Refused to apply style from 'http://localhost:8000/styles.2466d75470f9c2227ee1.css&a ...

What steps can I take to resolve the upstream dependency conflict in my Expo Go project without resorting to using the --force or --legacy-peer-deps

npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="047661656770296a65706d7261297661656a6d6965706160296765766b7177616844372a31 ...

Setting up the permanent class path for Nodejs in Linux Mint

Recently, I attempted to install Nodejs Version 6.9.4 on my Linux Mint system using the following steps: $ cd /tmp $ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz $ tar xvfz node-v6.3.1-linux-x64.tar.gz $ mkdir -p /usr/local/nodejs $ mv ...

Error: Bower "MODULE_NOT_FOUND Module 'qs' could not be located"

Despite my best efforts, I am continuously faced with the error message: bower MODULE_NOT_FOUND Cannot find module 'qs' Every time I attempt to install a package using bower. NPM version 1.4.14 Bower version 1.3.8 Node Version 0.10.29 ...

Attempting to design an interface in Angular 2 to align with the anticipated API response structure

I have a specific JSON response in mind that I am expecting from an API. My goal is to create a user interface for it. { items: [ { identifier: 1, details: [ { id: 1001, perishable: 0 }, { ...

Looking to effortlessly move and arrange items with ng2-drag-drop in Angular 2?

I have encountered a problem with the ng2-drag-drop library. I am trying to drag and drop items from one div to another, and then freely move the dropped item within the droppable area. One issue I'm facing is that when I drop my draggable item in th ...

Angular dynamically filling in a table with incomplete object data

I am currently working on a scientific project that involves displaying large amounts of data in tables. The experiments I'm working with have timestamps that follow this format: interface TimeData { time: string; data: {SD: string, SEM: string ...

Is it feasible to operate the Spotify web api without a server using the updated authentication credentials?

I am currently attempting to utilize the Spotify web API using the node-spotify-api npm package. To require this package, I must employ a tool known as browserify. Browserify enables me to use the "require()" function specifically in the browser environmen ...