Convert to TS - WIP (#36)

build works, but inference on implicity any means that this doesn't yet build

src/MyPrayerJournal.Api/wwwroot/legacy-assets-index.html.json

@@ -0,0 +1 @@
+[{"tagName":"script","closeTag":true,"attributes":{"type":"text/javascript","src":"/js/chunk-vendors-legacy.fc4b9fd6.js"}},{"tagName":"script","closeTag":true,"attributes":{"type":"text/javascript","src":"/js/app-legacy.7e012dcd.js"}}]

src/app/.eslintrc.js

@@ -5,13 +5,14 @@ module.exports = {
   },
   'extends': [
     'plugin:vue/essential',
-    '@vue/standard'
+    '@vue/standard',
+    '@vue/typescript'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@typescript-eslint/parser'
   }
 }

src/app/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

src/app/package.json

@@ -1,20 +1,21 @@
 {
   "name": "my-prayer-journal",
   "version": "2.1.1",
+  "private": true,
   "description": "myPrayerJournal - Front End",
   "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
-  "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
     "apistart": "cd ../MyPrayerJournal.Api && dotnet run",
-    "vue": "vue-cli-service build --modern && cd ../MyPrayerJournal.Api && dotnet run",
+    "publish": "vue-cli-service build --modern && cd ../MyPrayerJournal.Api && dotnet publish -c Release -r linux-x64 --self-contained false",
-    "publish": "vue-cli-service build --modern && cd ../MyPrayerJournal.Api && dotnet publish -c Release -r linux-x64 --self-contained false"
+    "vue": "vue-cli-service build --modern && cd ../MyPrayerJournal.Api && dotnet run"
   },
   "dependencies": {
     "auth0-js": "^9.7.3",
     "axios": "^0.19.0",
+    "core-js": "^3.3.2",
     "moment": "^2.18.1",
     "vue": "^2.5.15",
     "vue-material": "^1.0.0-beta-11",
@@ -22,14 +23,25 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.8.0",
-    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@typescript-eslint/parser": "^2.8.0",
-    "@vue/cli-service": "^3.0.0",
+    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.0.5",
+    "@vue/cli-plugin-typescript": "^4.0.5",
+    "@vue/cli-service": "^4.0.5",
+    "@vue/eslint-config-standard": "^5.0.0",
+    "@vue/eslint-config-typescript": "^5.0.0",
+    "eslint": "^6.6.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.0.1",
     "node-sass": "^4.12.0",
     "pug": "^2.0.1",
     "pug-plain-loader": "^1.0.0",
-    "sass-loader": "^7.3.1",
+    "sass-loader": "^8.0.0",
+    "typescript": "^3.7.2",
     "vue-template-compiler": "^2.5.17",
     "webpack-bundle-analyzer": "^3.4.1"
   }

src/app/src/api/index.ts

@@ -15,12 +15,12 @@ export default {
    * Set the bearer token for all future requests
    * @param {string} token The token to use to identify the user to the server
    */
-  setBearer: token => { http.defaults.headers.common['Authorization'] = `Bearer ${token}` },
+  setBearer: token => { http.defaults.headers.common.Authorization = `Bearer ${token}` },
 
   /**
    * Remove the bearer token
    */
-  removeBearer: () => delete http.defaults.headers.common['Authorization'],
+  removeBearer: () => delete http.defaults.headers.common.Authorization,
 
   /**
    * Add a note for a prayer request

src/app/src/components/common/DateFromNow.vue

@@ -39,7 +39,7 @@ export default {
   },
   methods: {
     updateFromNow () {
-      let newFromNow = moment(this.value).fromNow()
+      const newFromNow = moment(this.value).fromNow()
       if (newFromNow !== this.fromNow) this.fromNow = newFromNow
     }
   },

src/app/src/components/request/AnsweredRequests.vue

@@ -42,7 +42,7 @@ export default {
       this.requests = reqs.data
       this.progress.$emit('done')
     } catch (err) {
-      console.error(err)
+      console.error(err) // eslint-disable-line no-console
       this.messages.$emit('error', 'Error loading requests; check console for details')
       this.progress.$emit('done')
     } finally {

src/app/src/components/request/FullRequest.vue

@@ -81,7 +81,7 @@ export default {
       this.request = req.data
       this.progress.$emit('done')
     } catch (e) {
-      console.log(e)
+      console.log(e) // eslint-disable-line no-console
       this.progress.$emit('done')
     }
   },

src/app/src/components/request/NotesEdit.vue

@@ -74,7 +74,7 @@ export default {
         this.priorNotes = notes.data.sort((a, b) => b.asOf - a.asOf)
         this.progress.$emit('done')
       } catch (e) {
-        console.error(e)
+        console.error(e) // eslint-disable-line no-console
         this.progress.$emit('done')
       } finally {
         this.priorNotesLoaded = true
@@ -92,7 +92,7 @@ export default {
         this.messages.$emit('info', 'Added notes')
         this.closeDialog()
       } catch (e) {
-        console.error(e)
+        console.error(e) // eslint-disable-line no-console
         this.progress.$emit('done')
       }
     },

src/app/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/app/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

src/app/src/store/index.ts

@@ -79,7 +79,7 @@ export default new Vuex.Store({
       state.journal.push(newRequest)
     },
     [mutations.REQUEST_UPDATED] (state, request) {
-      let jrnl = state.journal.filter(it => it.requestId !== request.requestId)
+      const jrnl = state.journal.filter(it => it.requestId !== request.requestId)
       if (request.lastStatus !== 'Answered') jrnl.push(request)
       state.journal = jrnl
     },
@@ -137,7 +137,7 @@ export default new Vuex.Store({
       progress.$emit('show', 'indeterminate')
       try {
         await setBearer()
-        let oldReq = (state.journal.filter(req => req.requestId === requestId) || [])[0] || {}
+        const oldReq = (state.journal.filter(req => req.requestId === requestId) || [])[0] || {}
         if (!(status === 'Prayed' && updateText === '')) {
           if (status !== 'Answered' && (oldReq.recurType !== recurType || oldReq.recurCount !== recurCount)) {
             await api.updateRecurrence(requestId, recurType, recurCount)

src/app/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

src/global.json

@@ -0,0 +1,5 @@
+{
+  "sdk": {
+    "version": "3.0.100"
+  }
+}