Enable TypeScript and add types to ApiClient and vuex store

.vscode/extensions.json

@@ -1,10 +1,14 @@
 {
     "recommendations": [
         "Vue.volar",
+        "vue.vscode-typescript-vue-plugin",
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode",
         "golang.go",
         "ms-python.python",
         "ms-python.black-formatter"
+    ],
+    "unwantedRecommendations": [
+        "vscode.typescript-language-features",
     ]
 }

README.md

@@ -32,6 +32,7 @@ You likely want to add some arguments to the `go run` command, check `-help`
 ## UI Development
 
 - make sure you can run Pkappa2
+- for development with vscode: disable `@builtin typescript` extension and let [Volar takeover](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode) for full typescript support in Vue files
 - run `yarn serve` in `/web`
 - run `go run cmd/pkappa2/main.go -address :8081` in `/`
 - visit `localhost:8080` in your web browser

web/.eslintrc.js

@@ -2,22 +2,39 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    "vue/setup-compiler-macros": true,
   },
   parserOptions: {
     ecmaVersion: 2021,
-    parser: "@babel/eslint-parser",
+    project: "./tsconfig.json",
+    parser: "@typescript-eslint/parser",
   },
+  ignorePatterns: ["**/*.js", "**/*.vue"],
+  plugins: ["@typescript-eslint", "@typescript-eslint/eslint-plugin"],
+  parser: "vue-eslint-parser",
   extends: [
     // add more generic rulesets here, such as:
     "eslint:recommended",
     // 'plugin:vue/vue3-recommended',
     "plugin:vue/recommended", // Use this if you are using Vue.js 2.x.
     "prettier",
+    "@vue/typescript",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/base",
   ],
   rules: {
     // override/add rules settings here, such as:
     // 'vue/no-unused-vars': 'error'
+    "no-console": "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    // "@typescript-eslint/no-explicit-any": "off",
+    // "@typescript-eslint/no-inferrable-types": "off",
+    // "@typescript-eslint/no-non-null-assertion": "off",
+    // "vue/script-setup-uses-vars": "error",
+    // "vue/v-on-event-hyphenation": "off",
     "vue/multi-word-component-names": "off",
-    "vue/no-reserved-component-names": "off",
+    // "vue/no-reserved-component-names": "off",
   },
 };

web/package.json

@@ -23,16 +23,22 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
+    "@types/vue-moment": "^4.0.7",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli": "^5.0.6",
     "@vue/cli-plugin-babel": "^5.0.6",
     "@vue/cli-plugin-eslint": "^5.0.6",
+    "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "^5.0.6",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.7.0",
     "prettier": "^2.8.3",
     "sass": "~1.32.0",
     "sass-loader": "^13.1.0",
+    "typescript": "~4.5.5",
     "vue-cli-plugin-vuetify": "^2.5.8",
     "vuetify-loader": "^1.9.2"
   },