More progress, committing to get assistance with TS

resources/assets/scripts/api/http.ts

@@ -1,19 +1,23 @@
-import axios from 'axios';
+import axios, {AxiosInstance} from 'axios';
 
 // This token is set in the bootstrap.js file at the beginning of the request
 // and is carried through from there.
 // const token: string = '';
 
-const http = axios.create({
+const http: AxiosInstance = axios.create({
-    'X-Requested-With': 'XMLHttpRequest',
+    headers: {
-    'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
-    'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+    },
 });
 
 // If we have a phpdebugbar instance registered at this point in time go
 // ahead and route the response data through to it so things show up.
+// @ts-ignore
 if (typeof window.phpdebugbar !== 'undefined') {
     http.interceptors.response.use(response => {
+        // @ts-ignore
         window.phpdebugbar.ajaxHandler.handle(response.request);
 
         return response;

resources/assets/scripts/api/server/getDirectoryContents.ts

@@ -1,16 +1,13 @@
-import http from './../http';
+import http from '../http';
-import filter from 'lodash/filter';
+import { filter, isObject } from 'lodash';
-import isObject from 'lodash/isObject';
+// @ts-ignore
 import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
+import {DirectoryContents} from "./types";
 
 /**
  * Get the contents of a specific directory for a given server.
- *
- * @param {String} server
- * @param {String} directory
- * @return {Promise}
  */
-export function getDirectoryContents (server, directory) {
+export function getDirectoryContents (server: string, directory: string): Promise<DirectoryContents> {
     return new Promise((resolve, reject) => {
         http.get(route('server.files', { server, directory }))
             .then((response) => {
@@ -30,7 +27,7 @@ export function getDirectoryContents (server, directory) {
                 }
 
                 if (err.response.data && isObject(err.response.data.errors)) {
-                    err.response.data.errors.forEach(error => {
+                    err.response.data.errors.forEach((error: any) => {
                         return reject(error.detail);
                     });
                 }

resources/assets/scripts/api/server/types.ts

@@ -0,0 +1,5 @@
+export type DirectoryContents = {
+    files: Array<string>,
+    directories: Array<string>,
+    editable: Array<string>
+}

resources/assets/scripts/components/auth/Login.vue

@@ -15,13 +15,14 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+    import Vue from 'vue';
     import Flash from '../Flash';
     import ForgotPassword from "./ForgotPassword";
     import LoginForm from "./LoginForm";
     import TwoFactorForm from "./TwoFactorForm";
 
-    export default {
+    export default Vue.extend({
         name: 'login',
         data: function () {
             return {
@@ -41,5 +42,5 @@
             ForgotPassword,
             LoginForm,
         },
-    }
+    });
 </script>

resources/assets/scripts/router.ts

@@ -4,7 +4,7 @@ import store from './store/index';
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 // Base Vuejs Templates
-import Login from './components/auth/Login';
+import Login from './components/auth/Login.vue';
 import Dashboard from './components/dashboard/Dashboard';
 import Account from './components/dashboard/Account';
 import ResetPassword from './components/auth/ResetPassword';

tsconfig.json

@@ -1,16 +1,27 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "esnext",
-    "lib": [
+    "module": "esnext",
-      "es2015",
-      "es2016",
-      "dom"
-    ],
     "strict": true,
     "moduleResolution": "node",
-    "module": "es2015"
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "resources/*"
+      ]
+    }
   },
   "include": [
-    "./resources/assets/scripts/**/*"
+    "./resources/assets/**/*.ts",
+    "./resources/assets/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }

webpack.config.js

@@ -88,7 +88,7 @@ module.exports = {
                 loader: 'vue-loader',
             },
             {
-                test: /\.tsx?$/,
+                test: /\.ts$/,
                 loader: 'ts-loader',
                 exclude: /node_modules/,
                 options: {