Port to TS

package.json

@@ -52,6 +52,8 @@
         "purgecss-webpack-plugin": "^1.1.0",
         "style-loader": "^0.21.0",
         "tailwindcss": "^0.5.1",
+        "ts-loader": "^5.3.1",
+        "typescript": "^3.2.2",
         "uglifyjs-webpack-plugin": "^1.2.5",
         "vue-devtools": "^3.1.9",
         "vue-feather-icons": "^4.7.1",

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "strict": true,
+    "moduleResolution": "node",
+    "module": "es2015"
+  },
+  "include": [
+    "./resources/assets/scripts/**/*"
+  ]
+}

webpack.config.js

@@ -9,6 +9,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ShellPlugin = require('webpack-shell-plugin');
 const PurgeCssPlugin = require('purgecss-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
 // Custom PurgeCSS extractor for Tailwind that allows special characters in
 // class names.
 //
@@ -52,7 +53,7 @@ const productionPlugins = [
             {
                 extractor: TailwindExtractor,
                 extensions: ['html', 'js', 'php', 'vue'],
-            }
+            },
         ],
     }),
     new UglifyJsPlugin({
@@ -86,6 +87,14 @@ module.exports = {
                 test: /\.vue$/,
                 loader: 'vue-loader',
             },
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                exclude: /node_modules/,
+                options: {
+                    appendTsSuffixTo: [/\.vue$/],
+                },
+            },
             {
                 test: /\.js$/,
                 include: [
@@ -114,36 +123,43 @@ module.exports = {
                             plugins: [
                                 require('postcss-import'),
                                 tailwind('./tailwind.js'),
-                                require('postcss-preset-env')({stage: 0}),
+                                require('postcss-preset-env')({ stage: 0 }),
                                 require('precss'),
                                 require('autoprefixer'),
                                 require('cssnano'),
-                            ]
+                            ],
                         },
                     }],
                 }),
-            }
+            },
-        ]
+            {
+                test: /\.(png|jpg|gif|svg)$/,
+                loader: 'file-loader',
+                options: {
+                    name: '[name].[ext]?[hash]',
+                },
+            },
+        ],
     },
     resolve: {
+        extensions: ['.ts', '.js', '.vue', '.json'],
         alias: {
-            'vue$': 'vue/dist/vue.esm.js'
+            'vue$': 'vue/dist/vue.esm.js',
         },
-        extensions: ['.js', '.vue', '.json'],
         symlinks: false,
     },
     plugins: process.env.NODE_ENV === 'production' ? basePlugins.concat(productionPlugins) : basePlugins,
     serve: {
-        content: "./public/",
+        content: './public/',
         dev: {
-            publicPath: "/assets/",
+            publicPath: '/assets/',
             headers: {
-                "Access-Control-Allow-Origin": "*",
+                'Access-Control-Allow-Origin': '*',
             },
         },
         hot: {
             hmr: true,
             reload: true,
-        }
+        },
-    }
+    },
 };

yarn.lock

@@ -6554,6 +6554,10 @@ semver-diff@^2.0.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
+semver@^5.0.1:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+
 semver@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
@@ -7099,6 +7103,16 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+ts-loader@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-5.3.1.tgz#70614c8ec4354a9c8b89c9f97b2becb7a98a3980"
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^1.0.2"
+    micromatch "^3.1.4"
+    semver "^5.0.1"
+
 tslib@^1.9.0:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.2.tgz#8be0cc9a1f6dc7727c38deb16c2ebd1a2892988e"
@@ -7124,6 +7138,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"
+
 uglify-es@^3.3.4:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"