🔨 Setup Typescript

package.json

@@ -53,7 +53,8 @@
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^4.5.15",
     "@vue/cli-plugin-pwa": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^4.5.19",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^6.8.0",
@@ -62,6 +63,7 @@
     "npm-run-all": "^4.1.5",
     "sass": "^1.38.0",
     "sass-loader": "^7.1.0",
+    "typescript": "^5.4.4",
     "vue-cli-plugin-yaml": "^1.0.2",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.7.0"

tsconfig.json

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

vue.config.js

@@ -26,6 +26,7 @@ const configureWebpack = {
   module: {
     rules: [
       { test: /.svg$/, loader: 'vue-svg-loader' },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] } },
     ],
   },
 };
@@ -34,7 +35,7 @@ const configureWebpack = {
 const devServer = {
   contentBase: [
     path.join(__dirname, 'public'),
-    path.join(__dirname, 'user-data'),
+    path.join(__dirname, process.env.USER_DATA_DIR || 'user-data'),
   ],
   watchContentBase: true,
   publicPath: '/',