feat(dx): enable TypeScript support

.eslintrc.cjs

@@ -2,7 +2,12 @@ module.exports = {
   root: true,
   env: { node: true },
   parser: 'vue-eslint-parser',
-  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    '@vue/typescript/recommended',
+    'prettier',
+  ],
   rules: {
     'vue/multi-word-component-names': 'off',
     'prefer-const': 'error',

.husky/pre-push

+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint-types

package.json

@@ -4,10 +4,11 @@
   "scripts": {
     "serve": "vite",
     "dev": "vite",
-    "build": "vite build",
-    "lint": "npm run lint-eslint && npm run lint-prettier",
-    "lint-eslint": "eslint --color --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore src/",
+    "build": "vue-tsc --noEmit && vite build",
+    "lint": "npm run lint-eslint && npm run lint-prettier && npm run lint-types",
+    "lint-eslint": "eslint --color --ext .js,.ts,.vue --ignore-path .gitignore --ignore-path .eslintignore src/",
     "lint-prettier": "prettier . --check --ignore-path .gitignore --ignore-path .prettierignore",
+    "lint-types": "vue-tsc --noEmit",
     "format": "npm run lint-prettier -- --write && npm run lint-eslint -- --fix",
     "spell": "npx cspell -c cspell.json **/*.{txt,js,ts,md}",
     "prepare": "husky install"
@@ -38,7 +39,11 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "autoprefixer": "^10.4.4",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
@@ -51,7 +56,9 @@
     "rollup-plugin-visualizer": "^5.8.3",
     "sass": "^1.56.0",
     "tailwindcss": "^3.0.24",
-    "vite": "^4.0.4"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vue-tsc": "^1.0.24"
   },
   "homepage": "https://gitlab.servus.at/aura/dashboard",
   "license": "AGPL-3.0-only"

src/shims-vue.d.ts

+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}