Laravel 5.6 With Typescript.

Please note these directions are just my struggle to get this working.  I am on my first day with Laravel and Typescript and haven’t used node/npm before.  Any comments/suggestions very welcome.  This was done on Linux Mint 18.x  Your results may vary.

To install laravel, go to the directory where you want to create the project then.

composer create-project laravel/laravel campsite
cd campsite

Then

vim package.json

and add at the end of existing sections but before the closing }  remember to add the , to the preceding section.

"resolutions": {
       "cli-table2": "https://github.com/civilatio/cli-table2.git#protypePolutionFix",
       "hoek": "^5.0.3",
       "tunnel-agent": ">=0.6.0"
}

Taken from https://github.com/JeffreyWay/laravel-mix/issues/1633

Also in package.json change the version number of ts-loader to “3.5.0” (note no ^). Later versions of ts-loader seem to require webpack 4.0 and won’t work with laravel 5.6.  I don’t know why they set the requirement above what works?

Create a file called tsconfig.json and add this to it.

{
 "compilerOptions": {
   "target": "ES2015",
   "module": "es2015",
   "strict": true,
   "noImplicitAny": true,
   "strictNullChecks": true,
   "noImplicitThis": true,
   "alwaysStrict": true,
   "removeComments": true,
 },
 "include": [
   "resources/assets/ts/**/*.ts"
 ],
 "exclude": [
   "node_modules"
 ]
}

If you run npm install now you will get npm audit errors which I couldn’t figure out how to fix directly,  however this method works and doesn’t take long.

You need to run npm install first to create the package-lock.json file (no idea why).  If you don’t it will error out saying that it can’t find package-lock.json when trying to do the npx command.

So run these commands in this order.

npm install
rm -rf node-modules
npx npm-force-resolutions
npm install
npm run dev

NOTE on mozjpeg:

If you get this error

mozjpeg pre-build test failed

It is because libpng16 isn’t installed so run these commands;

rm -fr node-modules
sudo apt-get install libpng16-dev
npm install

At this point you should have fully installed node laravel-mix and no audit errors.

Installing Typescript and integrate with laravel-mix

sudo npm install -g typescript

Edit your webpack.mix.js and change this

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

to this

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