https://github.com/sebastiandedeyne/laravel-mix-typescript-example

Example project using TypeScript with Laravel Mix
https://github.com/sebastiandedeyne/laravel-mix-typescript-example

Last synced: about 2 months ago
JSON representation

Example project using TypeScript with Laravel Mix

• Host: GitHub
• URL: https://github.com/sebastiandedeyne/laravel-mix-typescript-example
• Owner: sebastiandedeyne
• Created: 2017-05-15T21:55:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-17T20:59:27.000Z (over 7 years ago)
• Last Synced: 2024-04-24T18:26:14.371Z (5 months ago)
• Language: PHP
• Homepage: https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix
• Size: 617 KB
• Stars: 49
• Watchers: 4
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Laravel Mix TypeScript Example

A minimal example project on how to get started with Laravel Mix and TypeScript.

🔗 Blog post with detailed explanation: https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix

## Adding TypeScript Support to Laravel Mix

This repository contains the result of a project that supports TypeScript. Here's the recipe for adding support to your own application.

1. Install dependencies: `yarn add typescript ts-loader` (see [`package.json`](https://github.com/sebastiandedeyne/laravel-mix-typescript-example/blob/master/package.json))

2. Create a `tsconfig.json`, or generate one with `node_modules/.bin/tsc --init` (see [`tsconfig.json`](https://github.com/sebastiandedeyne/laravel-mix-typescript-example/blob/master/tsconfig.json))

3. Add `ts-loader` and register TypeScript file extensions in `webpack.mix.config` (see below snippet or [`webpack.mix.js`](https://github.com/sebastiandedeyne/laravel-mix-typescript-example/blob/master/webpack.mix.js))

4. Set up the `appendTsSuffixTo` option if you want to use TypeScript in `.vue` files too (optional)

```js

mix.webpackConfig({

       module: {

           rules: [

               {

                   test: /\.tsx?$/,

                   loader: 'ts-loader',

                   options: { appendTsSuffixTo: [/\.vue$/] },

                   exclude: /node_modules/,

               },

           ],

       },

       resolve: {

           extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],

       },

   });

```

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.