diff --git a/package-lock.json b/package-lock.json
index a4f3e1530..9b72cb9cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,12 +38,15 @@
         "@nextcloud/stylelint-config": "^3.2.2",
         "@nextcloud/vite-config": "^2.5.2",
         "@playwright/test": "^1.62.1",
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^26.1.2",
+        "@types/qrcode": "^1.5.6",
         "@vue/tsconfig": "^0.9.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-prettier": "^5.5.6",
         "prettier": "^3.9.6",
-        "vite": "^7.3.6"
+        "vite": "^7.3.6",
+        "vue-tsc": "^3.3.7"
       },
       "engines": {
         "node": "^24.0.0",
@@ -502,7 +505,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -519,7 +521,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -536,7 +537,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -553,7 +553,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -570,7 +569,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -587,7 +585,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -604,7 +601,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -621,7 +617,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -638,7 +633,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -655,7 +649,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -672,7 +665,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -689,7 +681,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -706,7 +697,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -723,7 +713,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -740,7 +729,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -757,7 +745,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -774,7 +761,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -791,7 +777,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -808,7 +793,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -825,7 +809,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -842,7 +825,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -859,7 +841,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -876,7 +857,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -893,7 +873,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -910,7 +889,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -927,7 +905,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2020,7 +1997,6 @@
       "version": "2.5.6",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
       "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2061,7 +2037,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2083,7 +2058,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2105,7 +2079,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2127,7 +2100,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2149,7 +2121,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2171,7 +2142,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2193,7 +2163,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2215,7 +2184,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2237,7 +2205,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2259,7 +2226,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2281,7 +2247,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2303,7 +2268,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2325,7 +2289,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2517,7 +2480,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2531,7 +2493,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2545,7 +2506,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2559,7 +2519,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2573,7 +2532,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2587,7 +2545,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2601,7 +2558,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2615,7 +2571,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2629,7 +2584,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2643,7 +2597,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2657,7 +2610,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2671,7 +2623,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2685,7 +2636,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2699,7 +2649,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2713,7 +2662,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2727,7 +2675,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2741,7 +2688,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2755,7 +2701,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2769,7 +2714,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2783,7 +2727,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2797,7 +2740,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2811,7 +2753,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2825,7 +2766,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2839,7 +2779,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2853,7 +2792,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3169,6 +3107,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -3178,6 +3134,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -3188,12 +3151,22 @@
       "version": "26.1.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.2.tgz",
       "integrity": "sha512-Vu4a5UFA9rIIFJ7rB/Vaafh9lrCQszopTCx6KjFboXTGQbPNasehVR5TEiithSDGyd1DEiUByggTZsg8jukeIg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~8.3.0"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz",
@@ -5402,7 +5375,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "peer": true,
@@ -6660,7 +6632,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -7224,7 +7195,7 @@
       "version": "5.1.9",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
       "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true
     },
@@ -7410,7 +7381,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -7450,7 +7421,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -8947,7 +8918,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "peer": true
@@ -10665,7 +10635,7 @@
       "version": "1.100.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz",
       "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12000,7 +11970,7 @@
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
       "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unicorn-magic": {
@@ -12478,7 +12448,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12495,7 +12464,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12512,7 +12480,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12529,7 +12496,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12546,7 +12512,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12563,7 +12528,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12580,7 +12544,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12597,7 +12560,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12614,7 +12576,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12631,7 +12592,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12648,7 +12608,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12665,7 +12624,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12682,7 +12640,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12699,7 +12656,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12716,7 +12672,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12733,7 +12688,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12750,7 +12704,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12767,7 +12720,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12784,7 +12736,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12801,7 +12752,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12818,7 +12768,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12835,7 +12784,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12852,7 +12800,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12869,7 +12816,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12886,7 +12832,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12903,7 +12848,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -12959,7 +12903,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -13106,6 +13049,46 @@
         }
       }
     },
+    "node_modules/vue-tsc": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.3.7.tgz",
+      "integrity": "sha512-+C+rgD49wAQ5bUTl2sp5a8Bzg4YoldMNXM+g7CFe604MYcQ8PrZPMQhIjJSzKXtPBCa+C5ayMipqjbA7splekQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.28",
+        "@vue/language-core": "3.3.7"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/vue-tsc/node_modules/@vue/language-core": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.3.7.tgz",
+      "integrity": "sha512-LzmkKinXAMMoh8Jfi/jMUSDUjuPdv8mynH5WJGKfXyZtDw3hQ6GBaoI6Bcnl/Xqlu32q/0Z6i/trp4VXykzyLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.2.1",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.4"
+      }
+    },
+    "node_modules/vue-tsc/node_modules/alien-signals": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.2.1.tgz",
+      "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/wait-on": {
       "version": "9.0.10",
       "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-9.0.10.tgz",
diff --git a/package.json b/package.json
index cf5e908b6..2b42b25b8 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "lint:fix": "eslint --ext .js,.ts,.vue src --fix",
     "start:nextcloud": "node playwright/start-nextcloud-server.mjs",
     "stylelint": "stylelint \"src/**/*.scss\" \"src/**/*.vue\"",
-    "stylelint:fix": "stylelint \"src/**/*.scss\" \"src/**/*.vue\" --fix"
+    "stylelint:fix": "stylelint \"src/**/*.scss\" \"src/**/*.vue\" --fix",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
@@ -58,12 +59,15 @@
     "@nextcloud/stylelint-config": "^3.2.2",
     "@nextcloud/vite-config": "^2.5.2",
     "@playwright/test": "^1.62.1",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^26.1.2",
+    "@types/qrcode": "^1.5.6",
     "@vue/tsconfig": "^0.9.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
     "prettier": "^3.9.6",
-    "vite": "^7.3.6"
+    "vite": "^7.3.6",
+    "vue-tsc": "^3.3.7"
   },
   "engines": {
     "node": "^24.0.0",
diff --git a/src/Forms.vue b/src/Forms.vue
index 153006815..55f6c988e 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -145,16 +145,20 @@
 	</NcContent>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsForm } from './models/Entities.d.ts'
+
 import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
 import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import { useIsMobile } from '@nextcloud/vue'
+import { defineComponent } from 'vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
@@ -170,14 +174,14 @@ import AppNavigationForm from './components/AppNavigationForm.vue'
 import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import Sidebar from './views/Sidebar.vue'
 import FormsIcon from '../img/forms-dark.svg?raw'
-import PermissionTypes from './mixins/PermissionTypes.ts'
+import { PERMISSION_TYPES } from './mixins/PermissionTypes.ts'
 import { FormState } from './models/Constants.ts'
 import logger from './utils/Logger.ts'
 import OcsResponse2Data from './utils/OcsResponse2Data.ts'
 
-const appName = 'forms'
+const formsAppName = 'forms'
 
-export default {
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Forms',
 
@@ -204,19 +208,27 @@ export default {
 		const loading = ref(true)
 		const sidebarOpened = ref(false)
 		const sidebarActive = ref('forms-sharing')
-		const forms = ref([])
-		const allSharedForms = ref([])
+		const forms = ref<FormsForm[]>([])
+		const allSharedForms = ref<FormsForm[]>([])
 		const showArchivedForms = ref(false)
-		const canCreateForms = ref(loadState(appName, 'appConfig').canCreateForms)
-		const allowComments = ref(loadState(appName, 'appConfig').allowComments)
-		const deletedFormHash = ref(null)
-
-		const PERMISSION_TYPES = PermissionTypes.data().PERMISSION_TYPES
-
-		const routeHash = computed(() => route.params.hash)
+		const appConfig = loadState(formsAppName, 'appConfig') as {
+			canCreateForms?: boolean
+			allowComments?: boolean
+		}
+		const canCreateForms = ref(Boolean(appConfig?.canCreateForms))
+		const allowComments = ref(Boolean(appConfig?.allowComments))
+		const deletedFormHash = ref<string | null>(null)
+
+		const routeHash = computed<string | undefined>(() => {
+			const hash = route.params.hash
+			if (Array.isArray(hash)) {
+				return hash[0]
+			}
+			return hash as string | undefined
+		})
 
-		const routeAllowed = computed(() => {
-			if (loading.value && loadState(appName, 'formId') === 'invalid') {
+		const routeAllowed = computed<boolean>(() => {
+			if (loading.value && loadState(formsAppName, 'formId') === 'invalid') {
 				return false
 			}
 
@@ -239,16 +251,17 @@ export default {
 			}
 
 			const resultRoutes = ['results', 'results.summary', 'results.responses']
-			if (resultRoutes.includes(route.name)) {
+			if (resultRoutes.includes(String(route.name ?? ''))) {
 				return (
-					form.permissions.includes('results') || form.submissionCount > 0
+					form.permissions.includes('results')
+					|| (form.submissionCount ?? 0) > 0
 				)
 			}
 
-			return form?.permissions.includes(route.name)
+			return form?.permissions.includes(String(route.name ?? ''))
 		})
 
-		const selectedForm = computed(() => {
+		const selectedForm = computed<FormsForm | Record<string, never>>(() => {
 			if (routeAllowed.value) {
 				return (
 					[...forms.value, ...allSharedForms.value].find(
@@ -259,7 +272,7 @@ export default {
 			return {}
 		})
 
-		const updateSelectedForm = (form) => {
+		const updateSelectedForm = (form: FormsForm): void => {
 			sidebarOpened.value = false
 
 			const index = forms.value.findIndex((f) => f.hash === form.hash)
@@ -310,7 +323,7 @@ export default {
 			}
 		}
 
-		const openSharing = (hash) => {
+		const openSharing = (hash: string): void => {
 			if (hash !== routeHash.value) {
 				router.push({ name: 'edit', params: { hash } })
 			}
@@ -357,7 +370,7 @@ export default {
 		 * Removes localStorage keys matching the pattern `nextcloud_forms_*_activeResponseView`
 		 * where the form hash no longer exists in the current forms list.
 		 */
-		const cleanupStaleLocalStorageEntries = () => {
+		const cleanupStaleLocalStorageEntries = (): void => {
 			try {
 				// Get all current form hashes
 				const currentFormHashes = new Set(
@@ -402,10 +415,10 @@ export default {
 		/**
 		 * Fetch a partial form by its hash after initial load completes.
 		 *
-		 * @param {string} hash The hash of the form to fetch.
+		 * @param hash The hash of the form to fetch.
 		 */
-		async function fetchPartialForm(hash) {
-			await new Promise((resolve) => {
+		async function fetchPartialForm(hash: string): Promise<void> {
+			await new Promise<void>((resolve) => {
 				const wait = () => {
 					if (loading.value) {
 						window.setTimeout(wait, 250)
@@ -425,21 +438,29 @@ export default {
 				try {
 					const response = await axios.get(
 						generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-							id: loadState(appName, 'formId'),
+							id: loadState(formsAppName, 'formId'),
 						}),
 					)
-					const form = OcsResponse2Data(response)
+					const form = OcsResponse2Data<FormsForm>(response)
 
 					if (
 						form.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT)
 					) {
 						allSharedForms.value.push(form)
 					}
-				} catch (error) {
+				} catch (error: unknown) {
 					logger.error(`Form ${hash} not found`, { error })
 					showError(t('forms', 'Form not found'))
 
-					if ([403, 404].includes(error.response?.status)) {
+					if (
+						typeof error === 'object'
+						&& error !== null
+						&& 'response' in error
+						&& [403, 404].includes(
+							(error as { response?: { status?: number } }).response
+								?.status ?? 0,
+						)
+					) {
 						if (route.name !== 'root') {
 							router.push({ name: 'root' })
 						}
@@ -455,7 +476,7 @@ export default {
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms'),
 				)
-				const newForm = OcsResponse2Data(response)
+				const newForm = OcsResponse2Data<FormsForm>(response)
 				forms.value.unshift(newForm)
 				router.push({
 					name: 'edit',
@@ -468,14 +489,14 @@ export default {
 			}
 		}
 
-		const onCloneForm = async (id) => {
+		const onCloneForm = async (id: number): Promise<void> => {
 			try {
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms?fromId={id}', {
 						id,
 					}),
 				)
-				const newForm = OcsResponse2Data(response)
+				const newForm = OcsResponse2Data<FormsForm>(response)
 				forms.value.unshift(newForm)
 				router.push({
 					name: 'edit',
@@ -488,8 +509,11 @@ export default {
 			}
 		}
 
-		const onDeleteForm = async (id) => {
+		const onDeleteForm = async (id: number): Promise<void> => {
 			const formIndex = forms.value.findIndex((form) => form.id === id)
+			if (formIndex < 0) {
+				return
+			}
 			const deletedHash = forms.value[formIndex].hash
 
 			forms.value.splice(formIndex, 1)
@@ -515,14 +539,14 @@ export default {
 		// Reset deletedFormHash when navigating away from the deleted form
 		watch(
 			() => route.name,
-			(newRouteName) => {
+			(newRouteName: string | symbol | null | undefined) => {
 				if (newRouteName === 'root') {
 					deletedFormHash.value = null
 				}
 			},
 		)
 
-		const onLastUpdatedByEventBus = (id) => {
+		const onLastUpdatedByEventBus = (id: number): void => {
 			const formIndex = forms.value.findIndex((form) => form.id === id)
 			if (formIndex !== -1) {
 				forms.value[formIndex].lastUpdated = moment().unix()
@@ -536,19 +560,34 @@ export default {
 			}
 		}
 
+		const onLastUpdatedByEventBusEvent = (event: unknown): void => {
+			const id = Number(event)
+			if (Number.isFinite(id)) {
+				onLastUpdatedByEventBus(id)
+			}
+		}
+
+		const onOwnershipTransferredEvent = (event: unknown): void => {
+			const id = Number(event)
+			if (Number.isFinite(id)) {
+				void onDeleteForm(id)
+			}
+		}
+
 		onMounted(async () => {
 			await loadForms()
 			cleanupStaleLocalStorageEntries()
-			subscribe('forms:last-updated:set', onLastUpdatedByEventBus)
-			subscribe('forms:ownership-transfered', onDeleteForm)
+			subscribe('forms:last-updated:set', onLastUpdatedByEventBusEvent)
+			subscribe('forms:ownership-transfered', onOwnershipTransferredEvent)
 		})
 
 		onUnmounted(() => {
-			unsubscribe('forms:last-updated:set', onLastUpdatedByEventBus)
-			unsubscribe('forms:ownership-transfered', onDeleteForm)
+			unsubscribe('forms:last-updated:set', onLastUpdatedByEventBusEvent)
+			unsubscribe('forms:ownership-transfered', onOwnershipTransferredEvent)
 		})
 
 		return {
+			t,
 			loading,
 			sidebarOpened,
 			sidebarActive,
@@ -580,7 +619,7 @@ export default {
 			FormsIcon,
 		}
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/FormsEmptyContent.vue b/src/FormsEmptyContent.vue
index 71836c83a..60b0f4415 100644
--- a/src/FormsEmptyContent.vue
+++ b/src/FormsEmptyContent.vue
@@ -17,16 +17,20 @@
 	</NcContent>
 </template>
 
-<script>
+<script lang="ts">
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import FormsIcon from '../img/forms-dark.svg?raw'
 
-export default {
+const formsAppName = 'forms'
+
+export default defineComponent({
 	name: 'FormsEmptyContent',
 
 	components: {
@@ -58,18 +62,21 @@ export default {
 
 					icon: IconCheck,
 				},
-			},
+			} as Record<
+				string,
+				{ title: string; description: string; icon: string }
+			>,
 
-			renderAs: loadState(appName, 'renderAs'),
+			renderAs: loadState(formsAppName, 'renderAs') as string,
 		}
 	},
 
 	computed: {
-		currentModel() {
+		currentModel(): { title: string; description: string; icon: string } {
 			return this.renderModels[this.renderAs]
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/FormsSettings.vue b/src/FormsSettings.vue
index 78d09ad60..06b63224d 100644
--- a/src/FormsSettings.vue
+++ b/src/FormsSettings.vue
@@ -111,11 +111,13 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
@@ -123,7 +125,27 @@ import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 import logger from './utils/Logger.ts'
 
-export default {
+const formsAppName = 'forms'
+
+interface AppConfig {
+	restrictCreation: boolean
+	creationAllowedGroups: GroupOption[]
+	allowConfirmationEmail: boolean
+	allowComments: boolean
+	allowCustomPublicShareTokens: boolean
+	allowPermitAll: boolean
+	allowPublicLink: boolean
+	allowShowToAll: boolean
+	isMailConfigured: boolean
+	confirmationEmailRateLimit?: number
+}
+
+interface GroupOption {
+	groupId: string
+	displayName?: string
+}
+
+export default defineComponent({
 	name: 'FormsSettings',
 
 	components: {
@@ -134,13 +156,28 @@ export default {
 		NcSettingsSection,
 	},
 
-	data() {
+	setup() {
 		return {
-			appConfig: loadState(appName, 'appConfig'),
-			availableGroups: loadState(appName, 'availableGroups'),
+			t,
+		}
+	},
+
+	data(): {
+		appConfig: AppConfig
+		availableGroups: GroupOption[]
+		confirmationEmailRateLimitInput: string
+		loading: Record<string, boolean>
+	} {
+		return {
+			appConfig: loadState(formsAppName, 'appConfig') as AppConfig,
+			availableGroups: loadState(
+				formsAppName,
+				'availableGroups',
+			) as GroupOption[],
 
 			confirmationEmailRateLimitInput: String(
-				loadState(appName, 'appConfig').confirmationEmailRateLimit ?? 3,
+				(loadState(formsAppName, 'appConfig') as AppConfig)
+					.confirmationEmailRateLimit ?? 3,
 			),
 
 			loading: {},
@@ -155,15 +192,15 @@ export default {
 		 * - Update value via api
 		 * - Only after everything is done (incl. possible reload on failure), unset loading.
 		 *
-		 * @param {boolean|Array} newVal The resp. new Value to store.
+		 * @param newVal The resp. new Value to store.
 		 */
-		async onRestrictCreationChange(newVal) {
+		async onRestrictCreationChange(newVal: boolean): Promise<void> {
 			this.loading.restrictCreation = true
 			await this.saveAppConfig('restrictCreation', newVal)
 			this.loading.restrictCreation = false
 		},
 
-		async onCreationAllowedGroupsChange(newVal) {
+		async onCreationAllowedGroupsChange(newVal: GroupOption[]): Promise<void> {
 			this.loading.creationAllowedGroups = true
 			await this.saveAppConfig(
 				'creationAllowedGroups',
@@ -172,37 +209,37 @@ export default {
 			this.loading.creationAllowedGroups = false
 		},
 
-		async onAllowPublicLinkChange(newVal) {
+		async onAllowPublicLinkChange(newVal: boolean): Promise<void> {
 			this.loading.allowPublicLink = true
 			await this.saveAppConfig('allowPublicLink', newVal)
 			this.loading.allowPublicLink = false
 		},
 
-		async onAllowCustomPublicShareTokensChange(newVal) {
+		async onAllowCustomPublicShareTokensChange(newVal: boolean): Promise<void> {
 			this.loading.allowCustomPublicShareTokens = true
 			await this.saveAppConfig('allowCustomPublicShareTokens', newVal)
 			this.loading.allowCustomPublicShareTokens = false
 		},
 
-		async onAllowPermitAllChange(newVal) {
+		async onAllowPermitAllChange(newVal: boolean): Promise<void> {
 			this.loading.allowPermitAll = true
 			await this.saveAppConfig('allowPermitAll', newVal)
 			this.loading.allowPermitAll = false
 		},
 
-		async onAllowShowToAllChange(newVal) {
+		async onAllowShowToAllChange(newVal: boolean): Promise<void> {
 			this.loading.allowShowToAll = true
 			await this.saveAppConfig('allowShowToAll', newVal)
 			this.loading.allowShowToAll = false
 		},
 
-		async onAllowConfirmationEmailChange(newVal) {
+		async onAllowConfirmationEmailChange(newVal: boolean): Promise<void> {
 			this.loading.allowConfirmationEmail = true
 			await this.saveAppConfig('allowConfirmationEmail', newVal)
 			this.loading.allowConfirmationEmail = false
 		},
 
-		async onConfirmationEmailRateLimitChange() {
+		async onConfirmationEmailRateLimitChange(): Promise<void> {
 			const value = Math.max(
 				1,
 				Math.min(
@@ -214,7 +251,7 @@ export default {
 			await this.saveAppConfig('confirmationEmailRateLimit', value)
 		},
 
-		async onAllowCommentsChange(newVal) {
+		async onAllowCommentsChange(newVal: boolean): Promise<void> {
 			this.loading.allowComments = true
 			await this.saveAppConfig('allowComments', newVal)
 			this.loading.allowComments = false
@@ -223,10 +260,10 @@ export default {
 		/**
 		 * Save a key-value pair to the appConfig.
 		 *
-		 * @param {string} configKey The key to store. Must be one of the used configKeys (See php-constants).
-		 * @param {boolean|Array} configValue The value to store.
+		 * @param configKey The key to store. Must be one of the used configKeys (See php-constants).
+		 * @param configValue The value to store.
 		 */
-		async saveAppConfig(configKey, configValue) {
+		async saveAppConfig(configKey: string, configValue: unknown): Promise<void> {
 			try {
 				await axios.patch(generateUrl('apps/forms/config'), {
 					configKey,
@@ -242,7 +279,7 @@ export default {
 		/**
 		 * Reload the current AppConfig. Used to restore in case of saving-failure.
 		 */
-		async reloadAppConfig() {
+		async reloadAppConfig(): Promise<void> {
 			try {
 				const resp = await axios.get(generateUrl('apps/forms/config'))
 				this.appConfig = resp.data
@@ -252,7 +289,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/FormsSubmit.vue b/src/FormsSubmit.vue
index f3c32afe9..b47beb5a7 100644
--- a/src/FormsSubmit.vue
+++ b/src/FormsSubmit.vue
@@ -14,13 +14,18 @@
 	</NcContent>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsForm } from './models/Entities.d.ts'
+
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
+import { defineComponent } from 'vue'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import Submit from './views/Submit.vue'
 
-export default {
+const formsAppName = 'forms'
+
+export default defineComponent({
 	name: 'FormsSubmit',
 
 	components: {
@@ -30,35 +35,43 @@ export default {
 
 	data() {
 		return {
-			form: loadState('forms', 'form'),
-			isLoggedIn: loadState('forms', 'isLoggedIn'),
-			isEmbedded: loadState('forms', 'isEmbedded', false),
-			shareHash: loadState('forms', 'shareHash'),
+			form: loadState(formsAppName, 'form') as FormsForm,
+			isLoggedIn: loadState(formsAppName, 'isLoggedIn') as boolean,
+			isEmbedded: loadState(formsAppName, 'isEmbedded', false) as boolean,
+			shareHash: loadState(formsAppName, 'shareHash') as string,
 		}
 	},
 
 	unmounted() {
-		unsubscribe('forms:last-updated:set', this.emitSubmitMessage)
+		unsubscribe('forms:last-updated:set', this.onSubmitMessageEvent)
 	},
 
 	mounted() {
 		if (this.isEmbedded) {
-			subscribe('forms:last-updated:set', this.emitSubmitMessage)
+			subscribe('forms:last-updated:set', this.onSubmitMessageEvent)
 
 			// Communicate window size to parent window in iframes
 			const resizeObserver = new ResizeObserver((entries) => {
-				this.emitResizeMessage(entries[0].target)
+				this.emitResizeMessage(entries[0].target as HTMLElement)
+			})
+			this.$nextTick(() => {
+				const formEl = document.querySelector('.app-forms-embedded form')
+				if (formEl) {
+					resizeObserver.observe(formEl)
+				}
 			})
-			this.$nextTick(() =>
-				resizeObserver.observe(
-					document.querySelector('.app-forms-embedded form'),
-				),
-			)
 		}
 	},
 
 	methods: {
-		emitSubmitMessage(id) {
+		onSubmitMessageEvent(event: unknown): void {
+			const id = Number(event)
+			if (Number.isFinite(id)) {
+				this.emitSubmitMessage(id)
+			}
+		},
+
+		emitSubmitMessage(id: number): void {
 			window.parent?.postMessage(
 				{
 					type: 'form-saved',
@@ -71,9 +84,9 @@ export default {
 		},
 
 		/**
-		 * @param {HTMLElement} target Target of which the size should be communicated
+		 * @param target Target of which the size should be communicated
 		 */
-		emitResizeMessage(target) {
+		emitResizeMessage(target: HTMLElement): void {
 			const rect = target.getBoundingClientRect()
 			let height = rect.top + target.scrollHeight
 			let width = target.scrollWidth
@@ -82,12 +95,15 @@ export default {
 			if (height === 0) {
 				target = document.querySelector(
 					'.app-forms-embedded main .empty-content',
-				)
+				) as HTMLElement
 				height = target.getBoundingClientRect().top + target.scrollHeight
 				width = Math.max(
 					target.scrollWidth,
-					document.querySelector('.app-forms-embedded main header')
-						.scrollWidth,
+					(
+						document.querySelector(
+							'.app-forms-embedded main header',
+						) as HTMLElement
+					).scrollWidth,
 				)
 			}
 
@@ -103,5 +119,5 @@ export default {
 			)
 		},
 	},
-}
+})
 </script>
diff --git a/src/components/AddQuestionMenu.vue b/src/components/AddQuestionMenu.vue
index bd2eabbf4..18d07aedc 100644
--- a/src/components/AddQuestionMenu.vue
+++ b/src/components/AddQuestionMenu.vue
@@ -61,16 +61,18 @@
 	</NcActions>
 </template>
 
-<script>
+<script lang="ts">
 import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
 import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
-export default {
+export default defineComponent({
 	name: 'AddQuestionMenu',
 
 	components: {
@@ -98,6 +100,7 @@ export default {
 
 	setup() {
 		return {
+			t,
 			IconChevronLeft,
 			IconPlus,
 		}
@@ -105,24 +108,24 @@ export default {
 
 	data() {
 		return {
-			activeQuestionType: null,
-			openLocal: this.open,
+			activeQuestionType: null as string | null,
+			openLocal: this.open as boolean,
 		}
 	},
 
 	watch: {
-		open(v) {
+		open(v: boolean) {
 			this.openLocal = v
 		},
 
-		openLocal(v) {
+		openLocal(v: boolean) {
 			this.$emit('update:open', v)
 			if (!v) this.activeQuestionType = null
 		},
 	},
 
 	methods: {
-		onPrimaryClick(answer, type, position) {
+		onPrimaryClick(answer: unknown, type: string, position: number | null) {
 			if (this.hasSubtypes(answer)) {
 				this.activeQuestionType = type
 				return
@@ -131,12 +134,16 @@ export default {
 			this.openLocal = false
 		},
 
-		onSubtypeClick(type, subtype, position) {
+		onSubtypeClick(
+			type: string,
+			subtype: string | number,
+			position: number | null,
+		) {
 			this.$emit('addQuestion', type, subtype, position)
 			this.openLocal = false
 		},
 	},
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 232bea551..b50c71434 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -97,7 +97,10 @@
 	</NcListItem>
 </template>
 
-<script>
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { FormsForm } from '../models/Entities.d.ts'
+
 import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
 import IconPoll from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
@@ -109,8 +112,10 @@ import IconArchiveOff from '@material-symbols/svg-400/outlined/unarchive.svg?raw
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showConfirmation, showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
@@ -122,7 +127,9 @@ import PermissionTypes from '../mixins/PermissionTypes.ts'
 import { FormState } from '../models/Constants.ts'
 import logger from '../utils/Logger.ts'
 
-export default {
+type NavigationTarget = 'submit' | 'formRoot'
+
+export default defineComponent({
 	name: 'AppNavigationForm',
 
 	components: {
@@ -138,7 +145,7 @@ export default {
 
 	props: {
 		form: {
-			type: Object,
+			type: Object as PropType<FormsForm>,
 			required: true,
 		},
 
@@ -158,6 +165,7 @@ export default {
 
 	setup() {
 		return {
+			t,
 			FormsIcon,
 			IconArchive,
 			IconArchiveOff,
@@ -172,63 +180,65 @@ export default {
 
 	data() {
 		return {
-			loading: false,
+			loading: false as boolean,
 		}
 	},
 
 	computed: {
-		canEdit() {
+		canEdit(): boolean {
 			return this.form.permissions.includes(
 				this.PERMISSION_TYPES.PERMISSION_EDIT,
 			)
 		},
 
-		canSeeResults() {
+		canSeeResults(): boolean {
 			return (
 				this.form.permissions.includes(
 					this.PERMISSION_TYPES.PERMISSION_RESULTS,
-				) || this.form.submissionCount > 0
+				) || (this.form.submissionCount ?? 0) > 0
 			)
 		},
 
 		/**
 		 * Check if form is current form and set active
 		 */
-		isActive() {
-			return this.form.hash === this.$route.params.hash
+		isActive(): boolean {
+			return this.form.hash === String(this.$route.params.hash)
 		},
 
 		/**
 		 * Check if the form is archived
 		 */
-		isArchived() {
+		isArchived(): boolean {
 			return this.form.state === FormState.FormArchived
 		},
 
 		/**
 		 * Check if form is expired
 		 */
-		isExpired() {
-			return this.form.expires && moment().unix() > this.form.expires
+		isExpired(): boolean {
+			return Boolean(this.form.expires && moment().unix() > this.form.expires)
 		},
 
 		/**
 		 * Check if form is locked
 		 */
-		isFormLocked() {
+		isFormLocked(): boolean {
+			const currentUserUid = getCurrentUser()?.uid ?? ''
+			const lockedUntil = this.form.lockedUntil ?? -1
 			return (
-				this.form.lockedUntil === 0
-				|| (this.form.lockedUntil > moment().unix()
-					&& this.form.lockedBy !== getCurrentUser().uid)
+				lockedUntil === 0
+				|| (lockedUntil > moment().unix()
+					&& this.form.lockedBy !== currentUserUid)
 			)
 		},
 
 		/**
 		 * Return form title, or placeholder if not set
 		 *
-		 * @return {string}
+		 * @return
 		 */
-		formTitle() {
+		formTitle(): string {
 			if (this.form.title) {
 				return this.form.title
 			}
@@ -238,7 +248,7 @@ export default {
 		/**
 		 * Return expiration details for subtitle
 		 */
-		formSubtitle() {
+		formSubtitle(): string {
 			if (this.form.state === FormState.FormClosed) {
 				// TRANSLATORS: The form was closed manually so it does not take new submissions
 				return t('forms', 'Form closed')
@@ -260,16 +270,16 @@ export default {
 		/**
 		 * Return, if form has Subtitle
 		 */
-		hasSubtitle() {
+		hasSubtitle(): boolean {
 			return this.formSubtitle !== ''
 		},
 
 		/**
 		 * Route to use, depending on readOnly
 		 *
-		 * @return {string} Route to 'submit' or 'formRoot'
+		 * @return Route to 'submit' or 'formRoot'
 		 */
-		routerTarget() {
+		routerTarget(): NavigationTarget {
 			if (this.readOnly) {
 				return 'submit'
 			}
@@ -282,19 +292,19 @@ export default {
 		/**
 		 * Closes the App-Navigation on mobile-devices
 		 */
-		mobileCloseNavigation() {
+		mobileCloseNavigation(): void {
 			this.$emit('mobileCloseNavigation')
 		},
 
-		onShareForm() {
+		onShareForm(): void {
 			this.$emit('openSharing', this.form.hash)
 		},
 
-		onCloneForm() {
+		onCloneForm(): void {
 			this.$emit('clone', this.form.id)
 		},
 
-		async onConfirmDelete() {
+		async onConfirmDelete(): Promise<void> {
 			const shouldDelete = await showConfirmation({
 				name: t('forms', 'Delete form'),
 				text: t('forms', 'Are you sure you want to delete {title}?', {
@@ -309,7 +319,7 @@ export default {
 			}
 		},
 
-		async onToggleArchive() {
+		async onToggleArchive(): Promise<void> {
 			try {
 				// TODO: add loading status feedback ?
 				await axios.patch(
@@ -324,8 +334,8 @@ export default {
 						},
 					},
 				)
-				// eslint-disable-next-line vue/no-mutating-props
-				this.form.state = this.isArchived
+
+				;(this.form as FormsForm).state = this.isArchived
 					? FormState.FormClosed
 					: FormState.FormArchived
 			} catch (error) {
@@ -336,7 +346,7 @@ export default {
 			}
 		},
 
-		async onDeleteForm() {
+		async onDeleteForm(): Promise<void> {
 			this.loading = true
 			try {
 				await axios.delete(
@@ -346,8 +356,9 @@ export default {
 				)
 				this.$emit('delete', this.form.id)
 			} catch (error) {
+				const response = (error as { response?: unknown }).response
 				logger.error(`Error while deleting ${this.formTitle}`, {
-					error: error.response,
+					error: response,
 				})
 				showError(
 					t('forms', 'Error while deleting {title}', {
@@ -359,5 +370,5 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
diff --git a/src/components/ArchivedFormsModal.vue b/src/components/ArchivedFormsModal.vue
index 5cc33b475..a21320ff3 100644
--- a/src/components/ArchivedFormsModal.vue
+++ b/src/components/ArchivedFormsModal.vue
@@ -23,8 +23,11 @@
 	</NcDialog>
 </template>
 
-<script>
-import { translate as t } from '@nextcloud/l10n'
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { FormsForm } from '../models/Entities.d.ts'
+
+import { t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import AppNavigationForm from './AppNavigationForm.vue'
@@ -44,7 +47,7 @@ export default defineComponent({
 		},
 
 		forms: {
-			type: Array,
+			type: Array as PropType<FormsForm[]>,
 			required: true,
 		},
 	},
@@ -53,7 +56,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			shownForms: [],
+			shownForms: [] as FormsForm[],
 		}
 	},
 
@@ -69,12 +72,12 @@ export default defineComponent({
 	methods: {
 		t,
 
-		onCloneForm(formId) {
+		onCloneForm(formId: number): void {
 			this.$emit('clone', formId)
 			this.$emit('update:open', false)
 		},
 
-		onDelete(form) {
+		onDelete(form: FormsForm): void {
 			this.shownForms = this.shownForms.filter(({ id }) => id !== form.id)
 		},
 	},
diff --git a/src/components/OptionInputDialog.vue b/src/components/OptionInputDialog.vue
index 413682163..935b5ebfc 100644
--- a/src/components/OptionInputDialog.vue
+++ b/src/components/OptionInputDialog.vue
@@ -27,10 +27,10 @@
 	</NcDialog>
 </template>
 
-<script>
+<script lang="ts">
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import { showError } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
@@ -56,12 +56,17 @@ export default defineComponent({
 
 	data() {
 		return {
-			enteredOptions: '',
+			enteredOptions: '' as string,
 		}
 	},
 
 	computed: {
-		buttons() {
+		buttons(): Array<{
+			label: string
+			callback: () => void
+			type?: 'primary'
+			icon?: string
+		}> {
 			return [
 				{
 					label: t('forms', 'Cancel'),
@@ -80,9 +85,9 @@ export default defineComponent({
 			]
 		},
 
-		multipleOptions() {
+		multipleOptions(): string[] {
 			const allOptions = this.enteredOptions.split(/\r?\n/g)
-			return allOptions.filter((answer) => {
+			return allOptions.filter((answer: string) => {
 				return answer.trim().length > 0
 			})
 		},
@@ -91,7 +96,7 @@ export default defineComponent({
 	methods: {
 		t,
 
-		onMultipleOptions() {
+		onMultipleOptions(): void {
 			this.$emit('update:open', false)
 			if (this.multipleOptions.length > 1) {
 				// extract all options entries to parent
diff --git a/src/components/PaginationToolbar.vue b/src/components/PaginationToolbar.vue
index f84d0b848..7027c2621 100644
--- a/src/components/PaginationToolbar.vue
+++ b/src/components/PaginationToolbar.vue
@@ -63,16 +63,18 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
 import IconChevronRight from '@material-symbols/svg-400/outlined/chevron_right.svg?raw'
 import PageFirstIcon from '@material-symbols/svg-400/outlined/first_page.svg?raw'
 import PageLastIcon from '@material-symbols/svg-400/outlined/last_page.svg?raw'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 
-export default {
+export default defineComponent({
 	name: 'PaginationToolbar',
 	components: {
 		NcIconSvgWrapper,
@@ -105,32 +107,33 @@ export default {
 			IconChevronRight,
 			PageFirstIcon,
 			PageLastIcon,
+			t,
 		}
 	},
 
 	computed: {
-		allPageNumbersArray() {
+		allPageNumbersArray(): number[] {
 			return Array.from(
 				{ length: this.totalPages },
 				(value, index) => 1 + index,
 			)
 		},
 
-		totalPages() {
+		totalPages(): number {
 			return Math.max(1, Math.ceil(this.totalItemsCount / this.limit))
 		},
 
 		pageNumber: {
-			get() {
+			get(): number {
 				return Math.floor(this.offset / this.limit) + 1
 			},
 
-			set(pageNumber) {
-				this.$emit('update:offset', (pageNumber - 1) * this.limit)
+			set(pageNumber: number) {
+				this.$emit('update:offset', (Number(pageNumber) - 1) * this.limit)
 			},
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/PillMenu.vue b/src/components/PillMenu.vue
index c177964f2..e05b34805 100644
--- a/src/components/PillMenu.vue
+++ b/src/components/PillMenu.vue
@@ -7,31 +7,44 @@
 	<div class="pill-menu">
 		<NcRadioGroup
 			:label="groupLabel"
-			:modelValue="active.id"
+			:modelValue="activeId"
 			hideLabel
 			@update:modelValue="onUpdateActive">
 			<NcRadioGroupButton
-				v-for="option of options"
-				:key="option.id"
-				:value="option.id"
-				:aria-label="isMobile && option.icon ? option.ariaLabel : undefined"
-				:label="!isMobile || !option.icon ? option.title : undefined"
-				:disabled="disabled || option.disabled">
-				<template v-if="option.icon" #icon>
-					<NcIconSvgWrapper :svg="option.icon" />
+				v-for="pillOption of pillOptions"
+				:key="pillOption.id"
+				:value="String(pillOption.id)"
+				:aria-label="
+					isMobile && pillOption.icon ? pillOption.ariaLabel : undefined
+				"
+				:label="!isMobile || !pillOption.icon ? pillOption.title : undefined"
+				:disabled="disabled || pillOption.disabled">
+				<template v-if="pillOption.icon" #icon>
+					<NcIconSvgWrapper :svg="pillOption.icon" />
 				</template>
 			</NcRadioGroupButton>
 		</NcRadioGroup>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import type { PropType } from 'vue'
+
 import { useIsSmallMobile } from '@nextcloud/vue'
+import { defineComponent } from 'vue'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
 import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
 
-export default {
+type PillOption = {
+	id: string | number
+	title?: string
+	ariaLabel?: string
+	icon?: string
+	disabled?: boolean
+}
+
+export default defineComponent({
 	name: 'PillMenu',
 
 	components: {
@@ -45,7 +58,7 @@ export default {
 		 * The active option
 		 */
 		active: {
-			type: Object,
+			type: Object as PropType<PillOption>,
 			required: true,
 		},
 
@@ -70,7 +83,7 @@ export default {
 		 * `option: {id: string, title: string, ariaLabel: string, icon?: string}`
 		 */
 		options: {
-			type: Array,
+			type: Array as PropType<PillOption[]>,
 			required: true,
 		},
 	},
@@ -83,16 +96,28 @@ export default {
 		}
 	},
 
+	computed: {
+		pillOptions(): PillOption[] {
+			return this.options as PillOption[]
+		},
+
+		activeId(): string {
+			return String(this.active.id)
+		},
+	},
+
 	methods: {
 		/**
 		 * Emit the full selected option to keep PillMenu API stable
 		 *
-		 * @param {string} optionId The selected option id
+		 * @param optionId The selected option id
 		 */
-		onUpdateActive(optionId) {
-			const option = this.options.find((entry) => entry.id === optionId)
+		onUpdateActive(optionId: string): void {
+			const option = this.pillOptions.find(
+				(entry) => String(entry.id) === optionId,
+			)
 			if (option) this.$emit('update:active', option)
 		},
 	},
-}
+})
 </script>
diff --git a/src/components/QRDialog.vue b/src/components/QRDialog.vue
index 66e691d92..d0040c998 100644
--- a/src/components/QRDialog.vue
+++ b/src/components/QRDialog.vue
@@ -23,12 +23,14 @@
 	</NcDialog>
 </template>
 
-<script>
+<script lang="ts">
+import { t } from '@nextcloud/l10n'
 import QRCode from 'qrcode'
+import { defineComponent } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import logger from '../utils/Logger.ts'
 
-export default {
+export default defineComponent({
 	name: 'QRDialog',
 
 	components: {
@@ -49,24 +51,23 @@ export default {
 
 	emits: ['closed'],
 
-	data() {
+	setup() {
 		return {
-			uri: {
-				type: String,
-				default: '',
-			},
+			t,
+		}
+	},
 
-			isOpen: {
-				type: Boolean,
-				default: false,
-			},
+	data() {
+		return {
+			uri: '' as string,
+			isOpen: false as boolean,
 		}
 	},
 
 	watch: {
 		text: {
 			immediate: true,
-			handler() {
+			handler(): void {
 				this.generateQr()
 				this.isOpen = !!this.text
 			},
@@ -74,21 +75,21 @@ export default {
 	},
 
 	methods: {
-		async generateQr() {
+		async generateQr(): Promise<void> {
 			if (this.text) {
 				try {
 					this.uri = await QRCode.toDataURL(this.text, {
 						width: 256,
 					})
 				} catch (err) {
-					logger.error(err)
+					logger.error(err instanceof Error ? err : String(err))
 				}
 			} else {
-				this.uri = null
+				this.uri = ''
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 177fab481..f8ce9a6b2 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -79,7 +79,9 @@
 	</li>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsOption } from '../../models/Entities.d.ts'
+
 import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
 import IconCheckboxBlankOutline from '@material-symbols/svg-400/outlined/check_box_outline_blank.svg?raw'
 import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
@@ -91,10 +93,12 @@ import IconTableColumn from '@material-symbols/svg-400/outlined/view_column.svg?
 import IconTableRow from '@material-symbols/svg-400/outlined/view_stream.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import PQueue from 'p-queue'
 import { markRaw } from 'vue'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
@@ -103,7 +107,7 @@ import { INPUT_DEBOUNCE_MS, OptionType } from '../../models/Constants.ts'
 import logger from '../../utils/Logger.ts'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
-export default {
+export default defineComponent({
 	name: 'AnswerInput',
 
 	components: {
@@ -177,28 +181,30 @@ export default {
 			IconDelete,
 			IconDragIndicator,
 			IconPlus,
+			t,
 		}
 	},
 
 	data() {
 		return {
-			queue: null,
-			debounceOnInput: null,
-			isIMEComposing: false,
-			localText: this.answer?.text ?? '',
+			queue: null as PQueue | null,
+			debounceOnInput: undefined as ((event: InputEvent) => void) | undefined,
+			isIMEComposing: false as boolean,
+			localText: (this.answer as FormsOption | undefined)?.text ?? '',
 		}
 	},
 
 	computed: {
-		canCreateLocalAnswer() {
-			if (this.answer.local) {
+		canCreateLocalAnswer(): boolean {
+			if ((this.answer as FormsOption).local) {
 				return !!this.localText?.trim()
 			}
-			return !!this.answer.text?.trim()
+			return !!(this.answer as FormsOption).text?.trim()
 		},
 
-		ariaLabel() {
-			if (this.answer.local) {
+		ariaLabel(): string {
+			const answer = this.answer as FormsOption
+			if (answer.local) {
 				if (this.optionType === OptionType.Column) {
 					return t('forms', 'Add a new column')
 				}
@@ -216,7 +222,9 @@ export default {
 			}
 
 			if (this.optionType === OptionType.Row) {
-				return t('forms', 'The text of row {index}', {})
+				return t('forms', 'The text of row {index}', {
+					index: this.index + 1,
+				})
 			}
 
 			return t('forms', 'The text of option {index}', {
@@ -224,12 +232,14 @@ export default {
 			})
 		},
 
-		optionDragMenuId() {
-			return `q${this.answer.questionId}o${this.answer.id}o${this.optionType}__drag_menu`
+		optionDragMenuId(): string {
+			const answer = this.answer as FormsOption
+			return `q${answer.questionId}o${answer.id}o${this.optionType}__drag_menu`
 		},
 
-		placeholder() {
-			if (this.answer.local) {
+		placeholder(): string {
+			const answer = this.answer as FormsOption
+			if (answer.local) {
 				if (this.optionType === OptionType.Column) {
 					return t('forms', 'Add a new column')
 				}
@@ -252,8 +262,9 @@ export default {
 			return t('forms', 'Answer number {index}', { index: this.index + 1 })
 		},
 
-		pseudoIcon() {
-			if (this.answer.local) {
+		pseudoIcon(): string {
+			const answer = this.answer as FormsOption
+			if (answer.local) {
 				return IconPlus
 			}
 
@@ -276,7 +287,7 @@ export default {
 	watch: {
 		// Keep localText in sync when the parent replaces/updates the answer prop
 		answer: {
-			handler(newVal) {
+			handler(newVal: FormsOption) {
 				this.localText = newVal?.text ?? ''
 			},
 
@@ -284,59 +295,77 @@ export default {
 		},
 	},
 
-	created() {
+	created(): void {
 		this.queue = markRaw(new PQueue({ concurrency: 1 }))
 
 		// As data instead of method, to have a separate debounce per AnswerInput
-		this.debounceOnInput = debounce((event) => {
-			return this.queue.add(() => this.onInput(event))
+		this.debounceOnInput = debounce((event: InputEvent) => {
+			const queue = this.queue
+			if (!queue) {
+				return
+			}
+			return queue.add(() => this.onInput(event))
 		}, INPUT_DEBOUNCE_MS)
 	},
 
 	methods: {
-		handleTabbing() {
+		handleTabbing(): void {
 			this.$emit('tabbedOut', this.optionType)
 		},
 
 		/**
 		 * Focus the input
 		 */
-		focus() {
-			this.$refs.input?.focus()
+		focus(): void {
+			const input = this.$refs.input as unknown as HTMLInputElement | undefined
+			input?.focus()
 		},
 
 		/**
 		 * Option changed, processing the data
 		 *
-		 * @param {InputEvent} event The input event that triggered adding a new entry
+		 * @param event The input event that triggered adding a new entry
 		 */
-		async onInput({ target, isComposing }) {
-			if (this.answer.local) {
+		async onInput(
+			event: InputEvent | { target: HTMLInputElement; isComposing?: boolean },
+		): Promise<void> {
+			const target = event.target as HTMLInputElement | null
+			if (!target) {
+				return
+			}
+
+			const answer = this.answer as FormsOption
+			if (answer.local) {
 				this.localText = target.value
 				return
 			}
 
-			if (!isComposing && !this.isIMEComposing && target.value !== '') {
+			if (!event.isComposing && !this.isIMEComposing && target.value !== '') {
 				// clone answer
-				const answer = { ...this.answer }
-				answer.text = this.$refs.input.value
+				const answerCopy = { ...answer }
+				const input = this.$refs.input as unknown as
+					HTMLInputElement | undefined
+				if (!input) {
+					return
+				}
+				answerCopy.text = input.value
 
-				await this.updateAnswer(answer)
+				await this.updateAnswer(answerCopy)
 
 				// Forward changes, but use current answer.text to avoid erasing
 				// any in-between changes while updating the answer
-				answer.text = this.$refs.input.value
-				this.$emit('update:answer', this.index, answer)
+				answerCopy.text = input.value
+				this.$emit('update:answer', this.index, answerCopy)
 			}
 		},
 
 		/**
 		 * Handle Enter key: create local answer or move focus
 		 *
-		 * @param {KeyboardEvent} e the keydown event
+		 * @param e the keydown event
 		 */
-		onEnter(e) {
-			if (this.answer.local) {
+		onEnter(e: KeyboardEvent): void {
+			if ((this.answer as FormsOption).local) {
 				this.createLocalAnswer(e)
 				return
 			}
@@ -346,9 +375,11 @@ export default {
 		/**
 		 * Create a new local answer option from the current input
 		 *
-		 * @param {Event} e the triggering event
+		 * @param e the triggering event
 		 */
-		async createLocalAnswer(e) {
+		async createLocalAnswer(
+			e?: Event & { isComposing?: boolean },
+		): Promise<void> {
 			if (this.isIMEComposing || e?.isComposing) {
 				return
 			}
@@ -358,32 +389,45 @@ export default {
 				return
 			}
 
-			const answer = { ...this.answer, text: value, local: false }
+			const answer = {
+				...(this.answer as FormsOption),
+				text: value,
+				local: false,
+			}
 
 			// Prevent any queued debounced PATCHes from running while creating
-			this.queue.pause()
+			const queue = this.queue
+			if (!queue) {
+				return
+			}
+			queue.pause()
 			try {
 				const newAnswer = await this.createAnswer(answer)
 
 				// Forward changes, but use current answer.text to avoid erasing
 				// any in-between changes while creating the answer
-				newAnswer.text = this.$refs.input.value
+				const input = this.$refs.input as unknown as
+					HTMLInputElement | undefined
+				if (!input) {
+					return
+				}
+				newAnswer.text = input.value
 				this.localText = ''
 
 				this.$emit('createAnswer', this.index, newAnswer)
 			} finally {
 				// Clear pending update tasks (stale PATCHes) before resuming processing
-				this.queue.clear()
-				this.queue.start()
+				queue.clear()
+				queue.start()
 			}
 		},
 
 		/**
 		 * Request a new answer
 		 *
-		 * @param {Event} e the triggering event
+		 * @param e the triggering event
 		 */
-		focusNextInput(e) {
+		focusNextInput(e: Event & { isComposing?: boolean }): void {
 			if (this.isIMEComposing || e?.isComposing) {
 				return
 			}
@@ -396,18 +440,21 @@ export default {
 		 * Emit a delete request for this answer
 		 * when pressing the delete key on an empty input
 		 *
-		 * @param {Event} e the event
+		 * @param e the event
 		 */
-		async deleteEntry(e) {
+		async deleteEntry(
+			e: Event & { isComposing?: boolean; type: string },
+		): Promise<void> {
 			if (this.isIMEComposing || e?.isComposing) {
 				return
 			}
 
-			if (this.answer.local) {
+			if ((this.answer as FormsOption).local) {
 				return
 			}
 
-			if (e.type !== 'click' && this.$refs.input.value.length !== 0) {
+			const input = this.$refs.input as unknown as HTMLInputElement | undefined
+			if (e.type !== 'click' && (input?.value.length ?? 0) !== 0) {
 				return
 			}
 
@@ -415,21 +462,25 @@ export default {
 			e.preventDefault()
 
 			// do this in queue to prevent race conditions between PATCH and DELETE
-			this.queue.add(() => {
-				this.$emit('delete', this.answer)
+			const queue = this.queue
+			if (!queue) {
+				return
+			}
+			queue.add(() => {
+				this.$emit('delete', this.answer as FormsOption)
 				// Prevent any patch requests
-				this.queue.pause()
-				this.queue.clear()
+				queue.pause()
+				queue.clear()
 			})
 		},
 
 		/**
 		 * Create an unsynced answer to the server
 		 *
-		 * @param {object} answer the answer to sync
-		 * @return {object} answer
+		 * @param answer the answer to sync
+		 * @return answer
 		 */
-		async createAnswer(answer) {
+		async createAnswer(answer: FormsOption): Promise<FormsOption> {
 			try {
 				const response = await axios.post(
 					generateOcsUrl(
@@ -448,7 +499,7 @@ export default {
 
 				// Was synced once, this is now up to date with the server
 				delete answer.local
-				return OcsResponse2Data(response)[0]
+				return (OcsResponse2Data(response) as FormsOption[])[0]
 			} catch (error) {
 				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
@@ -461,9 +512,9 @@ export default {
 		 * Save to the server, only do it after 500ms
 		 * of no change
 		 *
-		 * @param {object} answer the answer to sync
+		 * @param answer the answer to sync
 		 */
-		async updateAnswer(answer) {
+		async updateAnswer(answer: FormsOption): Promise<void> {
 			try {
 				await axios.patch(
 					generateOcsUrl(
@@ -490,7 +541,7 @@ export default {
 		/**
 		 * Reorder option but keep focus on the button
 		 */
-		onMoveDown() {
+		onMoveDown(): void {
 			this.$emit('moveDown')
 			this.focusButton(
 				this.index < this.maxIndex - 1
@@ -499,35 +550,40 @@ export default {
 			)
 		},
 
-		onMoveUp() {
+		onMoveUp(): void {
 			this.$emit('moveUp')
 			this.focusButton(this.index > 1 ? 'buttonOptionUp' : 'buttonOptionDown')
 		},
 
-		focusButton(refName) {
-			this.$nextTick(() => this.$refs[refName].$el.focus())
+		focusButton(refName: 'buttonOptionDown' | 'buttonOptionUp'): void {
+			this.$nextTick(() => {
+				const button = this.$refs[refName] as unknown as
+					{ $el?: HTMLElement } | undefined
+				button?.$el?.focus()
+			})
 		},
 
 		/**
 		 * Handle composition start event for IME inputs
 		 */
-		onCompositionStart() {
+		onCompositionStart(): void {
 			this.isIMEComposing = true
 		},
 
 		/**
 		 * Handle composition end event for IME inputs
 		 *
-		 * @param {CompositionEvent} event The input event that triggered adding a new entry
+		 * @param event The input event that triggered adding a new entry
 		 */
-		onCompositionEnd({ target, isComposing }) {
+		onCompositionEnd(event: CompositionEvent & { isComposing?: boolean }): void {
+			const target = event.target as HTMLInputElement | null
 			this.isIMEComposing = false
-			if (!isComposing) {
-				this.onInput({ target, isComposing })
+			if (!event.isComposing && target) {
+				this.onInput({ target, isComposing: event.isComposing })
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 53756800e..07e68e469 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -162,7 +162,7 @@
 	</li>
 </template>
 
-<script>
+<script lang="ts">
 import IconAsterisk from '@material-symbols/svg-400/outlined/asterisk.svg?raw'
 import IconIdentifier from '@material-symbols/svg-400/outlined/badge.svg?raw'
 import IconContentCopy from '@material-symbols/svg-400/outlined/content_copy.svg?raw'
@@ -172,6 +172,8 @@ import IconAlertCircleOutline from '@material-symbols/svg-400/outlined/error.svg
 import IconArrowDown from '@material-symbols/svg-400/outlined/keyboard_arrow_down.svg?raw'
 import IconArrowUp from '@material-symbols/svg-400/outlined/keyboard_arrow_up.svg?raw'
 import IconDotsHorizontal from '@material-symbols/svg-400/outlined/more_horiz.svg?raw'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
@@ -181,7 +183,7 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import IconOverlay from '../Icons/IconOverlay.vue'
 
-export default {
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Question',
 
@@ -297,6 +299,7 @@ export default {
 			IconDotsHorizontal,
 			IconDragIndicator,
 			IconIdentifier,
+			t,
 		}
 	},
 
@@ -304,88 +307,99 @@ export default {
 		/**
 		 * Extend text with asterisk if question is required
 		 *
-		 * @return {boolean}
+		 * @return
 		 */
-		computedText() {
+		computedText(): string {
 			if (this.isRequired) {
 				return this.text + ' *'
 			}
 			return this.text
 		},
 
-		computedDescription() {
-			return this.$markdownit.render(this.description)
+		computedDescription(): string {
+			return (
+				this.$markdownit as { render: (value: string) => string }
+			).render(this.description)
 		},
 
 		/**
 		 * Question valid, if text not empty and content valid
 		 *
-		 * @return {boolean} true if question valid
+		 * @return true if question valid
 		 */
-		questionValid() {
-			return this.text && this.contentValid
+		questionValid(): boolean {
+			return !!this.text && this.contentValid
 		},
 
-		actionsId() {
+		actionsId(): string {
 			return 'q' + this.index + '_actions'
 		},
 
-		titleId() {
+		titleId(): string {
 			return 'q' + this.index + '_title'
 		},
 
-		descriptionId() {
+		descriptionId(): string {
 			return 'q' + this.index + '_desc'
 		},
 
-		hasDescription() {
+		hasDescription(): boolean {
 			return this.description !== ''
 		},
 
-		hasError() {
+		hasError(): boolean {
 			return !!this.errorMessage
 		},
 
-		hasInfo() {
+		hasInfo(): boolean {
 			return !!this.infoMessage
 		},
 
-		errorId() {
+		errorId(): string {
 			return `q${this.index}_error`
 		},
 
-		infoId() {
+		infoId(): string {
 			return `q${this.index}_info`
 		},
 	},
 
 	// Ensure description is sized correctly on initial render
-	mounted() {
+	mounted(): void {
 		this.$nextTick(() => this.resizeDescription())
 	},
 
 	methods: {
-		onTitleChange({ target }) {
+		onTitleChange(event: Event): void {
+			const target = event.target as HTMLInputElement | null
+			if (!target) {
+				return
+			}
 			this.$emit('update:text', target.value)
 		},
 
-		onDescriptionChange({ target }) {
+		onDescriptionChange(event: Event): void {
+			const target = event.target as HTMLTextAreaElement | null
+			if (!target) {
+				return
+			}
 			this.resizeDescription()
 			this.$emit('update:description', target.value)
 		},
 
-		onNameChange(name) {
+		onNameChange(name: string): void {
 			this.$emit('update:name', name)
 		},
 
-		onRequiredChange(isRequired) {
+		onRequiredChange(isRequired: boolean): void {
 			this.$emit('update:isRequired', isRequired)
 		},
 
-		resizeDescription() {
+		resizeDescription(): void {
 			// next tick ensures that the textarea is attached to DOM
 			this.$nextTick(() => {
-				const textarea = this.$refs.description
+				const textarea = this.$refs.description as
+					HTMLTextAreaElement | undefined
 				if (textarea) {
 					textarea.style.cssText = 'height: 0'
 					// include 2px border
@@ -397,31 +411,39 @@ export default {
 		/**
 		 * Reorder question but keep focus on the button
 		 */
-		onMoveDown() {
+		onMoveDown(): void {
 			this.$emit('moveDown')
-			this.$nextTick(() => this.$refs.buttonDown.$el.focus())
+			this.$nextTick(() => {
+				const buttonDown = this.$refs.buttonDown as
+					{ $el?: HTMLElement } | undefined
+				buttonDown?.$el?.focus()
+			})
 		},
 
-		onMoveUp() {
+		onMoveUp(): void {
 			this.$emit('moveUp')
-			this.$nextTick(() => this.$refs.buttonUp.$el.focus())
+			this.$nextTick(() => {
+				const buttonUp = this.$refs.buttonUp as
+					{ $el?: HTMLElement } | undefined
+				buttonUp?.$el?.focus()
+			})
 		},
 
 		/**
 		 * Delete this question
 		 */
-		onDelete() {
+		onDelete(): void {
 			this.$emit('delete')
 		},
 
 		/**
 		 * Clone this question
 		 */
-		onClone() {
+		onClone(): void {
 			this.$emit('clone')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index 940434077..21755e60f 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -45,15 +45,17 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
 import IconClose from '@material-symbols/svg-400/outlined/close.svg?raw'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
-export default {
+export default defineComponent({
 	name: 'QuestionColor',
 
 	components: {
@@ -69,29 +71,30 @@ export default {
 	setup() {
 		return {
 			IconClose,
+			t,
 		}
 	},
 
 	data() {
 		return {
-			isLoading: false,
+			isLoading: false as boolean,
 		}
 	},
 
 	computed: {
-		colorPickerPlaceholder() {
+		colorPickerPlaceholder(): string {
 			return this.readOnly
 				? this.answerType.submitPlaceholder
 				: this.answerType.createPlaceholder
 		},
 
-		pickedColor() {
-			return this.values[0] ?? ''
+		pickedColor(): string {
+			return (this.values[0] as string | null | undefined) ?? ''
 		},
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
 			if (this.isRequired && this.pickedColor === '') {
 				this.errorMessage = t('forms', 'You must answer this question')
 				return false
@@ -101,11 +104,11 @@ export default {
 			return true
 		},
 
-		onUpdatePickedColor(color) {
-			this.$emit('update:values', [color])
+		onUpdatePickedColor(color: string | undefined): void {
+			this.$emit('update:values', [color ?? ''])
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index f5c60a3e1..1207e8014 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -108,8 +108,10 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
+import { defineComponent } from 'vue'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
@@ -121,7 +123,19 @@ import svgEventIcon from '../../../img/event.svg?raw'
 import svgTodayIcon from '../../../img/today.svg?raw'
 import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
-export default {
+type PickerType =
+	'date' | 'datetime' | 'time' | 'date-range' | 'datetime-range' | 'time-range'
+
+type QuestionDateExtraSettings = {
+	dateRange?: boolean
+	dateMax?: number | null
+	dateMin?: number | null
+	timeRange?: boolean
+	timeMax?: string | null
+	timeMin?: string | null
+}
+
+export default defineComponent({
 	name: 'QuestionDate',
 
 	components: {
@@ -146,17 +160,20 @@ export default {
 			svgClockLoader20,
 			svgEventIcon,
 			svgTodayIcon,
+			t,
 		}
 	},
 
 	computed: {
-		isRangeQuestion() {
-			return this.extraSettings?.dateRange || this.extraSettings?.timeRange
+		isRangeQuestion(): boolean {
+			const extraSettings = this.extraSettings as
+				QuestionDateExtraSettings | undefined
+			return extraSettings?.dateRange || extraSettings?.timeRange
 				? true
 				: false
 		},
 
-		datetimePickerPlaceholder() {
+		datetimePickerPlaceholder(): string {
 			if (this.readOnly) {
 				return this.isRangeQuestion
 					? this.answerType.submitPlaceholderRange
@@ -167,74 +184,89 @@ export default {
 				: this.answerType.createPlaceholder
 		},
 
-		dateTimePickerType() {
+		dateTimePickerType(): PickerType {
 			return this.isRangeQuestion
-				? this.answerType.pickerType + '-range'
-				: this.answerType.pickerType
+				? (`${this.answerType.pickerType}-range` as PickerType)
+				: (this.answerType.pickerType as PickerType)
 		},
 
-		time() {
+		time(): Date | [Date, Date] | null {
 			if (this.isRangeQuestion) {
-				return this.values?.[0]
-					? [this.parse(this.values[0]), this.parse(this.values[1])]
+				const firstValue = this.values?.[0] as string | undefined
+				const secondValue = this.values?.[1] as string | undefined
+				return firstValue && secondValue
+					? [this.parse(firstValue), this.parse(secondValue)]
 					: null
 			}
-			return this.values?.[0] ? this.parse(this.values[0]) : null
+			const value = this.values?.[0] as string | undefined
+			return value ? this.parse(value) : null
 		},
 
 		/**
 		 * The maximum allowable date for the date input field
 		 */
-		dateMax() {
-			return this.extraSettings?.dateMax
-				? moment(this.extraSettings.dateMax, 'X').toDate()
-				: null
+		dateMax(): Date | undefined {
+			const extraSettings = this.extraSettings as
+				QuestionDateExtraSettings | undefined
+			return extraSettings?.dateMax
+				? moment(extraSettings.dateMax, 'X').toDate()
+				: undefined
 		},
 
 		/**
 		 * The minimum allowable date for the date input field
 		 */
-		dateMin() {
-			return this.extraSettings?.dateMin
-				? moment(this.extraSettings.dateMin, 'X').toDate()
-				: null
+		dateMin(): Date | undefined {
+			const extraSettings = this.extraSettings as
+				QuestionDateExtraSettings | undefined
+			return extraSettings?.dateMin
+				? moment(extraSettings.dateMin, 'X').toDate()
+				: undefined
 		},
 
-		dateRange() {
-			return this.extraSettings?.dateRange ?? false
+		dateRange(): boolean {
+			const extraSettings = this.extraSettings as
+				QuestionDateExtraSettings | undefined
+			return extraSettings?.dateRange ?? false
 		},
 
 		/**
 		 * The maximum allowable time for the time input field
 		 */
-		timeMax() {
-			return this.extraSettings?.timeMax
+		timeMax(): Date | undefined {
+			const extraSettings = this.extraSettings as
+				QuestionDateExtraSettings | undefined
+			return extraSettings?.timeMax
 				? moment(
-						this.extraSettings.timeMax,
+						extraSettings.timeMax,
 						this.answerType.storageFormat,
 					).toDate()
-				: new Date(new Date().setHours(24, 0, 0, 0))
+				: undefined
 		},
 
 		/**
 		 * The minimum allowable time for the time input field
 		 */
-		timeMin() {
-			return this.extraSettings?.timeMin
+		timeMin(): Date | undefined {
+			const extraSettings = this.extraSettings as
+				QuestionDateExtraSettings | undefined
+			return extraSettings?.timeMin
 				? moment(
-						this.extraSettings.timeMin,
+						extraSettings.timeMin,
 						this.answerType.storageFormat,
 					).toDate()
-				: new Date(new Date().setHours(0, 0, 0, 0))
+				: undefined
 		},
 
-		timeRange() {
-			return this.extraSettings?.timeRange ?? false
+		timeRange(): boolean {
+			const extraSettings = this.extraSettings as
+				QuestionDateExtraSettings | undefined
+			return extraSettings?.timeRange ?? false
 		},
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
 			if (this.isRequired && this.time === null) {
 				this.errorMessage = t('forms', 'You must answer this question')
 				return false
@@ -248,10 +280,10 @@ export default {
 		 * DateTimepicker show text in picker
 		 * Format depends on component-type date/datetime
 		 *
-		 * @param {Date|Date[]} date the selected datepicker Date
-		 * @return {string}
+		 * @param date the selected datepicker Date
+		 * @return
 		 */
-		stringify(date) {
+		stringify(date: Date | Date[]): string {
 			if (this.isRangeQuestion && Array.isArray(date)) {
 				return `${moment(date[0]).format(this.answerType.momentFormat)} - ${moment(date[1]).format(this.answerType.momentFormat)}`
 			}
@@ -261,10 +293,10 @@ export default {
 		/**
 		 * Reinterpret a stored date
 		 *
-		 * @param {string} dateString Stringified date
-		 * @return {Date}
+		 * @param dateString Stringified date
+		 * @return
 		 */
-		parse(dateString) {
+		parse(dateString: string): Date {
 			return moment(dateString, [
 				this.answerType.momentFormat,
 				this.answerType.storageFormat,
@@ -275,9 +307,9 @@ export default {
 		 * Handles the change event for the maximum date input.
 		 * Updates the maximum allowable date based on the provided value.
 		 *
-		 * @param {string | Date} value - The new maximum date value. Can be a string or a Date object.
+		 * @param value - The new maximum date value. Can be a string or a Date object.
 		 */
-		onDateMaxChange(value) {
+		onDateMaxChange(value: string | Date): void {
 			this.onExtraSettingsChange({
 				dateMax: parseInt(moment(value).format('X')),
 			})
@@ -287,9 +319,9 @@ export default {
 		 * Handles the change event for the minimum date input.
 		 * Updates the minimum allowable date based on the provided value.
 		 *
-		 * @param {string | Date} value - The new minimum date value. Can be a string or a Date object.
+		 * @param value - The new minimum date value. Can be a string or a Date object.
 		 */
-		onDateMinChange(value) {
+		onDateMinChange(value: string | Date): void {
 			this.onExtraSettingsChange({
 				dateMin: parseInt(moment(value).format('X')),
 			})
@@ -299,10 +331,10 @@ export default {
 		 * Handles the change event for the date range selection.
 		 * Updates the extra settings with the new date range value.
 		 *
-		 * @param {boolean} value - The new value of the date range selection.
+		 * @param value - The new value of the date range selection.
 		 *                          If true, the date range is enabled; otherwise, null.
 		 */
-		onDateRangeChange(value) {
+		onDateRangeChange(value: boolean): void {
 			this.onExtraSettingsChange({ dateRange: value === true ? true : null })
 		},
 
@@ -310,14 +342,13 @@ export default {
 		 * Handles the change event for the maximum time input.
 		 * Updates the maximum allowable date based on the provided value.
 		 *
-		 * @param {string | Date} value - The new maximum date value. Can be a string or a Date object.
+		 * @param value - The new maximum date value. Can be a string or a Date object.
 		 */
-		onTimeMaxChange(value) {
+		onTimeMaxChange(value: string | Date | null): void {
 			this.onExtraSettingsChange({
 				timeMax:
 					value === null
-					|| (value
-						&& value.getTime
+					|| (value instanceof Date
 						&& value.getTime()
 							=== new Date(new Date().setHours(24, 0, 0, 0)).getTime())
 						? null
@@ -329,14 +360,13 @@ export default {
 		 * Handles the change event for the minimum date input.
 		 * Updates the minimum allowable date based on the provided value.
 		 *
-		 * @param {string | Date} value - The new minimum date value. Can be a string or a Date object.
+		 * @param value - The new minimum date value. Can be a string or a Date object.
 		 */
-		onTimeMinChange(value) {
+		onTimeMinChange(value: string | Date | null): void {
 			this.onExtraSettingsChange({
 				timeMin:
 					value === null
-					|| (value
-						&& value.getTime
+					|| (value instanceof Date
 						&& value.getTime()
 							=== new Date(new Date().setHours(0, 0, 0, 0)).getTime())
 						? null
@@ -348,29 +378,30 @@ export default {
 		 * Handles the change event for the date range selection.
 		 * Updates the extra settings with the new date range value.
 		 *
-		 * @param {boolean} value - The new value of the date range selection.
+		 * @param value - The new value of the date range selection.
 		 *                          If true, the date range is enabled; otherwise, null.
 		 */
-		onTimeRangeChange(value) {
+		onTimeRangeChange(value: boolean): void {
 			this.onExtraSettingsChange({ timeRange: value === true ? true : null })
 		},
 
 		/**
 		 * Store Value
 		 *
-		 * @param {Date|Array<Date>|null} date The date or date range to store
+		 * @param date The date or date range to store
 		 */
-		onValueChange(date) {
+		onValueChange(date: Date | [Date, Date] | null): void {
 			if (!date) {
 				this.$emit('update:values', [])
 				return
 			}
 
-			if (this.isRangeQuestion) {
+			if (this.isRangeQuestion && Array.isArray(date)) {
 				this.$emit('update:values', [
 					moment(date[0]).format(this.answerType.storageFormat),
 					moment(date[1]).format(this.answerType.storageFormat),
 				])
+				return
 			} else {
 				this.$emit('update:values', [
 					moment(date).format(this.answerType.storageFormat),
@@ -381,50 +412,50 @@ export default {
 		/**
 		 * Determines if a given date should be disabled.
 		 *
-		 * @param {Date} date - The date to check.
-		 * @return {boolean} - Returns true if the date should be disabled, otherwise false.
+		 * @param date - The date to check.
+		 * @return - Returns true if the date should be disabled, otherwise false.
 		 */
-		disabledDates(date) {
-			return (
+		disabledDates(date: Date): boolean {
+			return Boolean(
 				(this.dateMin && date < this.dateMin)
-				|| (this.dateMax && date > this.dateMax)
+				|| (this.dateMax && date > this.dateMax),
 			)
 		},
 
 		/**
 		 * Determines if a given time should be disabled.
 		 *
-		 * @param {Date} time - The time to check.
-		 * @return {boolean} - Returns true if the time should be disabled, otherwise false.
+		 * @param time - The time to check.
+		 * @return - Returns true if the time should be disabled, otherwise false.
 		 */
-		disabledTimes(time) {
-			return (
+		disabledTimes(time: Date): boolean {
+			return Boolean(
 				(this.timeMin && time < this.timeMin)
-				|| (this.timeMax && time > this.timeMax)
+				|| (this.timeMax && time > this.timeMax),
 			)
 		},
 
 		/**
 		 * Datepicker timestamp to string
 		 *
-		 * @param {Date} datetime the datepicker Date
-		 * @return {string}
+		 * @param datetime the datepicker Date
+		 * @return
 		 */
-		stringifyDate(datetime) {
+		stringifyDate(datetime: Date): string {
 			return moment(datetime).format('L')
 		},
 
 		/**
 		 * Form expires timestamp to Date of the datepicker
 		 *
-		 * @param {number} value the expires timestamp
-		 * @return {Date}
+		 * @param value the expires timestamp
+		 * @return
 		 */
-		parseTimestampToDate(value) {
+		parseTimestampToDate(value: number): Date {
 			return moment(value, 'X').toDate()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 3a1edb94b..2a66b2f28 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -99,8 +99,12 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsOption } from '../../models/Entities.d.ts'
+
 import IconContentPaste from '@material-symbols/svg-400/outlined/content_paste.svg?raw'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
@@ -114,7 +118,7 @@ import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { OptionType } from '../../models/Constants.ts'
 
-export default {
+export default defineComponent({
 	name: 'QuestionDropdown',
 
 	components: {
@@ -135,60 +139,65 @@ export default {
 	setup() {
 		return {
 			IconContentPaste,
+			t,
 		}
 	},
 
 	data() {
 		return {
-			isDragging: false,
-			isLoading: false,
-			isOptionDialogShown: false,
+			isDragging: false as boolean,
+			isLoading: false as boolean,
+			isOptionDialogShown: false as boolean,
 			OptionType,
 		}
 	},
 
 	computed: {
-		selectOptionPlaceholder() {
+		selectOptionPlaceholder(): string {
 			if (this.readOnly) {
 				return this.answerType.submitPlaceholder
 			}
 			return this.answerType.createPlaceholder
 		},
 
-		isMultiple() {
+		isMultiple(): boolean {
 			// This can be extended if we want to include support for <select multiple>
 			return false
 		},
 
-		shiftDragHandle() {
+		shiftDragHandle(): boolean {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
-		selectedOption() {
+		selectedOption(): FormsOption | FormsOption[] | null {
 			if (!this.values) {
 				return null
 			}
 
-			const selected = this.values.map((id) =>
-				this.options.find((option) => option.id === parseInt(id)),
-			)
+			const selected = this.values
+				.map((id: unknown) =>
+					this.options.find(
+						(option) => option.id === parseInt(String(id)),
+					),
+				)
+				.filter((option): option is FormsOption => option !== undefined)
 
 			return this.isMultiple ? selected : selected[0]
 		},
 
 		choices: {
-			get() {
+			get(): FormsOption[] {
 				return this.sortOptionsOfType(this.options, OptionType.Choice)
 			},
 
-			set(value) {
+			set(value: FormsOption[]): void {
 				this.updateOptionsOrder(value, OptionType.Choice)
 			},
 		},
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
 			if (this.isRequired && this.areNoneChecked) {
 				this.errorMessage = t('forms', 'You must answer this question')
 				return false
@@ -198,17 +207,17 @@ export default {
 			return true
 		},
 
-		onDragStart() {
+		onDragStart(): void {
 			this.isDragging = true
 		},
 
-		onDragEnd() {
+		onDragEnd(): void {
 			this.$nextTick(() => {
 				this.isDragging = false
 			})
 		},
 
-		onInput(option) {
+		onInput(option: FormsOption | FormsOption[] | null): void {
 			if (Array.isArray(option)) {
 				this.$emit('update:values', [
 					...new Set(option.map((opt) => opt.id)),
@@ -220,7 +229,7 @@ export default {
 			this.$emit('update:values', option ? [option.id] : [])
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index a03086a22..3d2756bd1 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -58,7 +58,7 @@
 				<NcActionCheckbox
 					v-for="({ label: fileTypeLabel }, fileType) in fileTypes"
 					:key="fileType"
-					:modelValue="extraSettings?.allowedFileTypes?.includes(fileType)"
+					:modelValue="allowedFileTypes.includes(fileType)"
 					:value="fileType"
 					class="file-type-checkbox"
 					@update:modelValue="onAllowedFileTypesChange(fileType, $event)">
@@ -82,7 +82,7 @@
 		<div class="question__content">
 			<ul>
 				<NcListItem
-					v-for="uploadedFile of values"
+					v-for="uploadedFile of uploadedFiles"
 					:key="uploadedFile.uploadedFileId"
 					:name="uploadedFile.fileName"
 					compact>
@@ -106,7 +106,7 @@
 					<NcLoadingIcon v-show="fileLoading" />
 					{{ t('forms', 'Uploading …') }}
 				</li>
-				<li v-else-if="values.length < maxAllowedFilesCount">
+				<li v-else-if="uploadedFiles.length < maxAllowedFilesCount">
 					<div
 						class="question__input-wrapper"
 						role="group"
@@ -124,7 +124,9 @@
 								:disabled="!readOnly"
 								:multiple="maxAllowedFilesCount > 1"
 								:name="name || undefined"
-								:accept="accept.length ? accept.join(',') : null"
+								:accept="
+									accept.length ? accept.join(',') : undefined
+								"
 								@invalid.prevent="validate"
 								@input="onFileInput" />
 						</label>
@@ -151,7 +153,7 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
 import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
 import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
 import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
@@ -162,7 +164,9 @@ import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
@@ -177,6 +181,8 @@ import fileTypes from '../../models/FileTypes.ts'
 import logger from '../../utils/Logger.ts'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
+const formsAppName = 'forms'
+
 /**
  * A constant object representing file size units in bytes.
  *
@@ -193,7 +199,21 @@ const FILE_SIZE_UNITS = {
 	gb: 1024 ** 3,
 }
 
-export default {
+type FileSizeUnit = keyof typeof FILE_SIZE_UNITS
+
+type UploadedFileValue = {
+	fileName: string
+	uploadedFileId: number | string
+}
+
+type QuestionFileExtraSettings = {
+	allowedFileExtensions?: string[]
+	allowedFileTypes?: string[]
+	maxAllowedFilesCount?: number
+	maxFileSize?: number
+}
+
+export default defineComponent({
 	name: 'QuestionFile',
 	components: {
 		NcIconSvgWrapper,
@@ -218,44 +238,61 @@ export default {
 			IconFileDocumentAlert,
 			IconUpload,
 			IconUploadMultiple,
+			t,
 		}
 	},
 
 	data() {
 		return {
 			fileTypes,
-			fileLoading: false,
-			maxFileSizeUnit: Object.keys(FILE_SIZE_UNITS)[0],
-			maxFileSizeValue: '',
-			allowedFileTypesDialogOpened: false,
+			fileLoading: false as boolean,
+			maxFileSizeUnit: Object.keys(FILE_SIZE_UNITS)[0] as FileSizeUnit,
+			maxFileSizeValue: 0 as number,
+			allowedFileTypesDialogOpened: false as boolean,
 		}
 	},
 
 	computed: {
-		availableUnits() {
-			return Object.keys(FILE_SIZE_UNITS)
+		availableUnits(): FileSizeUnit[] {
+			return Object.keys(FILE_SIZE_UNITS) as FileSizeUnit[]
+		},
+
+		uploadedFiles(): UploadedFileValue[] {
+			return this.values as UploadedFileValue[]
 		},
 
-		maxAllowedFilesCount() {
-			return this.extraSettings?.maxAllowedFilesCount || 1
+		maxAllowedFilesCount(): number {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			return extraSettings?.maxAllowedFilesCount ?? 1
 		},
 
-		allowedFileExtensions() {
-			return this.extraSettings?.allowedFileExtensions || []
+		allowedFileExtensions(): string[] {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			return extraSettings?.allowedFileExtensions ?? []
 		},
 
-		allowedFileTypesLabel() {
-			const allowedFileTypes = []
-			if (this.extraSettings?.allowedFileTypes?.length) {
+		allowedFileTypes(): string[] {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			return extraSettings?.allowedFileTypes ?? []
+		},
+
+		allowedFileTypesLabel(): string {
+			const allowedFileTypes: string[] = []
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			if (extraSettings?.allowedFileTypes?.length) {
 				allowedFileTypes.push(
-					...this.extraSettings.allowedFileTypes.map(
-						(type) => fileTypes[type].label,
+					...extraSettings.allowedFileTypes.map(
+						(type: string) => fileTypes[type].label,
 					),
 				)
 			}
 
-			if (this.extraSettings?.allowedFileExtensions?.length) {
-				allowedFileTypes.push(...this.extraSettings.allowedFileExtensions)
+			if (extraSettings?.allowedFileExtensions?.length) {
+				allowedFileTypes.push(...extraSettings.allowedFileExtensions)
 			}
 
 			if (allowedFileTypes.length) {
@@ -268,36 +305,46 @@ export default {
 		},
 	},
 
-	mounted() {
-		if (this.extraSettings.maxFileSize) {
+	mounted(): void {
+		const extraSettings = this.extraSettings as
+			QuestionFileExtraSettings | undefined
+		if (extraSettings?.maxFileSize) {
+			const maxFileSize = extraSettings.maxFileSize
 			Object.keys(FILE_SIZE_UNITS).forEach((unit) => {
-				if (this.extraSettings.maxFileSize > FILE_SIZE_UNITS[unit]) {
-					this.maxFileSizeUnit = unit
+				const typedUnit = unit as FileSizeUnit
+				if (maxFileSize > FILE_SIZE_UNITS[typedUnit]) {
+					this.maxFileSizeUnit = typedUnit
 				}
 			})
 
 			this.maxFileSizeValue =
-				this.extraSettings.maxFileSize
-				/ FILE_SIZE_UNITS[this.maxFileSizeUnit]
+				maxFileSize / FILE_SIZE_UNITS[this.maxFileSizeUnit]
 		}
 	},
 
 	methods: {
-		toggleFileInput() {
-			this.$refs.fileInput.click()
+		toggleFileInput(): void {
+			;(this.$refs.fileInput as HTMLInputElement | undefined)?.click()
 		},
 
-		async onFileInput() {
-			const fileInput = this.$refs.fileInput
+		async onFileInput(): Promise<void> {
+			const fileInput = this.$refs.fileInput as HTMLInputElement | undefined
+			if (!fileInput?.files) {
+				return
+			}
+
 			const formData = new FormData()
 			let fileInvalid = false
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
 
 			;[...fileInput.files].forEach((file) => {
 				formData.append('files[]', file)
 
 				if (
-					this.extraSettings.maxFileSize > 0
-					&& file.size > this.extraSettings.maxFileSize
+					extraSettings?.maxFileSize
+					&& extraSettings.maxFileSize > 0
+					&& file.size > extraSettings.maxFileSize
 				) {
 					showError(
 						t(
@@ -306,7 +353,7 @@ export default {
 							{
 								fileName: file.name,
 								maxFileSize: formatFileSize(
-									this.extraSettings.maxFileSize,
+									extraSettings.maxFileSize,
 								),
 							},
 						),
@@ -320,7 +367,10 @@ export default {
 				return
 			}
 
-			formData.append('shareHash', loadState('forms', 'shareHash', null))
+			formData.append(
+				'shareHash',
+				String(loadState(formsAppName, 'shareHash', null) ?? ''),
+			)
 
 			const url = generateOcsUrl(
 				'apps/forms/api/v3/forms/{id}/submissions/files/{questionId}',
@@ -342,38 +392,53 @@ export default {
 					t(
 						'forms',
 						'There was an error during submitting the file: {message}.',
-						{ message: error.response.data.ocs.meta.message },
+						{
+							message:
+								(
+									error as {
+										response?: {
+											data?: {
+												ocs?: {
+													meta?: {
+														message?: string
+													}
+												}
+											}
+										}
+									}
+								).response?.data?.ocs?.meta?.message ?? '',
+						},
 					),
 				)
 
 				return
 			} finally {
 				this.fileLoading = false
-				fileInput.value = null
+				fileInput.value = ''
 			}
 
 			this.$emit('update:values', [
-				...this.values,
-				...OcsResponse2Data(response),
+				...(this.values as UploadedFileValue[]),
+				...(OcsResponse2Data(response) as UploadedFileValue[]),
 			])
 		},
 
-		onMaxAllowedFilesCountInput(maxAllowedFilesCount) {
+		onMaxAllowedFilesCountInput(maxAllowedFilesCount: number | string): void {
 			return this.onExtraSettingsChange({
-				maxAllowedFilesCount: parseInt(maxAllowedFilesCount),
+				maxAllowedFilesCount: parseInt(String(maxAllowedFilesCount), 10),
 			})
 		},
 
-		onMaxFileSizeValueInput(maxFileSizeValue) {
-			this.maxFileSizeValue = maxFileSizeValue
+		onMaxFileSizeValueInput(maxFileSizeValue: number | string): void {
+			this.maxFileSizeValue = Number(maxFileSizeValue)
 			const maxFileSize = Math.round(
-				maxFileSizeValue * FILE_SIZE_UNITS[this.maxFileSizeUnit],
+				Number(maxFileSizeValue) * FILE_SIZE_UNITS[this.maxFileSizeUnit],
 			)
 
 			return this.onExtraSettingsChange({ maxFileSize })
 		},
 
-		onMaxFileSizeUnitInput(maxFileSizeUnit) {
+		onMaxFileSizeUnitInput(maxFileSizeUnit: FileSizeUnit): void {
 			this.maxFileSizeUnit = maxFileSizeUnit
 			const maxFileSize = Math.round(
 				this.maxFileSizeValue * FILE_SIZE_UNITS[maxFileSizeUnit],
@@ -382,8 +447,10 @@ export default {
 			return this.onExtraSettingsChange({ maxFileSize })
 		},
 
-		onAllowedFileTypesChange(fileType, allowed) {
-			let allowedFileTypes = this.extraSettings.allowedFileTypes || []
+		onAllowedFileTypesChange(fileType: string, allowed: boolean): void {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			let allowedFileTypes = extraSettings?.allowedFileTypes ?? []
 
 			if (allowed) {
 				allowedFileTypes.push(fileType)
@@ -396,17 +463,19 @@ export default {
 			return this.onExtraSettingsChange({ allowedFileTypes })
 		},
 
-		onAllowedFileExtensionsAdded(fileExtension) {
-			const allowedFileExtensions =
-				this.extraSettings.allowedFileExtensions || []
+		onAllowedFileExtensionsAdded(fileExtension: string): void {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			const allowedFileExtensions = extraSettings?.allowedFileExtensions ?? []
 			allowedFileExtensions.push(fileExtension)
 
 			return this.onExtraSettingsChange({ allowedFileExtensions })
 		},
 
-		onAllowedFileExtensionsDeleted(fileExtension) {
-			let allowedFileExtensions =
-				this.extraSettings.allowedFileExtensions || []
+		onAllowedFileExtensionsDeleted(fileExtension: string): void {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			let allowedFileExtensions = extraSettings?.allowedFileExtensions ?? []
 			allowedFileExtensions = allowedFileExtensions.filter(
 				(extension) => extension !== fileExtension,
 			)
@@ -414,15 +483,15 @@ export default {
 			return this.onExtraSettingsChange({ allowedFileExtensions })
 		},
 
-		onDeleteUploadedFile(uploadedFileId) {
-			const values = this.values.filter(
+		onDeleteUploadedFile(uploadedFileId: number | string): void {
+			const values = (this.values as UploadedFileValue[]).filter(
 				(value) => value.uploadedFileId !== uploadedFileId,
 			)
 
 			this.$emit('update:values', values)
 		},
 
-		async validate() {
+		async validate(): Promise<boolean> {
 			if (this.fileLoading) {
 				this.errorMessage = t(
 					'forms',
@@ -431,7 +500,7 @@ export default {
 				return false
 			}
 
-			if (this.isRequired && this.values.length === 0) {
+			if (this.isRequired && this.uploadedFiles.length === 0) {
 				this.errorMessage = t('forms', 'You must answer this question')
 				return false
 			}
@@ -440,7 +509,7 @@ export default {
 			return true
 		},
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index 057f7258b..d931d314a 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -175,8 +175,11 @@
 	</Question>
 </template>
 
-<script>
-import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+<script lang="ts">
+import type { FormsOption } from '../../models/Entities.d.ts'
+
+import { n, t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
@@ -187,7 +190,21 @@ import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
-export default {
+type GridQuestionType = GridCellType | 'text'
+
+type GridCellValue = string | number
+
+type GridMatrixValues = Record<number, Record<number, GridCellValue>>
+
+type GridQuestionValues = Record<number, unknown>
+
+type QuestionGridExtraSettings = {
+	optionsLimitMax?: number
+	optionsLimitMin?: number
+	questionType?: GridQuestionType
+}
+
+export default defineComponent({
 	name: 'QuestionGrid',
 
 	components: {
@@ -202,59 +219,69 @@ export default {
 	mixins: [QuestionMixin, QuestionMultipleMixin],
 	emits: ['update:values'],
 
+	setup() {
+		return {
+			t,
+		}
+	},
+
 	data() {
 		return {
-			isDragging: false,
-			isLoading: false,
+			isDragging: false as boolean,
+			isLoading: false as boolean,
 			questionTypes: [
 				{ label: t('forms', 'Radio'), id: GridCellType.Radio },
 				{ label: t('forms', 'Checkbox'), id: GridCellType.Checkbox },
 				{ label: t('forms', 'Number'), id: GridCellType.Number },
-				{ label: t('forms', 'Text'), id: GridCellType.Text },
-			],
+				{ label: t('forms', 'Text'), id: 'text' },
+			] as Array<{ label: string; id: GridQuestionType }>,
 		}
 	},
 
 	computed: {
-		isUnique() {
+		isUnique(): boolean {
 			return this.answerType.unique === true
 		},
 
-		shiftDragHandle() {
+		shiftDragHandle(): boolean {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
-		questionType() {
-			return this.extraSettings?.questionType ?? GridCellType.Radio
+		questionType(): GridQuestionType {
+			const extraSettings = this.extraSettings as
+				QuestionGridExtraSettings | undefined
+			return extraSettings?.questionType ?? GridCellType.Radio
 		},
 
 		columns: {
-			get() {
+			get(): FormsOption[] {
 				return this.sortOptionsOfType(this.options, OptionType.Column)
 			},
 
-			set(value) {
+			set(value: FormsOption[]) {
 				this.updateOptionsOrder(value, OptionType.Column)
 			},
 		},
 
 		rows: {
-			get() {
+			get(): FormsOption[] {
 				return this.sortOptionsOfType(this.options, OptionType.Row)
 			},
 
-			set(value) {
+			set(value: FormsOption[]) {
 				this.updateOptionsOrder(value, OptionType.Row)
 			},
 		},
 
-		plainValues() {
-			const values = {}
+		plainValues(): GridMatrixValues {
+			const values: GridMatrixValues = {}
+			const questionValues = this.values as GridQuestionValues
 			for (const row of this.rows) {
 				for (const column of this.columns) {
 					values[row.id] = values[row.id] || {}
-					values[row.id][column.id] =
-						this.values[row.id]?.[column.id] ?? ''
+					const rowValues = questionValues[row.id] as
+						Record<number, GridCellValue> | undefined
+					values[row.id][column.id] = rowValues?.[column.id] ?? ''
 				}
 			}
 
@@ -263,20 +290,20 @@ export default {
 	},
 
 	methods: {
-		async validate() {
-			if (
-				this.isRequired
-				&& (this.values.length === 0 || this.values === null)
-			) {
+		async validate(): Promise<boolean> {
+			const extraSettings = this.extraSettings as
+				QuestionGridExtraSettings | undefined
+			const values = this.values as unknown[] & { length?: number }
+			if (this.isRequired && (values.length === 0 || this.values === null)) {
 				this.errorMessage = t('forms', 'You must answer this question')
 				return false
 			}
 
 			if (!this.isUnique) {
 				// Validate limits
-				const max = this.extraSettings.optionsLimitMax ?? 0
-				const min = this.extraSettings.optionsLimitMin ?? 0
-				if (max && this.values.length > max) {
+				const max = extraSettings?.optionsLimitMax ?? 0
+				const min = extraSettings?.optionsLimitMin ?? 0
+				if (max && (values.length ?? 0) > max) {
 					this.errorMessage = n(
 						'forms',
 						'You must choose at most one option',
@@ -285,7 +312,7 @@ export default {
 					)
 					return false
 				}
-				if (min && this.values.length < min) {
+				if (min && (values.length ?? 0) < min) {
 					this.errorMessage = n(
 						'forms',
 						'You must choose at least one option',
@@ -300,31 +327,35 @@ export default {
 			return true
 		},
 
-		onDragStart() {
+		onDragStart(): void {
 			this.isDragging = true
 		},
 
-		onDragEnd() {
+		onDragEnd(): void {
 			this.$nextTick(() => {
 				this.isDragging = false
 			})
 		},
 
-		onChangeCheckboxRadio(rowId, value) {
-			const values = { ...this.values }
+		onChangeCheckboxRadio(rowId: number, value: unknown): void {
+			const values = { ...(this.values as GridQuestionValues) }
 			values[rowId] = value
 
 			this.$emit('update:values', values)
 		},
 
-		onChangeTextNumber(rowId, columnId, value) {
+		onChangeTextNumber(
+			rowId: number,
+			columnId: number,
+			value: GridCellValue,
+		): void {
 			const values = { ...this.plainValues }
 			values[rowId][columnId] = value
 
 			this.$emit('update:values', values)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index 2c2b9ed82..672477221 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -117,9 +117,10 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
 import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
 import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -127,7 +128,14 @@ import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
-export default {
+type LinearScaleExtraSettings = {
+	optionsLowest?: number | null
+	optionsHighest?: number | null
+	optionsLabelLowest?: string | null
+	optionsLabelHighest?: string | null
+}
+
+export default defineComponent({
 	name: 'QuestionLinearScale',
 
 	components: {
@@ -144,58 +152,63 @@ export default {
 	setup() {
 		return {
 			IconPencil,
+			t,
 		}
 	},
 
 	data() {
 		return {
-			isLoading: false,
+			isLoading: false as boolean,
 		}
 	},
 
 	computed: {
-		scaleOptions() {
+		scaleOptions(): number[] {
 			return Array.from(
 				{ length: this.optionsHighest - this.optionsLowest + 1 },
 				(_, i) => i + this.optionsLowest,
 			)
 		},
 
-		isUnique() {
+		isUnique(): boolean {
 			return this.answerType.unique === true
 		},
 
-		questionValues() {
+		questionValues(): unknown[] {
 			return this.values
 		},
 
 		/**
 		 * ID for the label for the lowest option
 		 */
-		labelId() {
+		labelId(): string {
 			return 'q' + this.index + '__label_lowest'
 		},
 
-		optionsLowest() {
-			return this.extraSettings?.optionsLowest ?? 1
+		optionsLowest(): number {
+			const extraSettings = this.extraSettings as
+				LinearScaleExtraSettings | undefined
+			return extraSettings?.optionsLowest ?? 1
 		},
 
-		optionsHighest() {
-			return this.extraSettings?.optionsHighest ?? 5
+		optionsHighest(): number {
+			const extraSettings = this.extraSettings as
+				LinearScaleExtraSettings | undefined
+			return extraSettings?.optionsHighest ?? 5
 		},
 
-		optionsLabelLowest() {
+		optionsLabelLowest(): string {
+			const extraSettings = this.extraSettings as
+				LinearScaleExtraSettings | undefined
 			return (
-				this.extraSettings?.optionsLabelLowest
-				?? t('forms', 'Strongly disagree')
+				extraSettings?.optionsLabelLowest ?? t('forms', 'Strongly disagree')
 			)
 		},
 
-		optionsLabelHighest() {
-			return (
-				this.extraSettings?.optionsLabelHighest
-				?? t('forms', 'Strongly agree')
-			)
+		optionsLabelHighest(): string {
+			const extraSettings = this.extraSettings as
+				LinearScaleExtraSettings | undefined
+			return extraSettings?.optionsLabelHighest ?? t('forms', 'Strongly agree')
 		},
 	},
 
@@ -207,7 +220,7 @@ export default {
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
 			if (this.isRequired && this.values.length === 0) {
 				this.errorMessage = t('forms', 'You must answer this question')
 				return false
@@ -217,28 +230,28 @@ export default {
 			return true
 		},
 
-		onChange(option) {
+		onChange(option: string): void {
 			this.$emit('update:values', [option])
 		},
 
-		onOptionsLowestChange(value) {
+		onOptionsLowestChange(value: number): void {
 			this.onExtraSettingsChange({ optionsLowest: value === 1 ? null : value })
 		},
 
-		onOptionsHighestChange(value) {
+		onOptionsHighestChange(value: number): void {
 			this.onExtraSettingsChange({
 				optionsHighest: value === 5 ? null : value,
 			})
 		},
 
-		onOptionsLabelLowestChange(value) {
+		onOptionsLabelLowestChange(value: string): void {
 			this.onExtraSettingsChange({
 				optionsLabelLowest:
 					value === t('forms', 'Strongly disagree') ? null : value,
 			})
 		},
 
-		onOptionsLabelHighestChange(value) {
+		onOptionsLabelHighestChange(value: string): void {
 			this.onExtraSettingsChange({
 				optionsLabelHighest:
 					value === t('forms', 'Strongly agree') ? null : value,
@@ -248,14 +261,22 @@ export default {
 		/**
 		 * Resizes the given label to fit within the specified constraints.
 		 *
-		 * @param {string} label - The label identifier, either 'lowest' or 'highest', indicating which label to resize.
+		 * @param label - The label identifier, either 'lowest' or 'highest', indicating which label to resize.
 		 */
-		resizeLabel(label) {
-			let textarea
+		resizeLabel(label: 'lowest' | 'highest'): void {
+			let textarea: HTMLTextAreaElement | undefined
 			if (label === 'lowest') {
-				textarea = this.$refs.lowest.$refs.input
+				textarea = (
+					this.$refs.lowest as {
+						$refs: { input: HTMLTextAreaElement }
+					}
+				).$refs.input
 			} else if (label === 'highest') {
-				textarea = this.$refs.highest.$refs.input
+				textarea = (
+					this.$refs.highest as {
+						$refs: { input: HTMLTextAreaElement }
+					}
+				).$refs.input
 			}
 			// next tick ensures that the textarea is attached to DOM
 			this.$nextTick(() => {
@@ -270,11 +291,11 @@ export default {
 		/**
 		 * Handles the blur event for a label input.
 		 *
-		 * @param {string} label - The label that is being blurred.
+		 * @param label - The label that is being blurred.
 		 *                         It can be either 'lowest' or 'highest' indicating
 		 *                         which label input (lowest value or highest value) triggered the blur event.
 		 */
-		onBlur(label) {
+		onBlur(label: 'lowest' | 'highest'): void {
 			if (label === 'lowest') {
 				this.optionsLabelLowest = this.optionsLabelLowest
 					.replace(/[\r\n]+/gm, ' ')
@@ -287,7 +308,7 @@ export default {
 			this.resizeLabel(label)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 3fb4547fc..538d1971c 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -20,7 +20,7 @@
 				:placeholder="submissionInputPlaceholder"
 				:disabled="!readOnly"
 				:required="isRequired"
-				:value="values[0]"
+				:value="textareaValue"
 				dir="auto"
 				class="question__text"
 				:maxlength="maxStringLengths.answerText"
@@ -37,11 +37,13 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
-export default {
+export default defineComponent({
 	name: 'QuestionLong',
 
 	components: {
@@ -53,7 +55,7 @@ export default {
 
 	data() {
 		return {
-			height: 1,
+			height: 1 as number,
 		}
 	},
 
@@ -64,6 +66,11 @@ export default {
 			}
 			return this.answerType.createPlaceholder
 		},
+
+		textareaValue(): string | number | readonly string[] | null | undefined {
+			return this.values[0] as
+				string | number | readonly string[] | null | undefined
+		},
 	},
 
 	watch: {
@@ -79,7 +86,7 @@ export default {
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
 			if (
 				this.isRequired
 				&& (this.values.length === 0 || this.values[0] === '')
@@ -92,13 +99,13 @@ export default {
 			return true
 		},
 
-		onInput() {
-			const textarea = this.$refs.textarea
+		onInput(): void {
+			const textarea = this.$refs.textarea as HTMLTextAreaElement
 			this.$emit('update:values', [textarea.value])
 		},
 
-		autoSizeText() {
-			const textarea = this.$refs.textarea
+		autoSizeText(): void {
+			const textarea = this.$refs.textarea as HTMLTextAreaElement | undefined
 			if (!textarea) {
 				return
 			}
@@ -106,11 +113,11 @@ export default {
 			textarea.style.cssText = `height: ${textarea.scrollHeight + 28}px`
 		},
 
-		onKeydownCtrlEnter(event) {
+		onKeydownCtrlEnter(event: KeyboardEvent): void {
 			this.$emit('keydown', event)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 6245c2223..5bdaf56dc 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -29,24 +29,24 @@
 			<template v-if="!isUnique">
 				<!-- Allow setting a minimum of options to be checked -->
 				<NcActionCheckbox
-					:modelValue="!!extraSettings?.optionsLimitMin"
+					:modelValue="!!multipleSettings.optionsLimitMin"
 					@update:modelValue="
 						(checked) => onLimitOptionsMin(checked ? 1 : null)
 					">
 					{{ t('forms', 'Require a minimum of options to be checked') }}
 				</NcActionCheckbox>
 				<NcActionInput
-					v-if="extraSettings?.optionsLimitMin"
+					v-if="multipleSettings.optionsLimitMin"
 					type="number"
 					:label="t('forms', 'Minimum options to be checked')"
 					:labelOutside="false"
 					:showTrailingButton="false"
-					:modelValue="extraSettings.optionsLimitMin"
+					:modelValue="multipleSettings.optionsLimitMin"
 					@update:modelValue="onLimitOptionsMin" />
 
 				<!-- Allow setting a maximum -->
 				<NcActionCheckbox
-					:modelValue="!!extraSettings?.optionsLimitMax"
+					:modelValue="!!multipleSettings.optionsLimitMax"
 					@update:modelValue="
 						(checked) =>
 							onLimitOptionsMax(checked ? choices.length || 1 : null)
@@ -54,12 +54,12 @@
 					{{ t('forms', 'Require a maximum of options to be checked') }}
 				</NcActionCheckbox>
 				<NcActionInput
-					v-if="extraSettings?.optionsLimitMax"
+					v-if="multipleSettings.optionsLimitMax"
 					type="number"
 					:label="t('forms', 'Maximum options to be checked')"
 					:labelOutside="false"
 					:showTrailingButton="false"
-					:modelValue="extraSettings.optionsLimitMax"
+					:modelValue="multipleSettings.optionsLimitMax"
 					@update:modelValue="onLimitOptionsMax" />
 			</template>
 			<NcActionButton closeAfterClick @click="isOptionDialogShown = true">
@@ -84,7 +84,7 @@
 					:value="answer.id.toString()"
 					:name="`${id}-answer`"
 					:type="isUnique ? 'radio' : 'checkbox'"
-					:required="checkRequired(answer.id)"
+					:required="checkRequired"
 					@invalid.prevent="validate"
 					@update:modelValue="onChange"
 					@keydown.enter.exact.prevent="onKeydownEnter">
@@ -98,7 +98,7 @@
 						:value="otherAnswer ?? QUESTION_EXTRASETTINGS_OTHER_PREFIX"
 						:name="`${id}-answer`"
 						:type="isUnique ? 'radio' : 'checkbox'"
-						:required="checkRequired('other-answer')"
+						:required="checkRequired"
 						class="question__label"
 						@invalid.prevent="validate"
 						@update:modelValue="onChangeOther"
@@ -184,12 +184,15 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsOption } from '../../models/Entities.d.ts'
+
 import IconCheckboxBlankOutline from '@material-symbols/svg-400/outlined/check_box_outline_blank.svg?raw'
 import IconContentPaste from '@material-symbols/svg-400/outlined/content_paste.svg?raw'
 import IconRadioboxBlank from '@material-symbols/svg-400/outlined/radio_button_unchecked.svg?raw'
 import { showError } from '@nextcloud/dialogs'
-import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+import { n, t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
@@ -208,7 +211,14 @@ import {
 	QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 } from '../../models/Constants.ts'
 
-export default {
+type QuestionMultipleExtraSettings = {
+	allowOtherAnswer?: boolean
+	optionsLimitMax?: number
+	optionsLimitMin?: number
+	shuffleOptions?: boolean
+}
+
+export default defineComponent({
 	name: 'QuestionMultiple',
 
 	components: {
@@ -233,6 +243,7 @@ export default {
 			IconCheckboxBlankOutline,
 			IconContentPaste,
 			IconRadioboxBlank,
+			t,
 		}
 	},
 
@@ -242,74 +253,84 @@ export default {
 			 * This is used to cache the "other" answer, meaning if the user:
 			 * checks "other" types text, unchecks "other" and then re-check "other" the typed text is preserved
 			 */
-			cachedOtherAnswerText: '',
-			QUESTION_EXTRASETTINGS_OTHER_PREFIX,
+			cachedOtherAnswerText: '' as string,
+			QUESTION_EXTRASETTINGS_OTHER_PREFIX:
+				typeof QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 
-			isDragging: false,
-			isOptionDialogShown: false,
-			isLoading: false,
+			isDragging: false as boolean,
+			isOptionDialogShown: false as boolean,
+			isLoading: false as boolean,
 
 			OptionType,
 		}
 	},
 
 	computed: {
-		isUnique() {
+		isUnique(): boolean {
 			return this.answerType.unique === true
 		},
 
-		shiftDragHandle() {
+		shiftDragHandle(): boolean {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
-		pseudoIcon() {
+		pseudoIcon(): string {
 			return this.isUnique ? IconRadioboxBlank : IconCheckboxBlankOutline
 		},
 
-		placeholderOtherAnswer() {
+		placeholderOtherAnswer(): string {
 			if (this.readOnly) {
 				return this.answerType.submitPlaceholder
 			}
 			return this.answerType.createPlaceholder
 		},
 
-		questionValues() {
-			return this.isUnique ? this.values?.[0] : this.values
+		questionValues(): string | string[] | undefined {
+			const values = this.values as string[]
+			return this.isUnique ? values?.[0] : values
+		},
+
+		multipleSettings(): QuestionMultipleExtraSettings {
+			return (
+				(this.extraSettings as QuestionMultipleExtraSettings | undefined)
+				?? {}
+			)
 		},
 
-		allowOtherAnswer() {
-			return this.extraSettings?.allowOtherAnswer ?? false
+		allowOtherAnswer(): boolean {
+			return this.multipleSettings.allowOtherAnswer ?? false
 		},
 
 		/**
 		 * The full "other" answer including prefix, undefined if no "other answer"
 		 */
-		otherAnswer() {
-			return this.values.find((v) =>
+		otherAnswer(): string | undefined {
+			const values = this.values as string[]
+			return values.find((v) =>
 				v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX),
 			)
 		},
 
 		choices: {
-			get() {
+			get(): FormsOption[] {
 				return this.sortOptionsOfType(this.options, OptionType.Choice)
 			},
 
-			set(value) {
+			set(value: FormsOption[]) {
 				this.updateOptionsOrder(value, OptionType.Choice)
 			},
 		},
 
-		availableOptions() {
+		availableOptions(): number {
 			return (
 				this.choices.filter(({ text }) => text.trim() !== '').length
 				+ (this.allowOtherAnswer ? 1 : 0)
 			)
 		},
 
-		infoMessage() {
-			const min = this.extraSettings?.optionsLimitMin ?? 0
-			const max = this.extraSettings?.optionsLimitMax ?? 0
+		infoMessage(): string | null {
+			const min = this.multipleSettings.optionsLimitMin ?? 0
+			const max = this.multipleSettings.optionsLimitMax ?? 0
 
 			if (!min && !max) {
 				return null
@@ -347,22 +368,47 @@ export default {
 				max,
 			)
 		},
+
+		/**
+		 * Is the provided answer required ?
+		 * This is needed for checkboxes as html5
+		 * doesn't allow to require at least ONE checked.
+		 * So we require the one that are checked or all
+		 * if none are checked yet.
+		 *
+		 * @return
+		 */
+		checkRequired(): boolean {
+			// false, if question not required
+			if (!this.isRequired) {
+				return false
+			}
+
+			// true for Radiobuttons
+			if (this.isUnique) {
+				return true
+			}
+
+			// For checkboxes, only required if no other is checked
+			return this.areNoneChecked
+		},
 	},
 
 	watch: {
 		// Ensure that the "other" answer is reset after toggling the checkbox
-		otherAnswer() {
+		otherAnswer(): void {
 			this.resetOtherAnswerText()
 		},
 	},
 
-	mounted() {
+	mounted(): void {
 		// Ensure the initial "other" answer is set
 		this.resetOtherAnswerText()
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
+			const values = this.values as string[]
 			if (this.isRequired && this.areNoneChecked) {
 				this.errorMessage = t('forms', 'You must answer this question')
 				return false
@@ -370,9 +416,9 @@ export default {
 
 			if (!this.isUnique) {
 				// Validate limits
-				const max = this.extraSettings.optionsLimitMax ?? 0
-				const min = this.extraSettings.optionsLimitMin ?? 0
-				if (max && this.values.length > max) {
+				const max = this.multipleSettings.optionsLimitMax ?? 0
+				const min = this.multipleSettings.optionsLimitMin ?? 0
+				if (max && values.length > max) {
 					this.errorMessage = n(
 						'forms',
 						'You must choose at most one option',
@@ -381,7 +427,7 @@ export default {
 					)
 					return false
 				}
-				if (min && this.values.length < min) {
+				if (min && values.length < min) {
 					this.errorMessage = n(
 						'forms',
 						'You must choose at least one option',
@@ -396,11 +442,11 @@ export default {
 			return true
 		},
 
-		onDragStart() {
+		onDragStart(): void {
 			this.isDragging = true
 		},
 
-		onDragEnd() {
+		onDragEnd(): void {
 			this.$nextTick(() => {
 				this.isDragging = false
 			})
@@ -409,7 +455,7 @@ export default {
 		/**
 		 * Resets the local "other" answer text to the one from the options if available
 		 */
-		resetOtherAnswerText() {
+		resetOtherAnswerText(): void {
 			if (this.otherAnswer) {
 				// make sure to use cached value if empty value is passed
 				this.cachedOtherAnswerText =
@@ -419,44 +465,49 @@ export default {
 			}
 		},
 
-		onChange(value) {
-			this.$emit('update:values', this.isUnique ? [value].flat() : value)
+		onChange(value: string | string[]): void {
+			const normalizedValue = Array.isArray(value) ? value : [value]
+			this.$emit(
+				'update:values',
+				this.isUnique ? normalizedValue.slice(0, 1) : normalizedValue,
+			)
 		},
 
 		/**
 		 * Handle toggling the "other"-answer checkbox / radio switch
 		 *
-		 * @param {string|string[]} value The new value of the answer(s)
+		 * @param value The new value of the answer(s)
 		 */
-		onChangeOther(value) {
-			value = [value].flat()
-			const pureValue = value.filter(
+		onChangeOther(value: string | string[]): void {
+			const normalizedValue = Array.isArray(value) ? value : [value]
+			const pureValue = normalizedValue.filter(
 				(v) => !v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX),
 			)
 
-			if (value.length > pureValue.length) {
+			if (normalizedValue.length > pureValue.length) {
 				// make sure to add the cached text on re-enable
 				this.onChange([
 					...pureValue,
 					`${QUESTION_EXTRASETTINGS_OTHER_PREFIX}${this.cachedOtherAnswerText}`,
 				])
 			} else {
-				this.onChange(value)
+				this.onChange(normalizedValue)
 			}
 		},
 
 		/**
 		 * Updating the maximum number
 		 *
-		 * @param {number|null} max Maximum options
+		 * @param max Maximum options
 		 */
-		onLimitOptionsMax(max) {
-			max = max && Number.parseInt(max.toString(), 10)
+		onLimitOptionsMax(max: number | string | null): void {
+			const parsedMax =
+				max === null ? null : Number.parseInt(max.toString(), 10)
 			if (this.isUnique || max === null) {
 				// For unique (radio) options we cannot set limits, also if null is passed then we need to remove the limit
 				this.onExtraSettingsChange({ optionsLimitMax: undefined })
-			} else if (max) {
-				if (max > this.availableOptions) {
+			} else if (parsedMax) {
+				if (parsedMax > this.availableOptions) {
 					showError(
 						t(
 							'forms',
@@ -469,7 +520,7 @@ export default {
 					return
 				}
 
-				if ((this.extraSettings.optionsLimitMin ?? 0) > max) {
+				if ((this.multipleSettings.optionsLimitMin ?? 0) > parsedMax) {
 					showError(
 						t(
 							'forms',
@@ -479,21 +530,22 @@ export default {
 					return
 				}
 				// If a valid number was passed, update the backend
-				this.onExtraSettingsChange({ optionsLimitMax: max })
+				this.onExtraSettingsChange({ optionsLimitMax: parsedMax })
 			}
 		},
 
 		/**
 		 * Update the minimum of checked options
 		 *
-		 * @param {number|null} min Minimum of checked options
+		 * @param min Minimum of checked options
 		 */
-		onLimitOptionsMin(min) {
-			min = min && Number.parseInt(min.toString(), 10)
+		onLimitOptionsMin(min: number | string | null): void {
+			const parsedMin =
+				min === null ? null : Number.parseInt(min.toString(), 10)
 			if (this.isUnique || min === null) {
 				this.onExtraSettingsChange({ optionsLimitMin: undefined })
-			} else if (min) {
-				if (min > this.availableOptions - 1) {
+			} else if (parsedMin) {
+				if (parsedMin > this.availableOptions - 1) {
 					showError(
 						t(
 							'forms',
@@ -507,8 +559,8 @@ export default {
 				}
 
 				if (
-					this.extraSettings.optionsLimitMax
-					&& min > this.extraSettings.optionsLimitMax
+					this.multipleSettings.optionsLimitMax
+					&& parsedMin > this.multipleSettings.optionsLimitMax
 				) {
 					showError(
 						t(
@@ -518,50 +570,26 @@ export default {
 					)
 					return
 				}
-				this.onExtraSettingsChange({ optionsLimitMin: min })
-				if (min > 0) {
+				this.onExtraSettingsChange({ optionsLimitMin: parsedMin })
+				if (parsedMin > 0) {
 					this.$emit('update:isRequired', true)
 				}
 			}
 		},
 
-		/**
-		 * Is the provided answer required ?
-		 * This is needed for checkboxes as html5
-		 * doesn't allow to require at least ONE checked.
-		 * So we require the one that are checked or all
-		 * if none are checked yet.
-		 *
-		 * @return {boolean}
-		 */
-		checkRequired() {
-			// false, if question not required
-			if (!this.isRequired) {
-				return false
-			}
-
-			// true for Radiobuttons
-			if (this.isUnique) {
-				return true
-			}
-
-			// For checkboxes, only required if no other is checked
-			return this.areNoneChecked
-		},
-
 		/**
 		 * Update status extra setting allowOtherAnswer and save on DB
 		 *
-		 * @param {boolean} allowOtherAnswer show/hide field for other answer
+		 * @param allowOtherAnswer show/hide field for other answer
 		 */
-		onAllowOtherAnswerChange(allowOtherAnswer) {
+		onAllowOtherAnswerChange(allowOtherAnswer: boolean): void {
 			return this.onExtraSettingsChange({ allowOtherAnswer })
 		},
 
 		/**
 		 * Handles the change event for the "Other" answer text input.
 		 *
-		 * @param {string} value - The new value entered for the "Other" answer.
+		 * @param value - The new value entered for the "Other" answer.
 		 *
 		 * This method performs the following actions:
 		 * 1. Updates the cached value of the "Other" answer text (`cachedOtherAnswerText`).
@@ -571,17 +599,17 @@ export default {
 		 *    - If `isUnique` is false, the emitted values will include all existing values
 		 *      (excluding any that start with the "Other" prefix) and the new prefixed "Other" answer.
 		 */
-		onOtherAnswerTextChange(value) {
-			this.cachedOtherAnswerText = value
+		onOtherAnswerTextChange(value: string | number): void {
+			this.cachedOtherAnswerText = String(value)
 			// Prefix the value
-			const prefixedValue = `${QUESTION_EXTRASETTINGS_OTHER_PREFIX}${value}`
+			const prefixedValue = `${QUESTION_EXTRASETTINGS_OTHER_PREFIX}${String(value)}`
 			// emit the values and add the "other" answer
 			this.$emit(
 				'update:values',
 				this.isUnique
 					? [prefixedValue]
 					: [
-							...this.values.filter(
+							...(this.values as string[]).filter(
 								(v) =>
 									!v.startsWith(
 										QUESTION_EXTRASETTINGS_OTHER_PREFIX,
@@ -592,7 +620,7 @@ export default {
 			)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index 9a7fe5ed5..8668fd80e 100644
--- a/src/components/Questions/QuestionRanking.vue
+++ b/src/components/Questions/QuestionRanking.vue
@@ -193,13 +193,16 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsOption } from '../../models/Entities.d.ts'
+
 import IconClose from '@material-symbols/svg-400/outlined/close.svg?raw'
 import IconContentPaste from '@material-symbols/svg-400/outlined/content_paste.svg?raw'
 import IconDragIndicator from '@material-symbols/svg-400/outlined/drag_indicator.svg?raw'
 import IconArrowDown from '@material-symbols/svg-400/outlined/keyboard_arrow_down.svg?raw'
 import IconArrowUp from '@material-symbols/svg-400/outlined/keyboard_arrow_up.svg?raw'
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
@@ -214,7 +217,7 @@ import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { OptionType } from '../../models/Constants.ts'
 
-export default {
+export default defineComponent({
 	name: 'QuestionRanking',
 
 	components: {
@@ -240,33 +243,34 @@ export default {
 			IconClose,
 			IconContentPaste,
 			IconDragIndicator,
+			t,
 		}
 	},
 
 	data() {
 		return {
-			errorMessage: null,
-			isDragging: false,
-			isRanking: false,
-			isLoading: false,
-			isOptionDialogShown: false,
-			rankedOptions: [],
-			unrankedOptions: [],
+			errorMessage: null as string | null,
+			isDragging: false as boolean,
+			isRanking: false as boolean,
+			isLoading: false as boolean,
+			isOptionDialogShown: false as boolean,
+			rankedOptions: [] as FormsOption[],
+			unrankedOptions: [] as FormsOption[],
 			OptionType,
 		}
 	},
 
 	computed: {
-		shiftDragHandle() {
+		shiftDragHandle(): boolean {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
 		choices: {
-			get() {
+			get(): FormsOption[] {
 				return this.sortOptionsOfType(this.options, OptionType.Choice)
 			},
 
-			set(value) {
+			set(value: FormsOption[]): void {
 				this.updateOptionsOrder(value, OptionType.Choice)
 			},
 		},
@@ -289,7 +293,7 @@ export default {
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
 			const optionsCount = this.sortOptionsOfType(
 				this.options,
 				OptionType.Choice,
@@ -308,11 +312,11 @@ export default {
 			return true
 		},
 
-		onDragStart() {
+		onDragStart(): void {
 			this.isDragging = true
 		},
 
-		onDragEnd() {
+		onDragEnd(): void {
 			this.$nextTick(() => {
 				this.isDragging = false
 			})
@@ -321,15 +325,17 @@ export default {
 		/**
 		 * Initialize ranked/unranked options from existing values or default order
 		 */
-		initRankedOptions() {
+		initRankedOptions(): void {
 			const sorted = this.sortOptionsOfType(this.options, OptionType.Choice)
 
 			if (this.values && this.values.length > 0) {
 				// Restore order from saved values (array of option IDs)
-				const byId = Object.fromEntries(sorted.map((o) => [o.id, o]))
+				const byId = Object.fromEntries(
+					sorted.map((o) => [o.id, o]),
+				) as Record<number, FormsOption>
 				this.rankedOptions = this.values
-					.map((id) => byId[parseInt(id)])
-					.filter(Boolean)
+					.map((id) => byId[parseInt(String(id), 10)])
+					.filter((option): option is FormsOption => Boolean(option))
 				this.unrankedOptions = sorted.filter(
 					(o) => !this.rankedOptions.some((r) => r.id === o.id),
 				)
@@ -347,9 +353,9 @@ export default {
 		/**
 		 * Move an option from the unranked pool to the ranked list
 		 *
-		 * @param {object} option The option to rank
+		 * @param option The option to rank
 		 */
-		rankOption(option) {
+		rankOption(option: FormsOption): void {
 			this.unrankedOptions = this.unrankedOptions.filter(
 				(o) => o.id !== option.id,
 			)
@@ -360,9 +366,9 @@ export default {
 		/**
 		 * Move an option from the ranked list back to the unranked pool
 		 *
-		 * @param {object} option The option to unrank
+		 * @param option The option to unrank
 		 */
-		unrankOption(option) {
+		unrankOption(option: FormsOption): void {
 			this.rankedOptions = this.rankedOptions.filter((o) => o.id !== option.id)
 			this.unrankedOptions.push(option)
 			this.emitValues()
@@ -371,11 +377,11 @@ export default {
 		/**
 		 * Move the ranked option at index up by one position
 		 *
-		 * @param {number} index Current index
+		 * @param index Current index
 		 */
-		onMoveUp(index) {
+		onMoveUp(index: number): void {
 			if (index <= 0) return
-			const items = [...this.rankedOptions]
+			const items = [...this.rankedOptions] as FormsOption[]
 			;[items[index - 1], items[index]] = [items[index], items[index - 1]]
 			this.rankedOptions = items
 			this.emitValues()
@@ -389,11 +395,11 @@ export default {
 		/**
 		 * Move the ranked option at index down by one position
 		 *
-		 * @param {number} index Current index
+		 * @param index Current index
 		 */
-		onMoveDown(index) {
+		onMoveDown(index: number): void {
 			if (index >= this.rankedOptions.length - 1) return
-			const items = [...this.rankedOptions]
+			const items = [...this.rankedOptions] as FormsOption[]
 			;[items[index], items[index + 1]] = [items[index + 1], items[index]]
 			this.rankedOptions = items
 			this.emitValues()
@@ -409,26 +415,27 @@ export default {
 		/**
 		 * Re-focus a button ref inside a v-for after reorder
 		 *
-		 * @param {string} refName The ref name ('buttonOptionUp' or 'buttonOptionDown')
-		 * @param {number} index The index of the item in the v-for
+		 * @param refName The ref name ('buttonOptionUp' or 'buttonOptionDown')
+		 * @param index The index of the item in the v-for
 		 */
-		focusButton(refName, index) {
+		focusButton(refName: string, index: number): void {
 			this.$nextTick(() => {
-				const refs = this.$refs[refName]
+				const refs = this.$refs[refName] as
+					Array<{ $el?: { focus?: () => void } }> | undefined
 				if (Array.isArray(refs) && refs[index]) {
-					refs[index].$el?.focus()
+					refs[index].$el?.focus?.()
 				}
 			})
 		},
 
-		onRankingStart() {
+		onRankingStart(): void {
 			this.isRanking = true
 		},
 
 		/**
 		 * Emit the current ranking after a drag reorder
 		 */
-		onRankingEnd() {
+		onRankingEnd(): void {
 			this.$nextTick(() => {
 				this.isRanking = false
 			})
@@ -438,7 +445,7 @@ export default {
 		/**
 		 * Emit the current values based on ranking state
 		 */
-		emitValues() {
+		emitValues(): void {
 			if (this.rankedOptions.length === 0) {
 				// Nothing ranked — emit empty to signal unanswered
 				this.$emit('update:values', [])
@@ -450,7 +457,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index add5b0b57..79bbacb84 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -21,7 +21,7 @@
 				:disabled="!readOnly"
 				:name="name || undefined"
 				:required="isRequired"
-				:value="values[0]"
+				:value="inputValue"
 				class="question__input"
 				dir="auto"
 				:maxlength="maxStringLengths.answerText"
@@ -78,9 +78,11 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
 import IconRegex from '@material-symbols/svg-400/outlined/regular_expression.svg?raw'
+import { t } from '@nextcloud/l10n'
 import debounce from 'debounce'
+import { defineComponent } from 'vue'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -91,7 +93,7 @@ import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
 import validationTypes from '../../models/ValidationTypes.ts'
 import { splitRegex, validateExpression } from '../../utils/RegularExpression.ts'
 
-export default {
+export default defineComponent({
 	name: 'QuestionShort',
 
 	components: {
@@ -108,13 +110,14 @@ export default {
 	setup() {
 		return {
 			IconRegex,
+			t,
 		}
 	},
 
 	data() {
 		return {
 			validationTypes,
-			isValidationTypeMenuOpen: false,
+			isValidationTypeMenuOpen: false as boolean,
 		}
 	},
 
@@ -143,7 +146,10 @@ export default {
 		 * Name of the current validation type, fallsback to 'text'
 		 */
 		validationType() {
-			return this.extraSettings?.validationType || 'text'
+			return (
+				(this.extraSettings as { validationType?: string } | undefined)
+					?.validationType || 'text'
+			)
 		},
 
 		/**
@@ -157,14 +163,21 @@ export default {
 		 * The regular expression
 		 */
 		validationRegex() {
-			return this.extraSettings?.validationRegex || ''
+			return (
+				(this.extraSettings as { validationRegex?: string } | undefined)
+					?.validationRegex || ''
+			)
+		},
+
+		inputValue(): string | number | readonly string[] | null | undefined {
+			return this.values[0] as
+				string | number | readonly string[] | null | undefined
 		},
 	},
 
 	methods: {
-		async validate() {
-			/** @type {HTMLInputElement} */
-			const input = this.$refs.input
+		async validate(): Promise<boolean> {
+			const input = this.$refs.input as unknown as HTMLInputElement
 			const value = input.value
 
 			// Clear the previous custom error before checking native validity.
@@ -192,13 +205,14 @@ export default {
 			return true
 		},
 
-		debounceValidate: debounce(async function () {
+		debounceValidate: debounce(async function (this: {
+			validate: () => Promise<boolean>
+		}) {
 			this.validate()
 		}, INPUT_DEBOUNCE_MS),
 
-		onInput() {
-			/** @type {HTMLInputElement} */
-			const input = this.$refs.input
+		onInput(): void {
+			const input = this.$refs.input as unknown as HTMLInputElement
 			const value = input.value
 			this.$emit('update:values', [value])
 			this.debounceValidate()
@@ -207,9 +221,9 @@ export default {
 		/**
 		 * Change input type
 		 *
-		 * @param {string} validationType new input type
+		 * @param validationType new input type
 		 */
-		onChangeValidationType(validationType) {
+		onChangeValidationType(validationType: string): void {
 			if (validationType === 'regex') {
 				// Make sure to also submit a regex (even if empty)
 				this.onExtraSettingsChange({
@@ -232,15 +246,24 @@ export default {
 		 * Ensures the regex is enclosed with delimters, as required for PCRE,
 		 * and regex is only using modifiers supported by JS *and* PHP
 		 *
-		 * @param {InputEvent|SubmitEvent} event input event
-		 * @return {boolean} true if the regex is valid
+		 * @param event input event
+		 * @return true if the regex is valid
 		 */
-		onInputRegex(event) {
-			if (event?.isComposing) {
+		onInputRegex(event: InputEvent | SubmitEvent): boolean {
+			if ('isComposing' in event && event.isComposing) {
 				return false
 			}
 
-			const input = this.$refs.regexInput.$el.querySelector('input')
+			const input = (
+				this.$refs.regexInput as unknown as {
+					$el: {
+						querySelector: (selector: string) => HTMLInputElement | null
+					}
+				}
+			).$el.querySelector('input')
+			if (!input) {
+				return false
+			}
 			const validationRegex = input.value
 
 			// remove potential previous validity
@@ -258,15 +281,15 @@ export default {
 		/**
 		 * Same as `onInputRegex` but for convinience also closes the menu
 		 *
-		 * @param {SubmitEvent} event regex submit event
+		 * @param event regex submit event
 		 */
-		onSubmitRegex(event) {
+		onSubmitRegex(event: SubmitEvent): void {
 			if (this.onInputRegex(event)) {
 				this.isValidationTypeMenuOpen = false
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Results/Answer.vue b/src/components/Results/Answer.vue
index 9b33270b9..2fc012911 100644
--- a/src/components/Results/Answer.vue
+++ b/src/components/Results/Answer.vue
@@ -77,13 +77,16 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import type { PropType } from 'vue'
+
 import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
+import { defineComponent } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcHighlight from '@nextcloud/vue/components/NcHighlight'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 
-export default {
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Answer',
 	components: {
@@ -94,7 +97,10 @@ export default {
 
 	props: {
 		answers: {
-			type: Array,
+			type: Array as PropType<
+				Array<{ id: number; text: string; url?: string }>
+			>,
+
 			required: false,
 			default: () => [],
 		},
@@ -122,19 +128,22 @@ export default {
 		},
 
 		gridColumns: {
-			type: Array,
+			type: Array as PropType<Array<{ id: number; text: string }>>,
 			required: false,
 			default: () => [],
 		},
 
 		gridRows: {
-			type: Array,
+			type: Array as PropType<Array<{ id: number; text: string }>>,
 			required: false,
 			default: () => [],
 		},
 
 		gridValue: {
-			type: Object,
+			type: Object as PropType<
+				Record<string, string[] | string | Record<string, string | number>>
+			>,
+
 			required: false,
 			default: () => null,
 		},
@@ -151,7 +160,7 @@ export default {
 			IconFile,
 		}
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Results/ResultsSummary.vue b/src/components/Results/ResultsSummary.vue
index b2f652280..0cd0c6fa7 100644
--- a/src/components/Results/ResultsSummary.vue
+++ b/src/components/Results/ResultsSummary.vue
@@ -155,14 +155,19 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { PropType } from 'vue'
+
 import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import answerTypes from '../../models/AnswerTypes.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
-export default {
+export default defineComponent({
 	name: 'ResultsSummary',
 
 	components: {
@@ -171,12 +176,12 @@ export default {
 
 	props: {
 		submissions: {
-			type: Array,
+			type: Array as PropType<any[]>,
 			required: true,
 		},
 
 		question: {
-			type: Object,
+			type: Object as PropType<any>,
 			required: true,
 		},
 	},
@@ -184,6 +189,7 @@ export default {
 	setup() {
 		return {
 			IconFile,
+			t,
 		}
 	},
 
@@ -247,7 +253,7 @@ export default {
 			// Build list of question options
 			let questionOptionsStats
 			if (this.question.type !== 'linearscale') {
-				questionOptionsStats = this.question.options.map((option) => ({
+				questionOptionsStats = this.question.options.map((option: any) => ({
 					...option,
 					count: 0,
 					percentage: 0,
@@ -290,7 +296,7 @@ export default {
 			// Go through submissions to check which options have how many responses
 			this.submissions.forEach((submission) => {
 				const answers = submission.answers.filter(
-					(answer) => answer.questionId === this.question.id,
+					(answer: any) => answer.questionId === this.question.id,
 				)
 				if (!answers.length) {
 					// Record 'No response'
@@ -298,9 +304,9 @@ export default {
 				}
 
 				// Check question options to find which needs to be increased
-				answers.forEach((answer) => {
+				answers.forEach((answer: any) => {
 					const optionsStatIndex = questionOptionsStats.findIndex(
-						(option) => option.text === answer.text,
+						(option: any) => option.text === answer.text,
 					)
 					if (optionsStatIndex < 0) {
 						if (this.question.extraSettings?.allowOtherAnswer) {
@@ -320,7 +326,7 @@ export default {
 
 			// Sort options by response count
 			if (this.question.type !== 'linearscale') {
-				questionOptionsStats.sort((object1, object2) => {
+				questionOptionsStats.sort((object1: any, object2: any) => {
 					return object2.count - object1.count
 				})
 			} else {
@@ -328,14 +334,14 @@ export default {
 				questionOptionsStats.push(questionOptionsStats.shift())
 			}
 
-			questionOptionsStats.forEach((questionOptionsStat) => {
+			questionOptionsStats.forEach((questionOptionsStat: any) => {
 				// Fill percentage values
 				questionOptionsStat.percentage = Math.round(
 					(100 * questionOptionsStat.count) / this.submissions.length,
 				)
 				// Mark all best results
 				const maxCount = Math.max(
-					...questionOptionsStats.map((option) => option.count),
+					...questionOptionsStats.map((option: any) => option.count),
 				)
 				questionOptionsStat.best = questionOptionsStat.count === maxCount
 			})
@@ -348,7 +354,7 @@ export default {
 		 */
 		rankingStats() {
 			const n = this.question.options.length
-			const stats = {}
+			const stats: Record<string | number, any> = {}
 
 			for (const opt of this.question.options) {
 				stats[opt.id] = {
@@ -362,11 +368,11 @@ export default {
 
 			for (const submission of this.submissions) {
 				const answer = submission.answers.find(
-					(a) => a.questionId === this.question.id,
+					(a: any) => a.questionId === this.question.id,
 				)
 				if (!answer) continue
 				const ranked = JSON.parse(answer.text)
-				ranked.forEach((optionId, index) => {
+				ranked.forEach((optionId: string | number, index: number) => {
 					if (stats[optionId]) {
 						stats[optionId].bordaTotal += n - index
 						stats[optionId].rankSum += index + 1
@@ -376,16 +382,16 @@ export default {
 			}
 
 			const result = Object.values(stats)
-				.map((s) => ({
+				.map((s: any) => ({
 					...s,
 					avgRank: s.count > 0 ? (s.rankSum / s.count).toFixed(1) : '-',
 				}))
-				.sort((a, b) => b.bordaTotal - a.bordaTotal)
+				.sort((a: any, b: any) => b.bordaTotal - a.bordaTotal)
 
 			// Mark best (highest Borda score)
 			if (result.length > 0 && result[0].bordaTotal > 0) {
 				const best = result[0].bordaTotal
-				result.forEach((o) => {
+				result.forEach((o: any) => {
 					o.best = o.bordaTotal === best
 				})
 			}
@@ -400,18 +406,18 @@ export default {
 
 		gridColumns() {
 			return this.question.options.filter(
-				(option) => option.optionType === OptionType.Column,
+				(option: any) => option.optionType === OptionType.Column,
 			)
 		},
 
 		gridRows() {
 			return this.question.options.filter(
-				(option) => option.optionType === OptionType.Row,
+				(option: any) => option.optionType === OptionType.Row,
 			)
 		},
 
 		gridValue() {
-			const matrix = {}
+			const matrix: Record<string, Record<string, any>> = {}
 			for (const row of this.gridRows) {
 				for (const column of this.gridColumns) {
 					matrix[row.id] = matrix[row.id] || {}
@@ -424,9 +430,9 @@ export default {
 				}
 			}
 
-			const answers = []
-			this.submissions.forEach((submission) => {
-				submission.answers.forEach((answer) => {
+			const answers: any[] = []
+			this.submissions.forEach((submission: any) => {
+				submission.answers.forEach((answer: any) => {
 					if (answer.questionId === this.question.id) {
 						answers.push(answer)
 					}
@@ -491,8 +497,8 @@ export default {
 						=== GridCellType.Checkbox
 					) {
 						totalAnswersCount = Object.entries(matrix[rowId])
-							.map(([, cell]) => cell.answersCount)
-							.reduce((a, b) => a + b, 0)
+							.map(([, cell]: [string, any]) => cell.answersCount)
+							.reduce((a: number, b: number) => a + b, 0)
 					}
 					if (totalAnswersCount === 0) {
 						totalAnswersCount = 1
@@ -524,15 +530,15 @@ export default {
 
 		// For text answers like short answer and long text
 		answers() {
-			const answersModels = []
+			const answersModels: any[] = []
 
 			// Also record 'No response'
 			let noResponseCount = 0
 
 			// Go through submissions to check which options have how many responses
-			this.submissions.forEach((submission) => {
+			this.submissions.forEach((submission: any) => {
 				const answers = submission.answers.filter(
-					(answer) => answer.questionId === this.question.id,
+					(answer: any) => answer.questionId === this.question.id,
 				)
 				if (!answers.length) {
 					// Record 'No response'
@@ -550,7 +556,7 @@ export default {
 						text: `${answers[0].text} - ${answers[1].text}`,
 					})
 				} else {
-					answers.forEach((answer) => {
+					answers.forEach((answer: any) => {
 						if (answer.fileId) {
 							answersModels.push({
 								id: answer.id,
@@ -586,7 +592,7 @@ export default {
 			return answersModels
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Results/Submission.vue b/src/components/Results/Submission.vue
index b90f3e3b5..3808bb347 100644
--- a/src/components/Results/Submission.vue
+++ b/src/components/Results/Submission.vue
@@ -48,11 +48,15 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import type { PropType } from 'vue'
+
 import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
 import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -60,7 +64,49 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Answer from './Answer.vue'
 import { OptionType } from '../../models/Constants.ts'
 
-export default {
+interface SubmissionAnswer {
+	id: number
+	questionId: number
+	text: string
+	fileId?: number
+}
+
+interface SubmissionModel {
+	id: number
+	userDisplayName: string
+	timestamp: string | number
+	answers: SubmissionAnswer[]
+}
+
+interface QuestionOption {
+	id: number
+	text: string
+	optionType: string
+}
+
+interface QuestionModel {
+	id: number
+	text: string
+	type: string
+	options: QuestionOption[]
+	extraSettings: {
+		questionType?: 'radio' | 'checkbox' | 'number'
+	}
+}
+
+interface AnsweredQuestion {
+	id: number
+	text: string
+	type: string
+	squashedAnswers?: string
+	answers?: Array<{ id: number; text: string; url?: string }>
+	gridValue?: Record<string, string | string[] | Record<string, string>> | null
+	gridCellType?: string
+	gridRows?: QuestionOption[]
+	gridColumns?: QuestionOption[]
+}
+
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Submission',
 
@@ -79,12 +125,12 @@ export default {
 		},
 
 		submission: {
-			type: Object,
+			type: Object as PropType<SubmissionModel>,
 			required: true,
 		},
 
 		questions: {
-			type: Array,
+			type: Array as PropType<QuestionModel[]>,
 			required: true,
 		},
 
@@ -110,12 +156,13 @@ export default {
 		return {
 			IconDelete,
 			IconPencil,
+			t,
 		}
 	},
 
 	computed: {
 		// Format submission-timestamp to DateTime
-		submissionDateTime() {
+		submissionDateTime(): string {
 			return moment(this.submission.timestamp, 'X').format('LLLL')
 		},
 
@@ -123,12 +170,12 @@ export default {
 		 * Join answered Questions with corresponding answers.
 		 * Multiple answers to a question are squashed into one string.
 		 *
-		 * @return {Array}
+		 * @return
 		 */
-		answeredQuestions() {
-			const answeredQuestionsArray = []
+		answeredQuestions(): AnsweredQuestion[] {
+			const answeredQuestionsArray: AnsweredQuestion[] = []
 
-			this.questions.forEach((question) => {
+			this.questions.forEach((question: QuestionModel) => {
 				const answers = this.submission.answers.filter(
 					(answer) => answer.questionId === question.id,
 				)
@@ -152,14 +199,17 @@ export default {
 						}),
 					})
 				} else if (question.type === 'grid') {
-					const optionsPerId = {}
+					const optionsPerId: Record<string, QuestionOption> = {}
 					question.options.forEach((option) => {
 						optionsPerId[option.id] = option
 					})
 					let squashedAnswers = ''
 
 					const gridValue = answers[0].text
-						? JSON.parse(answers[0].text)
+						? (JSON.parse(answers[0].text) as Record<
+								string,
+								string | string[] | Record<string, string>
+							>)
 						: null
 					// fixme: rename `questionType` to `gridCellType` everywhere in BE and FE
 					if (
@@ -172,7 +222,7 @@ export default {
 									optionsPerId[key]
 									&& optionsPerId[gridValue[key]],
 							)
-							.map((key) => {
+							.map((key: string) => {
 								return (
 									optionsPerId[key].text
 									+ ': '
@@ -190,14 +240,17 @@ export default {
 									optionsPerId[key]
 									&& Array.isArray(gridValue[key]),
 							)
-							.map((key) => {
+							.map((key: string) => {
 								return (
 									optionsPerId[key].text
 									+ ': '
 									+ gridValue[key]
-										.filter((optionId) => optionsPerId[optionId])
+										.filter(
+											(optionId: string) =>
+												optionsPerId[optionId],
+										)
 										.map(
-											(optionId) =>
+											(optionId: string) =>
 												optionsPerId[optionId].text,
 										)
 										.join(', ')
@@ -232,7 +285,7 @@ export default {
 						squashedAnswers,
 					})
 				} else if (question.type === 'ranking') {
-					const optionsPerId = {}
+					const optionsPerId: Record<string, QuestionOption> = {}
 					question.options.forEach((option) => {
 						optionsPerId[option.id] = option
 					})
@@ -240,7 +293,7 @@ export default {
 						? JSON.parse(answers[0].text)
 						: []
 					const squashedAnswers = rankedIds
-						.map((id, index) => {
+						.map((id: string, index: number) => {
 							const option = optionsPerId[id]
 							return option
 								? `${index + 1}. ${option.text}`
@@ -272,11 +325,11 @@ export default {
 	},
 
 	methods: {
-		onDelete() {
+		onDelete(): void {
 			this.$emit('delete')
 		},
 
-		onCopy(event) {
+		onCopy(event: ClipboardEvent): void {
 			if (!event.clipboardData) return
 
 			const selection = window.getSelection()
@@ -291,9 +344,9 @@ export default {
 			event.preventDefault()
 		},
 
-		serializeNode(node) {
+		serializeNode(node: Node): string {
 			if (node.nodeType === Node.TEXT_NODE) {
-				return node.textContent
+				return node.textContent ?? ''
 			}
 
 			if (
@@ -303,7 +356,7 @@ export default {
 				return ''
 			}
 
-			const tag = node.tagName?.toLowerCase()
+			const tag = (node as Element).tagName?.toLowerCase()
 
 			if (tag && ['svg', 'script', 'style'].includes(tag)) return ''
 			if (tag === 'br') return '\n'
@@ -313,7 +366,7 @@ export default {
 				.join('')
 
 			// Answer blocks get a blank line before them as visual separator
-			if (tag === 'div' && node.classList?.contains('answer')) {
+			if (tag === 'div' && (node as Element).classList?.contains('answer')) {
 				const trimmed = children.replace(/\s+$/, '')
 				return trimmed ? '\n' + trimmed + '\n' : ''
 			}
@@ -344,7 +397,7 @@ export default {
 			return children
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SidebarTabs/SettingsSidebarTab.vue b/src/components/SidebarTabs/SettingsSidebarTab.vue
index 32035530d..9ad7f1881 100644
--- a/src/components/SidebarTabs/SettingsSidebarTab.vue
+++ b/src/components/SidebarTabs/SettingsSidebarTab.vue
@@ -273,11 +273,15 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsQuestion } from '../../models/Entities.d.ts'
+
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { vOnClickOutside as ClickOutside } from '@vueuse/components'
+import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
@@ -291,7 +295,24 @@ import svgLockOpen from '../../../img/lock_open.svg?raw'
 import ShareTypes from '../../mixins/ShareTypes.ts'
 import { FormState } from '../../models/Constants.ts'
 
-export default {
+const formsAppName = 'forms'
+
+type ConfirmationEmailQuestionOption = {
+	id: number
+	label: string
+}
+
+interface SettingsAppConfig {
+	allowComments: boolean
+	allowConfirmationEmail: boolean
+	[key: string]: unknown
+}
+
+interface MarkdownRenderer {
+	render: (input: string) => string
+}
+
+export default defineComponent({
 	components: {
 		NcButton,
 		NcInputField,
@@ -331,15 +352,38 @@ export default {
 
 	emits: ['update:formProp'],
 
-	data() {
+	setup() {
+		return {
+			t,
+		}
+	},
+
+	data(): {
+		formatter: {
+			stringify: (datetime: Date | [Date, Date] | null) => string
+			parse: (value: number) => Date
+		}
+		appConfig: SettingsAppConfig
+		maxStringLengths: Record<string, number>
+		editMessage: boolean
+		svgLockOpen: string
+		confirmationEmailSubject: string
+		confirmationEmailBody: string
+	} {
 		return {
 			formatter: {
-				stringify: this.stringifyDate,
+				stringify: (datetime: Date | [Date, Date] | null) => {
+					if (datetime instanceof Date) {
+						return this.stringifyDate(datetime)
+					}
+					return this.stringifyDate(new Date())
+				},
+
 				parse: this.parseTimestampToDate,
 			},
 
-			appConfig: loadState('forms', 'appConfig'),
-			maxStringLengths: loadState('forms', 'maxStringLengths'),
+			appConfig: loadState(formsAppName, 'appConfig') as SettingsAppConfig,
+			maxStringLengths: loadState(formsAppName, 'maxStringLengths'),
 			/** If custom submission message is shown as input or rendered markdown */
 			editMessage: false,
 			svgLockOpen,
@@ -349,18 +393,18 @@ export default {
 	},
 
 	computed: {
-		isCurrentUserOwner() {
-			return getCurrentUser().uid === this.form.ownerId
+		isCurrentUserOwner(): boolean {
+			return getCurrentUser()?.uid === this.form.ownerId
 		},
 
-		isFormLockedPermanently() {
+		isFormLockedPermanently(): boolean {
 			return this.locked && this.form.lockedUntil === 0
 		},
 
 		/**
 		 * If the form has a custom submission message or the user wants to add one (settings switch)
 		 */
-		hasCustomSubmissionMessage() {
+		hasCustomSubmissionMessage(): boolean {
 			return (
 				this.form?.submissionMessage !== undefined
 				&& this.form?.submissionMessage !== null
@@ -370,11 +414,11 @@ export default {
 		/**
 		 * Submit Multiple is disabled, if it cannot be controlled.
 		 */
-		disableSubmitMultiple() {
+		disableSubmitMultiple(): boolean {
 			return this.hasPublicLink || this.form.isAnonymous
 		},
 
-		disableSubmitMultipleExplanation() {
+		disableSubmitMultipleExplanation(): string {
 			if (this.disableSubmitMultiple) {
 				return t(
 					'forms',
@@ -384,7 +428,7 @@ export default {
 			return ''
 		},
 
-		hasPublicLink() {
+		hasPublicLink(): boolean {
 			return (
 				this.form.shares.filter(
 					(share) => share.shareType === this.SHARE_TYPES.SHARE_TYPE_LINK,
@@ -393,23 +437,23 @@ export default {
 		},
 
 		// If disabled, submitMultiple will be casted to true
-		submitMultiple() {
+		submitMultiple(): boolean {
 			return this.disableSubmitMultiple || this.form.submitMultiple
 		},
 
-		formExpires() {
+		formExpires(): boolean {
 			return this.form.expires !== 0
 		},
 
-		formArchived() {
+		formArchived(): boolean {
 			return this.form.state === FormState.FormArchived
 		},
 
-		formClosed() {
+		formClosed(): boolean {
 			return this.form.state !== FormState.FormActive
 		},
 
-		hasMaxSubmissions() {
+		hasMaxSubmissions(): boolean {
 			return (
 				this.form.maxSubmissions !== null
 				&& this.form.maxSubmissions !== undefined
@@ -417,53 +461,56 @@ export default {
 		},
 
 		maxSubmissionsValue: {
-			get() {
+			get(): number {
 				return this.form.maxSubmissions ?? 1
 			},
 
-			set(value) {
+			set(value: number): void {
 				this.$emit('update:formProp', 'maxSubmissions', value)
 			},
 		},
 
-		isExpired() {
+		isExpired(): boolean {
 			return this.form.expires && moment().unix() > this.form.expires
 		},
 
-		expirationDate() {
+		expirationDate(): Date {
 			return moment(this.form.expires, 'X').toDate()
 		},
 
 		/**
 		 * The submission message rendered as HTML
 		 */
-		submissionMessageHTML() {
-			return this.$markdownit.render(this.form.submissionMessage || '')
+		submissionMessageHTML(): string {
+			return (this.$markdownit as MarkdownRenderer).render(
+				this.form.submissionMessage || '',
+			)
 		},
 
-		emailBodyPlaceholder() {
+		emailBodyPlaceholder(): string {
 			return t(
 				'forms',
 				'Hello,\n\nThank you for submitting the form "{formTitle}".\n\nBest regards',
 			)
 		},
 
-		emailQuestionCount() {
+		emailQuestionCount(): number {
 			return this.confirmationEmailQuestions.length
 		},
 
-		confirmationEmailQuestions() {
+		confirmationEmailQuestions(): FormsQuestion[] {
 			const questions = this.form?.questions || []
 			return questions.filter(
-				(question) =>
+				(question: FormsQuestion) =>
 					question.type === 'short'
 					&& question.extraSettings?.validationType === 'email',
 			)
 		},
 
-		selectedConfirmationEmailQuestion() {
+		selectedConfirmationEmailQuestion(): FormsQuestion | null {
 			const selectedQuestion = this.confirmationEmailQuestions.find(
-				(question) => question.id === this.form.confirmationEmailQuestionId,
+				(question: FormsQuestion) =>
+					question.id === this.form.confirmationEmailQuestionId,
 			)
 			if (selectedQuestion) {
 				return selectedQuestion
@@ -479,7 +526,7 @@ export default {
 			return null
 		},
 
-		selectedConfirmationEmailQuestionId() {
+		selectedConfirmationEmailQuestionId(): number | string {
 			return (
 				this.form.confirmationEmailQuestionId
 				?? this.selectedConfirmationEmailQuestion?.id
@@ -487,14 +534,14 @@ export default {
 			)
 		},
 
-		confirmationEmailQuestionOptions() {
+		confirmationEmailQuestionOptions(): ConfirmationEmailQuestionOption[] {
 			return this.confirmationEmailQuestions.map((question) => ({
 				id: question.id,
 				label: this.confirmationEmailQuestionLabel(question),
 			}))
 		},
 
-		selectedConfirmationEmailQuestionOption() {
+		selectedConfirmationEmailQuestionOption(): ConfirmationEmailQuestionOption | null {
 			return (
 				this.confirmationEmailQuestionOptions.find(
 					(question) =>
@@ -503,7 +550,7 @@ export default {
 			)
 		},
 
-		confirmationEmailErrorText() {
+		confirmationEmailErrorText(): string {
 			if (this.emailQuestionCount === 0) {
 				return t(
 					'forms',
@@ -521,21 +568,21 @@ export default {
 			return ''
 		},
 
-		confirmationEmailNoteCardType() {
+		confirmationEmailNoteCardType(): 'warning' | 'info' {
 			if (this.requiresConfirmationEmailQuestionIdSelection) {
 				return 'warning'
 			}
 			return 'info'
 		},
 
-		requiresConfirmationEmailQuestionIdSelection() {
+		requiresConfirmationEmailQuestionIdSelection(): boolean {
 			return (
 				this.emailQuestionCount > 1
 				&& !this.selectedConfirmationEmailQuestion
 			)
 		},
 
-		isConfirmationEmailConfigurationBlocked() {
+		isConfirmationEmailConfigurationBlocked(): boolean {
 			return (
 				this.form.confirmationEmailEnabled
 				&& (this.emailQuestionCount === 0
@@ -545,11 +592,11 @@ export default {
 	},
 
 	watch: {
-		'form.confirmationEmailSubject': function (val) {
+		'form.confirmationEmailSubject': function (val: string | null | undefined) {
 			this.confirmationEmailSubject = val || ''
 		},
 
-		'form.confirmationEmailBody': function (val) {
+		'form.confirmationEmailBody': function (val: string | null | undefined) {
 			this.confirmationEmailBody = val || ''
 		},
 
@@ -589,32 +636,32 @@ export default {
 	},
 
 	methods: {
-		confirmationEmailQuestionLabel(question) {
+		confirmationEmailQuestionLabel(question: FormsQuestion): string {
 			return question.text || t('forms', 'Untitled question')
 		},
 
 		/**
 		 * Save Form-Properties
 		 *
-		 * @param {boolean} checked New Checkbox/Switch Value to use
+		 * @param checked New Checkbox/Switch Value to use
 		 */
-		onAnonChange(checked) {
+		onAnonChange(checked: boolean): void {
 			this.$emit('update:formProp', 'isAnonymous', checked)
 		},
 
-		onSubmitMultipleChange(checked) {
+		onSubmitMultipleChange(checked: boolean): void {
 			this.$emit('update:formProp', 'submitMultiple', checked)
 		},
 
-		onAllowEditSubmissionsChange(checked) {
+		onAllowEditSubmissionsChange(checked: boolean): void {
 			this.$emit('update:formProp', 'allowEditSubmissions', checked)
 		},
 
-		onAllowCommentsChange(checked) {
+		onAllowCommentsChange(checked: boolean): void {
 			this.$emit('update:formProp', 'allowComments', checked)
 		},
 
-		onFormExpiresChange(checked) {
+		onFormExpiresChange(checked: boolean): void {
 			if (checked) {
 				this.$emit(
 					'update:formProp',
@@ -626,16 +673,19 @@ export default {
 			}
 		},
 
-		onShowExpirationChange(checked) {
+		onShowExpirationChange(checked: boolean): void {
 			this.$emit('update:formProp', 'showExpiration', checked)
 		},
 
 		/**
 		 * On date picker change
 		 *
-		 * @param {Date} datetime the expiration Date
+		 * @param datetime the expiration Date
 		 */
-		onExpirationDateChange(datetime) {
+		onExpirationDateChange(datetime: Date | [Date, Date] | null): void {
+			if (!(datetime instanceof Date)) {
+				return
+			}
 			this.$emit(
 				'update:formProp',
 				'expires',
@@ -643,17 +693,18 @@ export default {
 			)
 		},
 
-		onMaxSubmissionsChange(checked) {
+		onMaxSubmissionsChange(checked: boolean): void {
 			this.$emit('update:formProp', 'maxSubmissions', checked ? 1 : null)
 		},
 
-		onMaxSubmissionsValueChange(value) {
-			if (value > 0) {
+		onMaxSubmissionsValueChange(value: string | number): void {
+			const parsedValue = Number(value)
+			if (parsedValue > 0) {
 				this.$emit('update:formProp', 'maxSubmissions', value)
 			}
 		},
 
-		onFormClosedChange(isClosed) {
+		onFormClosedChange(isClosed: boolean): void {
 			this.$emit(
 				'update:formProp',
 				'state',
@@ -661,11 +712,11 @@ export default {
 			)
 		},
 
-		onFormLockChange(locked) {
+		onFormLockChange(locked: boolean): void {
 			this.$emit('update:formProp', 'lockedUntil', locked ? 0 : null)
 		},
 
-		onFormArchivedChange(isArchived) {
+		onFormArchivedChange(isArchived: boolean): void {
 			this.$emit(
 				'update:formProp',
 				'state',
@@ -673,15 +724,19 @@ export default {
 			)
 		},
 
-		onSubmissionMessageChange({ target }) {
-			this.$emit('update:formProp', 'submissionMessage', target.value)
+		onSubmissionMessageChange(event: Event): void {
+			this.$emit(
+				'update:formProp',
+				'submissionMessage',
+				(event.target as HTMLTextAreaElement).value,
+			)
 		},
 
 		/**
 		 * Enable or disable the whole custom submission message
 		 * Disabled means the value is set to null.
 		 */
-		onUpdateHasCustomSubmissionMessage() {
+		onUpdateHasCustomSubmissionMessage(): void {
 			if (this.hasCustomSubmissionMessage) {
 				this.$emit('update:formProp', 'submissionMessage', null)
 			} else {
@@ -689,7 +744,7 @@ export default {
 			}
 		},
 
-		onConfirmationEmailEnabledChange(checked) {
+		onConfirmationEmailEnabledChange(checked: boolean): void {
 			if (
 				checked
 				&& this.form.confirmationEmailQuestionId === null
@@ -703,7 +758,7 @@ export default {
 			this.$emit('update:formProp', 'confirmationEmailEnabled', checked)
 		},
 
-		onConfirmationEmailSubjectChange() {
+		onConfirmationEmailSubjectChange(): void {
 			this.$emit(
 				'update:formProp',
 				'confirmationEmailSubject',
@@ -711,7 +766,7 @@ export default {
 			)
 		},
 
-		onConfirmationEmailBodyChange() {
+		onConfirmationEmailBodyChange(): void {
 			this.$emit(
 				'update:formProp',
 				'confirmationEmailBody',
@@ -719,7 +774,9 @@ export default {
 			)
 		},
 
-		onConfirmationEmailQuestionIdSelectionChange(option) {
+		onConfirmationEmailQuestionIdSelectionChange(
+			option: ConfirmationEmailQuestionOption | null,
+		): void {
 			const questionId = option?.id ?? null
 			if (questionId === null) {
 				return
@@ -728,7 +785,7 @@ export default {
 			this.saveConfirmationEmailQuestionId(questionId)
 		},
 
-		saveConfirmationEmailQuestionId(selectedQuestionId) {
+		saveConfirmationEmailQuestionId(selectedQuestionId: number | null): void {
 			if (this.form.confirmationEmailQuestionId === selectedQuestionId) {
 				return
 			}
@@ -743,10 +800,10 @@ export default {
 		/**
 		 * Datepicker timestamp to string
 		 *
-		 * @param {Date} datetime the datepicker Date
-		 * @return {string}
+		 * @param datetime the datepicker Date
+		 * @return
 		 */
-		stringifyDate(datetime) {
+		stringifyDate(datetime: Date): string {
 			const date = moment(datetime).format('LLL')
 
 			if (this.isExpired) {
@@ -758,34 +815,34 @@ export default {
 		/**
 		 * Form expires timestamp to Date of the datepicker
 		 *
-		 * @param {number} value the expires timestamp
-		 * @return {Date}
+		 * @param value the expires timestamp
+		 * @return
 		 */
-		parseTimestampToDate(value) {
+		parseTimestampToDate(value: number): Date {
 			return moment(value, 'X').toDate()
 		},
 
 		/**
 		 * Prevent selecting a day before today
 		 *
-		 * @param {Date} datetime the datepicker Date
-		 * @return {boolean}
+		 * @param datetime the datepicker Date
+		 * @return
 		 */
-		notBeforeToday(datetime) {
+		notBeforeToday(datetime: Date): boolean {
 			return datetime < moment().add(-1, 'day').toDate()
 		},
 
 		/**
 		 * Prevent selecting a time before the current one
 		 *
-		 * @param {Date} datetime the datepicker Date
-		 * @return {boolean}
+		 * @param datetime the datepicker Date
+		 * @return
 		 */
-		notBeforeNow(datetime) {
+		notBeforeNow(datetime: Date): boolean {
 			return datetime < moment().toDate()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SidebarTabs/SharingSearchDiv.vue b/src/components/SidebarTabs/SharingSearchDiv.vue
index 31b13b82c..6f206be9f 100644
--- a/src/components/SidebarTabs/SharingSearchDiv.vue
+++ b/src/components/SidebarTabs/SharingSearchDiv.vue
@@ -21,11 +21,24 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
 
-export default {
+interface CurrentShareLike {
+	shareWith: string
+	shareType: number
+}
+
+interface SearchShareLike {
+	shareWith: string
+	displayName: string
+	shareType: number
+}
+
+export default defineComponent({
 	components: {
 		NcSelectUsers,
 	},
@@ -56,19 +69,27 @@ export default {
 
 	emits: ['addShare'],
 
+	setup() {
+		return {
+			t,
+		}
+	},
+
 	computed: {
 		/**
 		 * Multiselect options. Recommendations by default, direct search when search query is valid.
 		 * Filter out existing shares
 		 *
-		 * @return {Array}
+		 * @return
 		 */
-		options() {
+		options(): SearchShareLike[] {
 			if (this.isValidQuery) {
 				// Suggestions without existing shares
-				return this.suggestions.filter(
+				const suggestions = this.suggestions as SearchShareLike[]
+				const currentShares = this.currentShares as CurrentShareLike[]
+				return suggestions.filter(
 					(item) =>
-						!this.currentShares.find(
+						!currentShares.find(
 							(share) =>
 								share.shareWith === item.shareWith
 								&& share.shareType === item.shareType,
@@ -76,9 +97,11 @@ export default {
 				)
 			}
 			// Recommendations without existing shares
-			return this.recommendations.filter(
+			const recommendations = this.recommendations as SearchShareLike[]
+			const currentShares = this.currentShares as CurrentShareLike[]
+			return recommendations.filter(
 				(item) =>
-					!this.currentShares.find(
+					!currentShares.find(
 						(share) =>
 							share.shareWith === item.shareWith
 							&& share.shareType === item.shareType,
@@ -89,7 +112,7 @@ export default {
 		/**
 		 * Show Loading if loading is either set by parent or by this module (search)
 		 */
-		showLoadingCircle() {
+		showLoadingCircle(): boolean {
 			return this.showLoading || this.loading
 		},
 	},
@@ -103,18 +126,22 @@ export default {
 		/**
 		 * Format share for form.shares and add it.
 		 *
-		 * @param {object} share New share to share with, format still for multiselect.
+		 * @param share New share to share with, format still for multiselect.
 		 */
-		addShare(share) {
+		addShare(share: SearchShareLike | SearchShareLike[] | null): void {
+			const selectedShare = Array.isArray(share) ? share[0] : share
+			if (!selectedShare) {
+				return
+			}
 			const newShare = {
-				shareWith: share.shareWith,
-				displayName: share.displayName,
-				shareType: share.shareType,
+				shareWith: selectedShare.shareWith,
+				displayName: selectedShare.displayName,
+				shareType: selectedShare.shareType,
 			}
 			this.$emit('addShare', newShare)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
index fcf81539d..141d178aa 100644
--- a/src/components/SidebarTabs/SharingShareDiv.vue
+++ b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -45,8 +45,10 @@
 	</li>
 </template>
 
-<script>
+<script lang="ts">
 import IconClose from '@material-symbols/svg-400/outlined/close.svg?raw'
+import { t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
@@ -57,7 +59,15 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import PermissionTypes from '../../mixins/PermissionTypes.ts'
 import ShareTypes from '../../mixins/ShareTypes.ts'
 
-export default {
+interface ShareLike {
+	id: number
+	shareType: number
+	shareWith: string
+	displayName?: string
+	permissions: string[]
+}
+
+export default defineComponent({
 	components: {
 		NcIconSvgWrapper,
 		NcActions,
@@ -91,40 +101,41 @@ export default {
 
 	setup() {
 		return {
+			t,
 			IconClose,
 		}
 	},
 
 	computed: {
-		canAccessResults() {
+		canAccessResults(): boolean {
 			return this.share.permissions.includes(
 				this.PERMISSION_TYPES.PERMISSION_RESULTS,
 			)
 		},
 
-		canDeleteResults() {
+		canDeleteResults(): boolean {
 			return this.share.permissions.includes(
 				this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 			)
 		},
 
-		canEditForm() {
+		canEditForm(): boolean {
 			return this.share.permissions.includes(
 				this.PERMISSION_TYPES.PERMISSION_EDIT,
 			)
 		},
 
-		isNoUser() {
+		isNoUser(): boolean {
 			return this.share.shareType !== this.SHARE_TYPES.SHARE_TYPE_USER
 		},
 
-		displayName() {
+		displayName(): string {
 			return !this.share.displayName
 				? this.share.shareWith
 				: this.share.displayName
 		},
 
-		displayNameAppendix() {
+		displayNameAppendix(): string {
 			switch (this.share.shareType) {
 				case this.SHARE_TYPES.SHARE_TYPE_GROUP:
 					return `(${t('forms', 'Group')})`
@@ -137,14 +148,14 @@ export default {
 	},
 
 	methods: {
-		removeShare() {
+		removeShare(): void {
 			this.$emit('removeShare', this.share)
 		},
 
 		/**
-		 * @param {boolean} hasPermission If the results permission should be granted
+		 * @param hasPermission If the results permission should be granted
 		 */
-		updatePermissionResults(hasPermission) {
+		updatePermissionResults(hasPermission: boolean): void {
 			if (hasPermission === false) {
 				// ensure to remove the delete permission if results permission is dropped
 				this.updatePermission(
@@ -159,9 +170,9 @@ export default {
 		},
 
 		/**
-		 * @param {boolean} hasPermission If the results_delete permission should be granted
+		 * @param hasPermission If the results_delete permission should be granted
 		 */
-		updatePermissionDeleteResults(hasPermission) {
+		updatePermissionDeleteResults(hasPermission: boolean): void {
 			return this.updatePermission(
 				this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 				hasPermission,
@@ -169,9 +180,9 @@ export default {
 		},
 
 		/**
-		 * @param {boolean} hasPermission If the results_delete permission should be granted
+		 * @param hasPermission If the results_delete permission should be granted
 		 */
-		updatePermissionEdit(hasPermission) {
+		updatePermissionEdit(hasPermission: boolean): void {
 			return this.updatePermission(
 				this.PERMISSION_TYPES.PERMISSION_EDIT,
 				hasPermission,
@@ -181,22 +192,22 @@ export default {
 		/**
 		 * Grant or remove permission from share
 		 *
-		 * @param {string} permission The permission to grant or remove
-		 * @param {boolean} hasPermission True if granted, False if removed
+		 * @param permission The permission to grant or remove
+		 * @param hasPermission True if granted, False if removed
 		 */
-		updatePermission(permission, hasPermission) {
-			const share = { ...this.share }
+		updatePermission(permission: string, hasPermission: boolean): void {
+			const share = { ...(this.share as ShareLike) }
 			if (hasPermission) {
 				share.permissions = [...new Set([...share.permissions, permission])]
 			} else {
 				share.permissions = share.permissions.filter(
-					(perm) => perm !== permission,
+					(perm: string) => perm !== permission,
 				)
 			}
 			this.$emit('update:share', share)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
index 9f801a64d..6d97b4bc8 100644
--- a/src/components/SidebarTabs/SharingSidebarTab.vue
+++ b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -234,7 +234,7 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import IconCodeBrackets from '@material-symbols/svg-400/outlined/code.svg?raw'
@@ -249,8 +249,10 @@ import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActions from '@nextcloud/vue/components/NcActions'
@@ -270,7 +272,33 @@ import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
 import logger from '../../utils/Logger.ts'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
-export default {
+const formsAppName = 'forms'
+
+interface ShareLike {
+	id: number
+	shareType: number
+	shareWith: string
+	displayName: string
+	permissions: string[]
+}
+
+interface SharingSidebarAppConfig {
+	allowPublicLink: boolean
+	allowCustomPublicShareTokens: boolean
+	allowPermitAll: boolean
+	allowShowToAll: boolean
+	[key: string]: unknown
+}
+
+interface ShareTokenUpdateContext {
+	shareTokens: Record<number, string>
+	loadingShareTokenId: number | null
+	savingShareTokens: Record<number, boolean>
+	form: { id: number }
+	$emit: (event: string, ...args: unknown[]) => void
+}
+
+export default defineComponent({
 	components: {
 		NcIconSvgWrapper,
 		NcActions,
@@ -308,6 +336,7 @@ export default {
 
 	setup() {
 		return {
+			t,
 			FormsIcon,
 			IconCheck,
 			IconCopyAll,
@@ -322,40 +351,53 @@ export default {
 		}
 	},
 
-	data() {
+	data(): {
+		isLoading: boolean
+		appConfig: SharingSidebarAppConfig
+		shareTokens: Record<number, string>
+		savingShareTokens: Record<number, boolean>
+		loadingShareTokenId: number | null
+		qrDialogText: string
+		isEmbeddable: boolean
+	} {
 		return {
 			isLoading: false,
-			appConfig: loadState(appName, 'appConfig'),
+			appConfig: loadState(
+				formsAppName,
+				'appConfig',
+			) as SharingSidebarAppConfig,
+
 			shareTokens: {},
 			savingShareTokens: {},
 			loadingShareTokenId: null,
 			qrDialogText: '',
+			isEmbeddable: false,
 		}
 	},
 
 	computed: {
-		isCurrentUserOwner() {
-			return getCurrentUser().uid === this.form.ownerId
+		isCurrentUserOwner(): boolean {
+			return getCurrentUser()?.uid === this.form.ownerId
 		},
 
-		sortedShares() {
+		sortedShares(): ShareLike[] {
 			// Remove Link-Shares, which are handled separately, then sort
-			return this.form.shares
+			return (this.form.shares as ShareLike[])
 				.filter(
 					(share) => share.shareType !== this.SHARE_TYPES.SHARE_TYPE_LINK,
 				)
 				.sort(this.sortByTypeAndDisplayname)
 		},
 
-		hasPublicLink() {
+		hasPublicLink(): boolean {
 			return this.publicLinkShares.length !== 0
 		},
 
-		publicLinkShares() {
-			const shares = this.form.shares.filter(
+		publicLinkShares(): ShareLike[] {
+			const shares = (this.form.shares as ShareLike[]).filter(
 				(share) => share.shareType === this.SHARE_TYPES.SHARE_TYPE_LINK,
 			)
-			shares.sort((a, b) =>
+			shares.sort((a: ShareLike, b: ShareLike) =>
 				this.isEmbeddingAllowed(a) ? 1 : this.isEmbeddingAllowed(b) ? -1 : 0,
 			)
 			return shares
@@ -365,8 +407,8 @@ export default {
 	watch: {
 		publicLinkShares: {
 			immediate: true,
-			handler(shares) {
-				const nextShareTokens = {}
+			handler(shares: ShareLike[]) {
+				const nextShareTokens: Record<number, string> = {}
 				for (const share of shares) {
 					nextShareTokens[share.id] =
 						this.shareTokens[share.id] ?? share.shareWith
@@ -381,9 +423,14 @@ export default {
 		/**
 		 * Add share
 		 *
-		 * @param {object} newShare the share object
+		 * @param newShare the share object
+		 * @param newShare.shareType
+		 * @param newShare.shareWith
 		 */
-		async addShare(newShare) {
+		async addShare(newShare: {
+			shareType: number
+			shareWith: string
+		}): Promise<void> {
 			this.isLoading = true
 
 			try {
@@ -411,7 +458,7 @@ export default {
 			}
 		},
 
-		async addPublicLink() {
+		async addPublicLink(): Promise<void> {
 			this.isLoading = true
 
 			try {
@@ -438,9 +485,9 @@ export default {
 		/**
 		 * Make a share embeddable into websites (sets the internal permission)
 		 *
-		 * @param {{ permissions: string[] }} share The public link share to make embeddable
+		 * @param share The public link share to make embeddable
 		 */
-		makeEmbeddable(share) {
+		makeEmbeddable(share: ShareLike): void {
 			this.updateShare({
 				...share,
 				permissions: [
@@ -453,9 +500,9 @@ export default {
 		/**
 		 * Update share
 		 *
-		 * @param {object} updatedShare the updated object
+		 * @param updatedShare the updated object
 		 */
-		async updateShare(updatedShare) {
+		async updateShare(updatedShare: ShareLike): Promise<void> {
 			this.isLoading = true
 
 			try {
@@ -490,9 +537,9 @@ export default {
 		/**
 		 * Remove share
 		 *
-		 * @param {object} share the share to delete
+		 * @param share the share to delete
 		 */
-		async removeShare(share) {
+		async removeShare(share: ShareLike): Promise<void> {
 			this.isLoading = true
 
 			try {
@@ -514,10 +561,12 @@ export default {
 		/**
 		 * Sort by shareType and DisplayName
 		 *
-		 * @param {object} a first share for comparison
-		 * @param {object} b second share for comparison
+		 * @param a first share for comparison
+		 * @param b second share for comparison
 		 */
-		sortByTypeAndDisplayname(a, b) {
+		sortByTypeAndDisplayname(a: ShareLike, b: ShareLike): number {
+			const aDisplayName = (a.displayName ?? '').toLowerCase()
+			const bDisplayName = (b.displayName ?? '').toLowerCase()
 			// First return, if ShareType does not match
 			if (a.shareType < b.shareType) {
 				return -1
@@ -527,48 +576,48 @@ export default {
 			}
 
 			// Otherwise sort by displayname
-			if (a.displayName.toLowerCase() < b.displayName.toLowerCase()) {
+			if (aDisplayName < bDisplayName) {
 				return -1
 			}
-			if (a.displayName.toLowerCase() > b.displayName.toLowerCase()) {
+			if (aDisplayName > bDisplayName) {
 				return 1
 			}
 			return 0
 		},
 
-		onPermitAllUsersChange(newVal) {
+		onPermitAllUsersChange(newVal: boolean): void {
 			const newAccess = { ...this.form.access }
 			newAccess.permitAllUsers = newVal
 			this.$emit('update:formProp', 'access', newAccess)
 		},
 
-		onShowToAllUsersChange(newVal) {
+		onShowToAllUsersChange(newVal: boolean): void {
 			const newAccess = { ...this.form.access }
 			newAccess.showToAllUsers = newVal
 			this.$emit('update:formProp', 'access', newAccess)
 		},
 
-		getShareTokenInput(share) {
+		getShareTokenInput(share: ShareLike): string {
 			return this.shareTokens[share.id] ?? share.shareWith
 		},
 
-		isShareTokenSaving(share) {
+		isShareTokenSaving(share: ShareLike): boolean {
 			return !!this.savingShareTokens[share.id]
 		},
 
-		isShareTokenLoading(share) {
+		isShareTokenLoading(share: ShareLike): boolean {
 			return this.loadingShareTokenId === share.id
 		},
 
-		setShareTokenInput(share, token) {
+		setShareTokenInput(share: ShareLike, token: string | number): void {
 			this.shareTokens = {
 				...this.shareTokens,
-				[share.id]: token,
+				[share.id]: String(token),
 			}
 			this.updateShareToken(share)
 		},
 
-		async generateNewToken(share) {
+		async generateNewToken(share: ShareLike): Promise<void> {
 			this.loadingShareTokenId = share.id
 
 			try {
@@ -589,7 +638,10 @@ export default {
 			}
 		},
 
-		updateShareToken: debounce(async function (share) {
+		updateShareToken: debounce(async function (
+			this: ShareTokenUpdateContext,
+			share: ShareLike,
+		) {
 			const token = this.shareTokens[share.id] ?? share.shareWith
 			this.loadingShareTokenId = share.id
 			this.savingShareTokens = {
@@ -633,11 +685,11 @@ export default {
 			}
 		}, INPUT_DEBOUNCE_MS),
 
-		openQrDialog(share) {
+		openQrDialog(share: ShareLike): void {
 			this.qrDialogText = this.getPublicShareLink(share)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SidebarTabs/TransferOwnership.vue b/src/components/SidebarTabs/TransferOwnership.vue
index e9424c7f9..2501913db 100644
--- a/src/components/SidebarTabs/TransferOwnership.vue
+++ b/src/components/SidebarTabs/TransferOwnership.vue
@@ -91,11 +91,13 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
@@ -103,7 +105,13 @@ import NcTextField from '@nextcloud/vue/components/NcTextField'
 import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
 import logger from '../../utils/Logger.ts'
 
-export default {
+interface SelectedUserLike {
+	id: string
+	shareWith: string
+	displayName: string
+}
+
+export default defineComponent({
 	components: {
 		NcButton,
 		NcDialog,
@@ -130,27 +138,33 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			t,
+		}
+	},
+
 	data() {
 		return {
-			selected: null,
-			showModal: false,
-			confirmationInput: '',
-			loading: false,
+			selected: undefined as SelectedUserLike | undefined,
+			showModal: false as boolean,
+			confirmationInput: '' as string,
+			loading: false as boolean,
 		}
 	},
 
 	computed: {
-		canTransfer() {
+		canTransfer(): boolean {
 			return (
 				this.confirmationInput === this.confirmationString && !!this.selected
 			)
 		},
 
-		confirmationString() {
+		confirmationString(): string {
 			return `${this.form.ownerId}/${this.form.title.replace(/\s/g, ' ').trim()}`
 		},
 
-		options() {
+		options(): unknown[] {
 			if (this.isValidQuery) {
 				// Suggestions without existing shares
 				return this.suggestions
@@ -161,25 +175,25 @@ export default {
 	},
 
 	methods: {
-		clearText() {
+		clearText(): void {
 			this.confirmationInput = ''
 		},
 
-		closeModal() {
+		closeModal(): void {
 			this.showModal = false
 		},
 
-		escapedString(textToEscape) {
+		escapedString(textToEscape: string): string {
 			return '' + textToEscape.replace('<', '&lt;').replace('>', '&gt;')
 		},
 
-		openModal() {
+		openModal(): void {
 			this.showModal = true
 		},
 
-		async onOwnershipTransfer() {
+		async onOwnershipTransfer(): Promise<void> {
 			this.showModal = false
-			if (this.form.id && this.selected.shareWith) {
+			if (this.form.id && this.selected?.shareWith) {
 				try {
 					emit('forms:last-updated:set', this.form.id)
 					await axios.patch(
@@ -188,12 +202,12 @@ export default {
 						}),
 						{
 							keyValuePairs: {
-								ownerId: this.selected.shareWith,
+								ownerId: this.selected?.shareWith,
 							},
 						},
 					)
 					showSuccess(
-						`${t('forms', 'This form is now owned by')} ${this.selected.displayName}`,
+						`${t('forms', 'This form is now owned by')} ${this.selected?.displayName}`,
 					)
 					emit('forms:ownership-transfered', this.form.id)
 				} catch (error) {
@@ -214,7 +228,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index e13b80bdd..f2d871768 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -31,40 +31,51 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import IconBarChart from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
 import IconEdit from '@material-symbols/svg-400/outlined/edit.svg?raw'
 import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
 import IconVisibility from '@material-symbols/svg-400/outlined/visibility.svg?raw'
 import { t } from '@nextcloud/l10n'
 import { useIsMobile } from '@nextcloud/vue'
+import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import PillMenu from './PillMenu.vue'
 import PermissionTypes from '../mixins/PermissionTypes.ts'
 import logger from '../utils/Logger.ts'
 
-const submitView = {
+type TopBarViewId = 'submit' | 'edit' | 'results'
+
+type TopBarViewOption = {
+	ariaLabel: string
+	icon: string
+	title: string
+	id: TopBarViewId
+	disabled?: boolean
+}
+
+const submitView: TopBarViewOption = {
 	ariaLabel: t('forms', 'View form'),
 	icon: IconVisibility,
 	title: t('forms', 'View'),
 	id: 'submit',
 }
-const editView = {
+const editView: TopBarViewOption = {
 	ariaLabel: t('forms', 'Edit form'),
 	icon: IconEdit,
 	title: t('forms', 'Edit'),
 	id: 'edit',
 	disabled: false,
 }
-const resultsView = {
+const resultsView: TopBarViewOption = {
 	ariaLabel: t('forms', 'Show responses'),
 	icon: IconBarChart,
 	title: t('forms', 'Responses'),
 	id: 'results',
 }
 
-export default {
+export default defineComponent({
 	name: 'TopBar',
 
 	components: {
@@ -92,7 +103,7 @@ export default {
 		},
 
 		permissions: {
-			type: Array,
+			type: Array as () => string[],
 			default: () => [],
 		},
 
@@ -114,16 +125,18 @@ export default {
 	},
 
 	computed: {
-		currentView() {
+		currentView(): TopBarViewOption | undefined {
+			const routeName = this.$route.name
 			return this.availableViews.find(
 				(v) =>
-					this.$route.name === v.id
-					|| this.$route.name.startsWith(v.id + '.'),
+					routeName === v.id
+					|| (typeof routeName === 'string'
+						&& routeName.startsWith(v.id + '.')),
 			)
 		},
 
-		availableViews() {
-			const views = []
+		availableViews(): TopBarViewOption[] {
+			const views: TopBarViewOption[] = []
 			if (this.canSubmit) {
 				views.push(submitView)
 			}
@@ -139,30 +152,30 @@ export default {
 			return views
 		},
 
-		canSubmit() {
+		canSubmit(): boolean {
 			return this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_SUBMIT)
 		},
 
-		canEdit() {
+		canEdit(): boolean {
 			return (
 				this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_EDIT)
 				&& !this.archived
 			)
 		},
 
-		canSeeResults() {
+		canSeeResults(): boolean {
 			return (
 				this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_RESULTS)
 				|| this.submissionCount > 0
 			)
 		},
 
-		canShare() {
+		canShare(): boolean {
 			// This probably can get a permission of itself
 			return this.canEdit
 		},
 
-		canOnlySubmit() {
+		canOnlySubmit(): boolean {
 			return (
 				this.permissions.length === 1
 				&& this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_SUBMIT)
@@ -175,9 +188,9 @@ export default {
 		/**
 		 * Router methods
 		 *
-		 * @param {object} option The selected pill menu option
+		 * @param option The selected pill menu option
 		 */
-		async onChangeView(option) {
+		async onChangeView(option: TopBarViewOption): Promise<void> {
 			if (this.$route.name === option.id) {
 				return
 			}
@@ -194,11 +207,11 @@ export default {
 			}
 		},
 
-		onShareForm() {
+		onShareForm(): void {
 			this.$emit('shareForm')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/mixins/PermissionTypes.ts b/src/mixins/PermissionTypes.ts
index b738e3000..29017d67f 100644
--- a/src/mixins/PermissionTypes.ts
+++ b/src/mixins/PermissionTypes.ts
@@ -6,34 +6,32 @@
 import { defineComponent } from 'vue'
 
 // !!! Keep in Sync with lib/Constants.php !!!
-export const PERMISSION_EDIT = 'edit'
-export const PERMISSION_RESULTS = 'results'
-export const PERMISSION_RESULTS_DELETE = 'results_delete'
-export const PERMISSION_SUBMIT = 'submit'
+export const PERMISSION_EDIT = 'edit' as string
+export const PERMISSION_RESULTS = 'results' as string
+export const PERMISSION_RESULTS_DELETE = 'results_delete' as string
+export const PERMISSION_SUBMIT = 'submit' as string
 /** Internal permission to mark public link shares as embeddable */
-export const PERMISSION_EMBED = 'embed'
+export const PERMISSION_EMBED = 'embed' as string
 export const PERMISSION_ALL = [
 	PERMISSION_EDIT,
 	PERMISSION_RESULTS,
 	PERMISSION_RESULTS_DELETE,
 	PERMISSION_SUBMIT,
-]
+] as string[]
 
-export interface PermissionTypesData {
-	PERMISSION_TYPES: {
-		PERMISSION_EDIT: string
-		PERMISSION_RESULTS: string
-		PERMISSION_RESULTS_DELETE: string
-		PERMISSION_SUBMIT: string
-		PERMISSION_EMBED: string
-		PERMISSION_ALL: string[]
-	}
+export const PERMISSION_TYPES = {
+	PERMISSION_EDIT,
+	PERMISSION_RESULTS,
+	PERMISSION_RESULTS_DELETE,
+	PERMISSION_SUBMIT,
+	PERMISSION_EMBED,
+	PERMISSION_ALL,
 }
 
 export default defineComponent({
 	name: 'PermissionTypes',
 
-	data(): PermissionTypesData {
+	data() {
 		return {
 			PERMISSION_TYPES: {
 				PERMISSION_EDIT,
diff --git a/src/mixins/QuestionMixin.ts b/src/mixins/QuestionMixin.ts
index 0eee3f528..5798b4c8e 100644
--- a/src/mixins/QuestionMixin.ts
+++ b/src/mixins/QuestionMixin.ts
@@ -9,6 +9,7 @@ import type { FormsOption } from '../models/Entities.d.ts'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
@@ -169,7 +170,7 @@ export default defineComponent({
 
 	computed: {
 		questionProps(): any {
-			const props = { ...this.$props }
+			const props = { ...this.$props } as Record<string, unknown>
 			const allowedKeys = Object.keys(Question.props || {})
 			Object.keys(props).forEach((key) => {
 				if (!allowedKeys.includes(key)) {
@@ -392,7 +393,7 @@ export default defineComponent({
 						optionType: OptionType.Choice,
 					},
 				)
-				const newServerOptions = OcsResponse2Data(response)
+				const newServerOptions = OcsResponse2Data<FormsOption[]>(response)
 				const options = this.options.slice()
 				newServerOptions.forEach((option: FormsOption) => {
 					options.push({
diff --git a/src/mixins/QuestionMultipleMixin.ts b/src/mixins/QuestionMultipleMixin.ts
index 1f72ba4a7..a15c0ac98 100644
--- a/src/mixins/QuestionMultipleMixin.ts
+++ b/src/mixins/QuestionMultipleMixin.ts
@@ -8,7 +8,7 @@ import type { FormsOption } from '../models/Entities.d.ts'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
@@ -22,11 +22,16 @@ declare module '@vue/runtime-core' {
 		values: unknown[]
 		answerType: { validate: (ctx: unknown) => boolean }
 		readOnly: boolean
-		extraSettings?: unknown
+		extraSettings?: { shuffleOptions?: boolean }
 		formId: number
 		id: number
 		shuffleArray: <T>(arr: T[]) => T[]
-		$refs: Record<string, unknown>
+		$refs: {
+			input: Array<{
+				$props: { optionType: string; index: number }
+				focus: () => void
+			}>
+		}
 	}
 }
 
@@ -126,9 +131,13 @@ export default defineComponent({
 		focusIndex(index: number, optionType: string) {
 			// refs are not guaranteed to be in correct order - we need to find the correct item
 			const item = this.$refs.input.find((instance: unknown) => {
+				const candidate = instance as {
+					$props: { optionType: string; index: number }
+					focus: () => void
+				}
 				return (
-					instance.$props.optionType === optionType
-					&& instance.$props.index === index
+					candidate.$props.optionType === optionType
+					&& candidate.$props.index === index
 				)
 			})
 			if (item) {
@@ -408,7 +417,10 @@ export default defineComponent({
 	},
 
 	watch: {
-		dirtyOptionsType: debounce(function (this: unknown) {
+		dirtyOptionsType: debounce(function (this: {
+			dirtyOptionsType: string | null
+			saveOptionsOrder: (optionType: string) => Promise<void>
+		}) {
 			if (!this.dirtyOptionsType) {
 				return
 			}
diff --git a/src/mixins/ShareLinkMixin.ts b/src/mixins/ShareLinkMixin.ts
index eca2ae520..82c40e84f 100644
--- a/src/mixins/ShareLinkMixin.ts
+++ b/src/mixins/ShareLinkMixin.ts
@@ -5,6 +5,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { defineComponent } from 'vue'
 import logger from '../utils/Logger.ts'
@@ -48,7 +49,7 @@ export default defineComponent({
 			} else {
 				url = generateUrl(`/apps/forms/s/${share.shareWith}`)
 			}
-			return new URL(url, window.location).href
+			return new URL(url, window.location.href).href
 		},
 
 		/**
@@ -60,8 +61,10 @@ export default defineComponent({
 			const self = this as any
 			return (
 				share.shareType === self.SHARE_TYPES.SHARE_TYPE_LINK
-				&& share.permissions?.includes(
-					self.PERMISSION_TYPES.PERMISSION_EMBED,
+				&& Boolean(
+					share.permissions?.includes(
+						self.PERMISSION_TYPES.PERMISSION_EMBED,
+					),
 				)
 			)
 		},
diff --git a/src/mixins/UserSearchMixin.ts b/src/mixins/UserSearchMixin.ts
index 48992b9eb..325c09efa 100644
--- a/src/mixins/UserSearchMixin.ts
+++ b/src/mixins/UserSearchMixin.ts
@@ -6,6 +6,7 @@
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
+import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
@@ -85,7 +86,7 @@ export default defineComponent({
 		 */
 		isValidQuery(): boolean {
 			return (
-				this.query
+				Boolean(this.query)
 				&& this.query.trim() !== ''
 				&& this.query.length > this.minSearchStringLength
 			)
@@ -159,11 +160,10 @@ export default defineComponent({
 				)
 
 				const data = OcsResponse2Data<SearchResultsResponse>(request)
-				const exact = data.exact
-				delete data.exact // removing exact from general results
+				const { exact, ...rest } = data
 
 				const exactSuggestions = this.formatSearchResults(exact)
-				const suggestions = this.formatSearchResults(data)
+				const suggestions = this.formatSearchResults(rest)
 
 				this.suggestions = exactSuggestions.concat(suggestions)
 			} catch (error) {
@@ -206,9 +206,13 @@ export default defineComponent({
 		 * @param results Results as returned by search
 		 * @return results as we use them on storage
 		 */
-		formatSearchResults(results: Record<string, Sharee[]>): FormattedSharee[] {
+		formatSearchResults(
+			results: Sharee[] | Record<string, Sharee[] | undefined>,
+		): FormattedSharee[] {
 			// flatten array of arrays
-			const flatResults = Object.values(results).flat()
+			const flatResults = Array.isArray(results)
+				? results
+				: Object.values(results).flatMap((result) => result ?? [])
 
 			return (
 				this.filterUnwantedShares(flatResults)
@@ -238,7 +242,7 @@ export default defineComponent({
 					if (
 						share.value.shareType
 							=== (this as any).SHARE_TYPES.SHARE_TYPE_USER
-						&& share.value.shareWith === getCurrentUser().uid
+						&& share.value.shareWith === getCurrentUser()?.uid
 					) {
 						return false
 					}
diff --git a/src/mixins/ViewsMixin.ts b/src/mixins/ViewsMixin.ts
index 24a66e20f..73f1f6da2 100644
--- a/src/mixins/ViewsMixin.ts
+++ b/src/mixins/ViewsMixin.ts
@@ -4,10 +4,13 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import type { FormsForm } from '../models/Entities.d.ts'
+
 import { getCurrentUser } from '@nextcloud/auth'
 import axios, { isCancel } from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import MarkdownIt from 'markdown-it'
@@ -16,59 +19,6 @@ import CancelableRequest from '../utils/CancelableRequest.ts'
 import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 
-/** Form share permission types */
-interface FormsShare {
-	shareType: number
-	permissions?: string[]
-	shareWith?: string
-}
-
-/** Form question structure */
-interface FormsQuestion {
-	id: number
-	text: string
-	type: string
-	order: number
-	options?: any[]
-	[key: string]: any
-}
-
-/** Complete form structure as returned from API */
-interface FormsForm {
-	id: number
-	hash: string
-	title: string
-	description: string
-	ownerId: string
-	created: number
-	access: any
-	expires: number
-	fileFormat?: string | null
-	fileId?: number | null
-	filePath?: string | null
-	isAnonymous: boolean
-	isMaxSubmissionsReached: boolean
-	lastUpdated: number
-	submitMultiple: boolean
-	allowEditSubmissions: boolean
-	showExpiration: boolean
-	canSubmit: boolean
-	permissions: string[]
-	questions: FormsQuestion[]
-	state: 0 | 1 | 2
-	lockedBy?: string | null
-	lockedUntil?: number | null
-	maxSubmissions?: number | null
-	shares: FormsShare[]
-	submissionCount?: number
-	submissionMessage?: string | null
-	confirmationEmailEnabled: boolean
-	confirmationEmailSubject?: string | null
-	confirmationEmailBody?: string | null
-	confirmationEmailQuestionId?: number | null
-	allowComments: boolean
-}
-
 /** ViewsMixin data interface */
 interface ViewsMixinData {
 	isLoadingForm: boolean
@@ -132,16 +82,22 @@ export default defineComponent({
 			// Remember the old renderer if overridden, or proxy to the default renderer.
 			const defaultRender =
 				this.markdownit.renderer.rules.link_open
-				|| function (tokens, idx, options, env, self) {
+				|| function (
+					tokens: any,
+					idx: any,
+					options: any,
+					env: any,
+					self: any,
+				) {
 					return self.renderToken(tokens, idx, options)
 				}
 
 			this.markdownit.renderer.rules.link_open = function (
-				tokens,
-				idx,
-				options,
-				env,
-				self,
+				tokens: any,
+				idx: any,
+				options: any,
+				env: any,
+				self: any,
 			) {
 				// Add a new `target` attribute, or replace the value of the existing one.
 				tokens[idx].attrSet('target', '_blank')
@@ -157,10 +113,11 @@ export default defineComponent({
 		},
 
 		isFormLocked(): boolean {
+			const currentUser = getCurrentUser()
 			return (
 				this.form.lockedUntil === 0
 				|| (this.form.lockedUntil! > moment().unix()
-					&& this.form.lockedBy !== getCurrentUser().uid)
+					&& this.form.lockedBy !== currentUser?.uid)
 			)
 		},
 	},
@@ -207,7 +164,7 @@ export default defineComponent({
 				const response = await request(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}', { id }),
 				)
-				this.$emit('update:form', OcsResponse2Data(response))
+				this.$emit('update:form', OcsResponse2Data(response as any))
 				this.isLoadingForm = false
 			} catch (error) {
 				if (isCancel(error)) {
diff --git a/src/models/AnswerTypes.ts b/src/models/AnswerTypes.ts
index 4249d971f..43fdab0b9 100644
--- a/src/models/AnswerTypes.ts
+++ b/src/models/AnswerTypes.ts
@@ -19,6 +19,7 @@ import IconClockOutline from '@material-symbols/svg-400/outlined/schedule.svg?ra
 import IconTextShort from '@material-symbols/svg-400/outlined/short_text.svg?raw'
 import IconTextLong from '@material-symbols/svg-400/outlined/subject.svg?raw'
 import IconSwapVertical from '@material-symbols/svg-400/outlined/swap_vert.svg?raw'
+import { t } from '@nextcloud/l10n'
 import { markRaw } from 'vue'
 import QuestionColor from '../components/Questions/QuestionColor.vue'
 import QuestionDate from '../components/Questions/QuestionDate.vue'
diff --git a/src/models/Entities.d.ts b/src/models/Entities.d.ts
index 2d49fd6c8..ccc0e81dd 100644
--- a/src/models/Entities.d.ts
+++ b/src/models/Entities.d.ts
@@ -10,3 +10,59 @@ export interface FormsOption {
 	questionId: number
 	optionType: string
 }
+
+export interface FormsShare {
+	shareType: number
+	permissions?: string[]
+	shareWith?: string
+}
+
+export interface FormsQuestion {
+	id: number
+	text: string
+	type: string
+	order?: number | null
+	options?: unknown[]
+	answers?: unknown[]
+	description?: string
+	isRequired?: boolean
+	name?: string
+	extraSettings?: Record<string, unknown> | null
+	[key: string]: unknown
+}
+
+export interface FormsForm {
+	id: number
+	hash: string
+	title: string
+	description: string
+	partial?: boolean
+	ownerId: string
+	created: number
+	access: unknown
+	expires: number
+	fileFormat?: string | null
+	fileId?: number | null
+	filePath?: string | null
+	isAnonymous: boolean
+	isMaxSubmissionsReached: boolean
+	lastUpdated: number
+	submitMultiple: boolean
+	allowEditSubmissions: boolean
+	showExpiration: boolean
+	canSubmit: boolean
+	permissions: string[]
+	questions: FormsQuestion[]
+	state: 0 | 1 | 2
+	lockedBy?: string | null
+	lockedUntil?: number | null
+	maxSubmissions?: number | null
+	shares: FormsShare[]
+	submissionCount?: number
+	submissionMessage?: string | null
+	confirmationEmailEnabled: boolean
+	confirmationEmailSubject?: string | null
+	confirmationEmailBody?: string | null
+	confirmationEmailQuestionId?: number | null
+	allowComments: boolean
+}
diff --git a/src/models/FileTypes.ts b/src/models/FileTypes.ts
index ffb6711e9..ea4261049 100644
--- a/src/models/FileTypes.ts
+++ b/src/models/FileTypes.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { t } from '@nextcloud/l10n'
+
 export interface FileTypeConfig {
 	label: string
 }
diff --git a/src/models/ValidationTypes.ts b/src/models/ValidationTypes.ts
index 69c4c440c..929af7a6d 100644
--- a/src/models/ValidationTypes.ts
+++ b/src/models/ValidationTypes.ts
@@ -8,6 +8,7 @@ import IconPhone from '@material-symbols/svg-400/outlined/call.svg?raw'
 import IconEMail from '@material-symbols/svg-400/outlined/mail.svg?raw'
 import IconRegex from '@material-symbols/svg-400/outlined/regular_expression.svg?raw'
 import IconTextShort from '@material-symbols/svg-400/outlined/short_text.svg?raw'
+import { t } from '@nextcloud/l10n'
 
 export type ValidationFunction = (
 	input: string,
diff --git a/src/router.ts b/src/router.ts
index 6432f1375..111b8042f 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 
 import { generateUrl } from '@nextcloud/router'
 import { createRouter, createWebHistory } from 'vue-router'
@@ -38,7 +38,7 @@ const routes = [
 				path: '',
 				name: 'results',
 				props: { default: true },
-				redirect: (to) => {
+				redirect: (to: RouteLocationNormalized) => {
 					const validViews = ['summary', 'responses']
 					const storedView = localStorage.getItem(
 						`nextcloud_forms_${to.params.hash as string}_activeResponseView`,
diff --git a/src/types/vue-router.d.ts b/src/types/vue-router.d.ts
new file mode 100644
index 000000000..c99a98e61
--- /dev/null
+++ b/src/types/vue-router.d.ts
@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router'
+
+declare module '@vue/runtime-core' {
+	interface ComponentCustomProperties {
+		$route: RouteLocationNormalizedLoaded
+		$router: Router
+	}
+}
diff --git a/src/utils/SetWindowTitle.ts b/src/utils/SetWindowTitle.ts
index dd9bcd541..7b29fe4e8 100644
--- a/src/utils/SetWindowTitle.ts
+++ b/src/utils/SetWindowTitle.ts
@@ -5,6 +5,17 @@
 
 import { t } from '@nextcloud/l10n'
 
+declare global {
+	interface Window {
+		OC: {
+			getLanguage: () => string
+			theme: {
+				title: string
+			}
+		}
+	}
+}
+
 /**
  * Set the Window-Title to current FormTitle including suffix.
  *
diff --git a/src/views/Create.vue b/src/views/Create.vue
index b6f0e0175..1b345ea37 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -50,7 +50,7 @@
 					'Form \'{title}\' is locked by {lockedBy} and cannot be modified. The lock expires: {lockedUntil}',
 					{
 						title: form.title,
-						lockedBy: form.lockedBy,
+						lockedBy: form.lockedBy ?? '',
 						lockedUntil:
 							form.lockedUntil === 0
 								? t('forms', 'never')
@@ -132,31 +132,25 @@
 							:is="answerTypes[question.type].component"
 							v-for="(question, index) in form.questions"
 							:key="question.id"
-							:ref="(el) => setQuestionRef(el, question)"
+							:ref="registerQuestionRef(question)"
 							v-bind="form.questions[index]"
 							:canMoveDown="index < form.questions.length - 1"
 							:canMoveUp="index > 0"
 							:answerType="answerTypes[question.type]"
 							:index="index + 1"
 							:maxStringLengths="maxStringLengths"
-							@update:text="
-								(val) => (form.questions[index].text = val)
-							"
+							@update:text="updateQuestionText(index, $event)"
 							@update:description="
-								(val) => (form.questions[index].description = val)
+								updateQuestionDescription(index, $event)
 							"
 							@update:isRequired="
-								(val) => (form.questions[index].isRequired = val)
-							"
-							@update:name="
-								(val) => (form.questions[index].name = val)
+								updateQuestionIsRequired(index, $event)
 							"
+							@update:name="updateQuestionName(index, $event)"
 							@update:extraSettings="
-								(val) => (form.questions[index].extraSettings = val)
-							"
-							@update:options="
-								(val) => (form.questions[index].options = val)
+								updateQuestionExtraSettings(index, $event)
 							"
+							@update:options="updateQuestionOptions(index, $event)"
 							@clone="cloneQuestion(question, index)"
 							@delete="deleteQuestion(question.id)"
 							@moveDown="onMoveDown(index)"
@@ -219,16 +213,21 @@
 	</NcAppContent>
 </template>
 
-<script>
+<script lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type { FormsQuestion } from '../models/Entities.d.ts'
+
 import IconLock from '@material-symbols/svg-400/outlined/lock.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import { useIsMobile } from '@nextcloud/vue'
 import debounce from 'debounce'
+import { defineComponent } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
@@ -248,9 +247,15 @@ import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
-window.axios = axios
+const formsAppName = 'forms'
+
+interface QuestionRefInstance extends ComponentPublicInstance {
+	focus?: () => void
+}
+
+;(window as Window & { axios?: typeof axios }).axios = axios
 
-export default {
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Create',
 	components: {
@@ -274,6 +279,7 @@ export default {
 		return {
 			IconLock,
 			isMobile: useIsMobile(),
+			t,
 		}
 	},
 
@@ -282,29 +288,34 @@ export default {
 			answerTypes,
 
 			// Various states
-			isLoadingQuestions: false,
-			isDragging: false,
+			isLoadingQuestions: false as boolean,
+			isDragging: false as boolean,
 
-			maxStringLengths: loadState('forms', 'maxStringLengths'),
-			questionMenuOpened: false,
-			activeQuestionType: null,
-			questionRefsMap: {},
+			maxStringLengths: loadState(formsAppName, 'maxStringLengths') as Record<
+				string,
+				number
+			>,
+
+			questionMenuOpened: false as boolean,
+			activeQuestionType: null as string | null,
+			questionRefsMap: {} as Record<number, QuestionRefInstance>,
 
 			// when set to a number, the next created question will be inserted at this index
-			insertMenuOpenedIndex: null,
+			insertMenuOpenedIndex: null as number | null,
 			// controls per-question insert menu visibility
-			insertMenuOpened: false,
+			insertMenuOpened: false as boolean,
 		}
 	},
 
 	computed: {
-		hasQuestions() {
-			return this.form.questions && this.form.questions.length === 0
+		hasQuestions(): boolean {
+			return this.form.questions.length === 0
 		},
 
-		isRequiredUsed() {
+		isRequiredUsed(): boolean {
 			return this.form.questions.reduce(
-				(isUsed, question) => isUsed || question.isRequired,
+				(isUsed: boolean, question: FormsQuestion) =>
+					isUsed || Boolean(question.isRequired),
 				false,
 			)
 		},
@@ -312,18 +323,18 @@ export default {
 		/**
 		 * Check if form is expired
 		 */
-		isExpired() {
-			return this.form.expires && moment().unix() > this.form.expires
+		isExpired(): boolean {
+			return this.form.expires > 0 && moment().unix() > this.form.expires
 		},
 
 		/**
 		 * Check if the form was archived
 		 */
-		isFormArchived() {
+		isFormArchived(): boolean {
 			return this.form.state === FormState.FormArchived
 		},
 
-		infoMessage() {
+		infoMessage(): string {
 			let message = ''
 			if (this.form.isAnonymous) {
 				message += t('forms', 'Responses are anonymous.')
@@ -343,7 +354,7 @@ export default {
 			return message
 		},
 
-		expirationMessage() {
+		expirationMessage(): string {
 			const relativeDate = moment(this.form.expires, 'X')
 				.locale(window.OC.getLanguage())
 				.fromNow()
@@ -354,19 +365,22 @@ export default {
 		},
 
 		// Remove properties from answerTypes for create button
-		answerTypesFilter() {
+		answerTypesFilter(): Omit<typeof answerTypes, 'datetime'> {
 			// Remove 'datetime' from answerTypes for create button
 			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 			const { datetime, ...filteredAnswerTypes } = answerTypes
 			return filteredAnswerTypes
 		},
 
-		hasSubtypes() {
+		hasSubtypes(): (
+			answer: { subtypes?: Record<string, unknown> } | null | undefined,
+		) => boolean {
 			return (answer) =>
-				answer && answer.subtypes && Object.keys(answer.subtypes).length > 0
+				Boolean(answer?.subtypes)
+				&& Object.keys(answer?.subtypes ?? {}).length > 0
 		},
 
-		lockedUntilFormatted() {
+		lockedUntilFormatted(): string {
 			return moment(this.form.lockedUntil, 'X').fromNow()
 		},
 	},
@@ -383,7 +397,7 @@ export default {
 		},
 
 		// resize description if form is loaded
-		isLoadingForm(value) {
+		isLoadingForm(value: boolean): void {
 			if (!value) {
 				this.resizeTitle()
 				this.resizeDescription()
@@ -397,17 +411,20 @@ export default {
 	},
 
 	methods: {
-		onDragStart() {
+		onDragStart(): void {
 			this.isDragging = true
 		},
 
-		onDragEnd() {
+		onDragEnd(): void {
 			this.$nextTick(() => {
 				this.isDragging = false
 			})
 		},
 
-		setQuestionRef(el, question) {
+		setQuestionRef(
+			el: QuestionRefInstance | null,
+			question: FormsQuestion,
+		): void {
 			if (el) {
 				this.questionRefsMap[question.id] = el
 			} else {
@@ -415,7 +432,42 @@ export default {
 			}
 		},
 
-		onMoveUp(index) {
+		registerQuestionRef(
+			question: FormsQuestion,
+		): (el: Element | ComponentPublicInstance | null) => void {
+			return (el) => {
+				this.setQuestionRef(el as QuestionRefInstance | null, question)
+			}
+		},
+
+		updateQuestionText(index: number, value: string): void {
+			this.form.questions[index].text = value
+		},
+
+		updateQuestionDescription(index: number, value: string): void {
+			this.form.questions[index].description = value
+		},
+
+		updateQuestionIsRequired(index: number, value: boolean): void {
+			this.form.questions[index].isRequired = value
+		},
+
+		updateQuestionName(index: number, value: string): void {
+			this.form.questions[index].name = value
+		},
+
+		updateQuestionExtraSettings(
+			index: number,
+			value: Record<string, unknown> | null,
+		): void {
+			this.form.questions[index].extraSettings = value
+		},
+
+		updateQuestionOptions(index: number, value: unknown[]): void {
+			this.form.questions[index].options = value
+		},
+
+		onMoveUp(index: number): void {
 			if (index > 0) {
 				;[this.form.questions[index - 1], this.form.questions[index]] = [
 					this.form.questions[index],
@@ -425,14 +477,14 @@ export default {
 			}
 		},
 
-		onMoveDown(index) {
+		onMoveDown(index: number): void {
 			// only if not the last one
 			if (index < this.form.questions.length - 1) {
 				this.onMoveUp(index + 1)
 			}
 		},
 
-		onTitleChange() {
+		onTitleChange(): void {
 			this.resizeTitle()
 			this.saveTitle()
 		},
@@ -440,9 +492,9 @@ export default {
 		/**
 		 * Auto adjust the title height based its scroll height
 		 */
-		resizeTitle() {
+		resizeTitle(): void {
 			this.$nextTick(() => {
-				const textarea = this.$refs.title
+				const textarea = this.$refs.title as HTMLTextAreaElement
 				textarea.style.cssText = 'height: 0'
 				// include 2px border
 				textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
@@ -452,10 +504,10 @@ export default {
 		/**
 		 * Auto adjust the description height based on its scroll height
 		 */
-		resizeDescription() {
+		resizeDescription(): void {
 			// nextTick to ensure textarea is attached to DOM
 			this.$nextTick(() => {
-				const textarea = this.$refs.description
+				const textarea = this.$refs.description as HTMLTextAreaElement
 				textarea.style.cssText = 'height: 0'
 				// include 2px border
 				textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
@@ -465,9 +517,13 @@ export default {
 		/**
 		 * Update the description
 		 *
-		 * @param {InputEvent} ev The input event of the textarea
+		 * @param event The input event of the textarea
 		 */
-		updateDescription({ target }) {
+		updateDescription(event: Event): void {
+			const target = event.target as HTMLTextAreaElement | null
+			if (!target) {
+				return
+			}
 			this.form.description = target.value
 			this.resizeDescription()
 			this.saveDescription()
@@ -476,28 +532,41 @@ export default {
 		/**
 		 * Title & description save methods
 		 */
-		saveTitle: debounce(async function () {
+		saveTitle: debounce(async function (this: {
+			saveFormProperty: (key: 'title') => void
+		}) {
 			this.saveFormProperty('title')
 		}, INPUT_DEBOUNCE_MS),
 
-		saveDescription: debounce(async function () {
+		saveDescription: debounce(async function (this: {
+			saveFormProperty: (key: 'description') => void
+		}) {
 			this.saveFormProperty('description')
 		}, INPUT_DEBOUNCE_MS),
 
 		/**
 		 * Add a new question to the current form
 		 *
-		 * @param {string} type the question type, see AnswerTypes
-		 * @param {string|null} subtype the question subtype, see AnswerTypes.subtypes
-		 * @param {number|null} position where the new question should be added
+		 * @param type the question type, see AnswerTypes
+		 * @param subtype the question subtype, see AnswerTypes.subtypes
+		 * @param position where the new question should be added
 		 */
-		async addQuestion(type, subtype = null, position = null) {
+		async addQuestion(
+			type: string,
+			subtype: string | null = null,
+			position: number | null = null,
+		): Promise<void> {
 			this.activeQuestionType = null
 			const text = ''
 			this.isLoadingQuestions = true
 
 			try {
-				const body = { type, text, subtype }
+				const body: {
+					type: string
+					text: string
+					subtype: string | null
+					position?: number
+				} = { type, text, subtype }
 				if (position !== null) {
 					// position: current question position + 2 (0-based index: +1, next position: +1)
 					body.position = position + 2
@@ -509,7 +578,7 @@ export default {
 					}),
 					body,
 				)
-				const question = OcsResponse2Data(response)
+				const question = OcsResponse2Data<FormsQuestion>(response)
 
 				// Delegate insertion & focus handling to helper
 				this.insertQuestion(question, { text, type, answers: [] }, position)
@@ -526,9 +595,9 @@ export default {
 		/**
 		 * Delete a question
 		 *
-		 * @param {number} questionId the question id to delete
+		 * @param questionId the question id to delete
 		 */
-		async deleteQuestion(questionId) {
+		async deleteQuestion(questionId: number): Promise<void> {
 			this.isLoadingQuestions = true
 
 			try {
@@ -542,7 +611,7 @@ export default {
 					),
 				)
 				const index = this.form.questions.findIndex(
-					(search) => search.id === questionId,
+					(search: FormsQuestion) => search.id === questionId,
 				)
 				this.form.questions.splice(index, 1)
 				emit('forms:last-updated:set', this.form.id)
@@ -558,7 +627,11 @@ export default {
 			}
 		},
 
-		insertQuestion(questionData, defaultFields = {}, position = null) {
+		insertQuestion(
+			questionData: FormsQuestion,
+			defaultFields: Partial<FormsQuestion> = {},
+			position: number | null = null,
+		): void {
 			const newQuestionObj = {
 				...defaultFields,
 				...questionData,
@@ -579,12 +652,12 @@ export default {
 				this.form.questions.splice(insertAt, 0, newQuestionObj)
 				this.$nextTick(() => {
 					// Prefer ref by id when available, fallback to positional refs
-					this.questionRefsMap[newQuestionObj.id]?.focus()
+					this.questionRefsMap[newQuestionObj.id]?.focus?.()
 				})
 			} else {
 				this.form.questions.push(newQuestionObj)
 				this.$nextTick(() => {
-					this.questionRefsMap[newQuestionObj.id]?.focus()
+					this.questionRefsMap[newQuestionObj.id]?.focus?.()
 				})
 			}
 
@@ -594,10 +667,14 @@ export default {
 		/**
 		 * Clone a question
 		 *
-		 * @param {number} id the question id to clone in the current form
-		 * @param {number} position where the cloned question should be added
+		 * @param question the question to clone in the current form
+		 * @param question.id the question id to clone in the current form
+		 * @param position where the cloned question should be added
 		 */
-		async cloneQuestion({ id }, position) {
+		async cloneQuestion(
+			question: Pick<FormsQuestion, 'id'>,
+			position: number | null,
+		): Promise<void> {
 			this.isLoadingQuestions = true
 
 			try {
@@ -605,23 +682,23 @@ export default {
 					'apps/forms/api/v3/forms/{id}/questions?fromId={questionId}',
 					{
 						id: this.form.id,
-						questionId: id,
+						questionId: question.id,
 					},
 				)
 
-				const body = {}
+				const body: { position?: number } = {}
 				if (position !== null) {
 					// position: current question position + 2 (0-based index: +1, next position: +1)
 					body.position = position + 2
 				}
 
 				const response = await axios.post(url, body)
-				const question = OcsResponse2Data(response)
+				const clonedQuestion = OcsResponse2Data<FormsQuestion>(response)
 
 				// Delegate insertion & focus handling to helper
-				this.insertQuestion(question, { answers: [] })
+				this.insertQuestion(clonedQuestion, { answers: [] })
 			} catch (error) {
-				logger.error(`Error while duplicating question ${id}`, {
+				logger.error(`Error while duplicating question ${question.id}`, {
 					error,
 				})
 				showError('There was an error while duplicating the question')
@@ -633,9 +710,11 @@ export default {
 		/**
 		 * Reorder questions on dragEnd
 		 */
-		async onQuestionOrderChange() {
+		async onQuestionOrderChange(): Promise<void> {
 			this.isLoadingQuestions = true
-			const newOrder = this.form.questions.map((question) => question.id)
+			const newOrder = this.form.questions.map(
+				(question: FormsQuestion) => question.id,
+			)
 
 			try {
 				await axios.patch(
@@ -655,7 +734,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 658da8d0d..a46340407 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -264,7 +264,10 @@
 	</NcAppContent>
 </template>
 
-<script>
+<script lang="ts">
+import type { INode } from '@nextcloud/files'
+import type { FormsQuestion } from '../models/Entities.d.ts'
+
 import IconPoll from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
 import IconCancel from '@material-symbols/svg-400/outlined/block.svg?raw'
 import IconChevronLeft from '@material-symbols/svg-400/outlined/chevron_left.svg?raw'
@@ -284,10 +287,12 @@ import axios from '@nextcloud/axios'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { FileType } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { useIsSmallMobile } from '@nextcloud/vue'
 import debounce from 'debounce'
+import { defineComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
@@ -311,25 +316,68 @@ import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
-const SUPPORTED_FILE_FORMATS = {
+type SupportedFileFormat = 'ods' | 'csv' | 'xlsx'
+
+interface ResponseView {
+	title: string
+	id: 'summary' | 'responses'
+}
+
+const summaryResponseView: ResponseView = {
+	title: t('forms', 'Summary'),
+	id: 'summary',
+}
+
+const responsesResponseView: ResponseView = {
+	title: t('forms', 'Responses'),
+	id: 'responses',
+}
+
+interface SubmissionAnswer {
+	id: number
+	questionId: number
+	text: string
+	fileId?: number | null
+	[key: string]: unknown
+}
+
+interface SubmissionRecord {
+	id: number
+	userId: string
+	userDisplayName: string
+	timestamp: number | string
+	answers: SubmissionAnswer[]
+	[key: string]: unknown
+}
+
+interface ResultsResponse {
+	submissions: SubmissionRecord[]
+	questions: FormsQuestion[]
+	filteredSubmissionsCount: number
+}
+
+interface DialogButton {
+	label: string
+	icon: string
+	variant: 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'success'
+	callback: () => void | Promise<void>
+}
+
+interface PickerLike {
+	pick: () => Promise<string>
+}
+
+const SUPPORTED_FILE_FORMATS: Record<SupportedFileFormat, string> = {
 	ods: IconTable,
 	csv: IconFileDelimited,
 	xlsx: IconFileExcelOutline,
 }
-let fileFormat = 'csv'
 
-const responseViews = [
-	{
-		title: t('forms', 'Summary'),
-		id: 'summary',
-	},
-	{
-		title: t('forms', 'Responses'),
-		id: 'responses',
-	},
-]
+let fileFormat: SupportedFileFormat = 'csv'
 
-export default {
+const responseViews: ResponseView[] = [summaryResponseView, responsesResponseView]
+
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Results',
 
@@ -357,10 +405,8 @@ export default {
 	setup() {
 		return {
 			isMobile: useIsSmallMobile(),
-
-			// non reactive props
+			t,
 			responseViews,
-
 			IconChevronLeft,
 			IconDelete,
 			IconDownload,
@@ -377,23 +423,19 @@ export default {
 		}
 	},
 
-	data() {
+	data(): ResultsViewData {
 		return {
-			questions: [],
-			submissions: [],
-			filteredSubmissionsCount: 0,
-
-			isDownloadActionOpened: false,
-			loadingResults: true,
-			skipReloadOnOffsetChange: false,
-
-			picker: null,
-			showConfirmDeleteDialog: false,
-
-			submissionSearch: '',
-			limit: 20,
-			offset: 0,
-
+			questions: [] as FormsQuestion[],
+			submissions: [] as SubmissionRecord[],
+			filteredSubmissionsCount: 0 as number,
+			isDownloadActionOpened: false as boolean,
+			loadingResults: true as boolean,
+			skipReloadOnOffsetChange: false as boolean,
+			picker: null as PickerLike | null,
+			showConfirmDeleteDialog: false as boolean,
+			submissionSearch: '' as string,
+			limit: 20 as number,
+			offset: 0 as number,
 			linkedFileNotAvailableButtons: [
 				{
 					label: t('forms', 'Unlink spreadsheet'),
@@ -411,7 +453,7 @@ export default {
 						this.onLinkFile()
 					},
 				},
-			],
+			] as DialogButton[],
 
 			confirmDeleteButtons: [
 				{
@@ -419,7 +461,7 @@ export default {
 					icon: IconCancel,
 					variant: 'tertiary',
 					callback: () => {
-						this.showConfirmDeleteDialog = false
+						this.closeDeleteConfirmation()
 					},
 				},
 				{
@@ -430,31 +472,30 @@ export default {
 						this.deleteAllSubmissionsConfirmed()
 					},
 				},
-			],
+			] as DialogButton[],
 		}
 	},
 
 	computed: {
-		isSummaryView() {
+		isSummaryView(): boolean {
 			return this.$route.name === 'results.summary'
 		},
 
-		activeResponseView() {
-			const viewId = this.isSummaryView ? 'summary' : 'responses'
-			return responseViews.find((view) => view.id === viewId)
+		activeResponseView(): ResponseView {
+			return this.isSummaryView ? summaryResponseView : responsesResponseView
 		},
 
-		isFormArchived() {
+		isFormArchived(): boolean {
 			return this.form.state === FormState.FormArchived
 		},
 
-		canExportSubmissions() {
+		canExportSubmissions(): boolean {
 			return this.form.permissions.includes(
 				this.PERMISSION_TYPES.PERMISSION_RESULTS,
 			)
 		},
 
-		canDeleteSubmissions() {
+		canDeleteSubmissions(): boolean {
 			return (
 				this.form.permissions.includes(
 					this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
@@ -462,39 +503,35 @@ export default {
 			)
 		},
 
-		canEditForm() {
+		canEditForm(): boolean {
 			return this.form.permissions.includes(
 				this.PERMISSION_TYPES.PERMISSION_EDIT,
 			)
 		},
 
-		noSubmissions() {
-			return this.form?.submissionCount === 0
+		noSubmissions(): boolean {
+			return this.form.submissionCount === 0
 		},
 
-		noFilteredSubmissions() {
+		noFilteredSubmissions(): boolean {
 			return this.submissions.length === 0
 		},
 
-		/**
-		 * Generate link to linked file
-		 *
-		 * @return {string}
-		 */
-		fileUrl() {
+		fileUrl(): string {
 			if (this.form.fileId) {
 				return generateUrl('/f/{fileId}', { fileId: this.form.fileId })
 			}
 			return window.location.href
 		},
 
-		showLinkedFileNotAvailableDialog() {
+		showLinkedFileNotAvailableDialog(): boolean {
 			if (this.form.partial) {
 				return false
 			}
+
 			return (
 				this.canEditForm
-				&& this.form.fileId
+				&& Boolean(this.form.fileId)
 				&& !this.form.filePath
 				&& !this.isFormLocked
 			)
@@ -502,33 +539,36 @@ export default {
 	},
 
 	watch: {
-		// Reload results when form changes
-		async hash() {
+		async hash(): Promise<void> {
 			await this.fetchFullForm(this.form.id)
 			await this.loadFormResults()
 			SetWindowTitle(this.formTitle)
 		},
 
 		'$route.name': {
-			handler() {
+			handler(): void {
 				const viewId = this.isSummaryView ? 'summary' : 'responses'
 				this.saveActiveResponseViewToLocalStorage(viewId)
 				this.loadFormResults()
 			},
 		},
 
-		limit() {
+		limit(): void {
 			this.loadFormResults()
 		},
 
-		offset() {
-			// Only load results if we're not changing offset from submissionSearch watch
+		offset(): void {
 			if (!this.skipReloadOnOffsetChange) {
 				this.loadFormResults()
 			}
 		},
 
-		submissionSearch: debounce(function () {
+		submissionSearch: debounce(function (
+			this: ResultsViewData & {
+				$nextTick: (callback: () => void) => void
+				loadFormResults: () => void
+			},
+		) {
 			this.skipReloadOnOffsetChange = true
 			this.offset = 0
 			this.$nextTick(() => {
@@ -538,7 +578,7 @@ export default {
 		}, INPUT_DEBOUNCE_MS),
 	},
 
-	async beforeMount() {
+	async beforeMount(): Promise<void> {
 		// Determine the initial viewId based on the route
 		const viewId = this.isSummaryView ? 'summary' : 'responses'
 		this.saveActiveResponseViewToLocalStorage(viewId)
@@ -552,9 +592,9 @@ export default {
 		/**
 		 * Save the active response view preference to localStorage for the current form.
 		 *
-		 * @param {string} viewId - The ID of the view ('summary' or 'responses')
+		 * @param viewId - The ID of the view ('summary' or 'responses')
 		 */
-		saveActiveResponseViewToLocalStorage(viewId) {
+		saveActiveResponseViewToLocalStorage(viewId: ResponseView['id']): void {
 			try {
 				const storageKey = this.getActiveResponseViewStorageKey()
 				if (!storageKey) {
@@ -569,13 +609,8 @@ export default {
 			}
 		},
 
-		/**
-		 * Build the localStorage key for the active response view.
-		 *
-		 * @return {string|null}
-		 */
-		getActiveResponseViewStorageKey() {
-			const formHash = this.form?.hash
+		getActiveResponseViewStorageKey(): string | null {
+			const formHash = this.form.hash
 			if (!formHash) {
 				return null
 			}
@@ -586,9 +621,9 @@ export default {
 		/**
 		 * Navigate to an explicit route for the selected response view.
 		 *
-		 * @param {object} view The selected response view object
+		 * @param view The selected response view object
 		 */
-		async onViewChange(view) {
+		async onViewChange(view: ResponseView): Promise<void> {
 			if (!view?.id) {
 				return
 			}
@@ -610,7 +645,7 @@ export default {
 			}
 		},
 
-		async onUnlinkFile() {
+		async onUnlinkFile(): Promise<void> {
 			await axios.patch(
 				generateOcsUrl('apps/forms/api/v3/forms/{formId}', {
 					formId: this.form.id,
@@ -633,7 +668,7 @@ export default {
 			emit('forms:last-updated:set', this.form.id)
 		},
 
-		async loadFormResults() {
+		async loadFormResults(): Promise<void> {
 			this.loadingResults = true
 			logger.debug(`Loading responses for form ${this.form.hash}`)
 
@@ -658,9 +693,8 @@ export default {
 						),
 					)
 				}
-				const data = OcsResponse2Data(response)
+				const data = OcsResponse2Data<ResultsResponse>(response)
 
-				// Append questions & submissions
 				this.submissions = this.formatDateAnswers(
 					data.submissions,
 					data.questions,
@@ -675,111 +709,95 @@ export default {
 			}
 		},
 
-		async onDownloadFile(fileFormat) {
+		async onDownloadFile(nextFileFormat: SupportedFileFormat): Promise<void> {
 			const exportUrl =
 				generateOcsUrl('apps/forms/api/v3/forms/{id}/submissions', {
 					id: this.form.id,
 				})
 				+ '?requesttoken='
-				+ encodeURIComponent(getRequestToken())
+				+ encodeURIComponent(getRequestToken() ?? '')
 				+ '&fileFormat='
-				+ fileFormat
+				+ nextFileFormat
+
 			window.open(exportUrl, '_self')
 		},
 
-		async onLinkFile() {
+		async onLinkFile(): Promise<void> {
 			try {
-				await this.getPicker()
-					.pick()
-					.then(async (path) => {
-						try {
-							await axios.patch(
-								generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-									id: this.form.id,
-								}),
-								{
-									keyValuePairs: {
-										path,
-										fileFormat,
-									},
-								},
-							)
-							await this.fetchFullForm(this.form.id)
-							await this.loadFormResults()
+				const path = await this.getPicker().pick()
+				try {
+					await axios.patch(
+						generateOcsUrl('apps/forms/api/v3/forms/{id}', {
+							id: this.form.id,
+						}),
+						{
+							keyValuePairs: {
+								path,
+								fileFormat,
+							},
+						},
+					)
+					await this.fetchFullForm(this.form.id)
+					await this.loadFormResults()
 
-							showSuccess(
-								t('forms', 'File {file} successfully linked', {
-									file: this.form.filePath.split('/').pop(),
-								}),
-							)
-							emit('forms:last-updated:set', this.form.id)
-						} catch (error) {
-							logger.error(
-								'Error while exporting to Files and linking',
-								{ error },
-							)
-							showError(
-								t(
-									'forms',
-									'There was an error while linking the file',
-								),
-							)
-						}
+					showSuccess(
+						t('forms', 'File {file} successfully linked', {
+							file: this.form.filePath?.split('/').pop() ?? '',
+						}),
+					)
+					emit('forms:last-updated:set', this.form.id)
+				} catch (error) {
+					logger.error('Error while exporting to Files and linking', {
+						error,
 					})
+					showError(
+						t('forms', 'There was an error while linking the file'),
+					)
+				}
 			} catch (error) {
-				// User aborted
 				logger.debug('No file selected', { error })
 			}
 		},
 
-		// Show Filepicker, then call API to store
-		async onStoreToFiles() {
+		async onStoreToFiles(): Promise<void> {
 			try {
-				await this.getPicker()
-					.pick()
-					.then(async (path) => {
-						try {
-							const response = await axios.post(
-								generateOcsUrl(
-									'apps/forms/api/v3/forms/{id}/submissions/export',
-									{
-										id: this.form.id,
-									},
-								),
-								{
-									path,
-									fileFormat,
-								},
-							)
-							showSuccess(
-								t('forms', 'Export successful to {file}', {
-									file: OcsResponse2Data(response),
-								}),
-							)
-						} catch (error) {
-							logger.error('Error while exporting to Files', {
-								error,
-							})
-							showError(
-								t(
-									'forms',
-									'There was an error while exporting to Files',
-								),
-							)
-						}
-					})
+				const path = await this.getPicker().pick()
+				try {
+					const response = await axios.post(
+						generateOcsUrl(
+							'apps/forms/api/v3/forms/{id}/submissions/export',
+							{
+								id: this.form.id,
+							},
+						),
+						{
+							path,
+							fileFormat,
+						},
+					)
+
+					showSuccess(
+						t('forms', 'Export successful to {file}', {
+							file: OcsResponse2Data<string>(response),
+						}),
+					)
+				} catch (error) {
+					logger.error('Error while exporting to Files', { error })
+					showError(
+						t('forms', 'There was an error while exporting to Files'),
+					)
+				}
 			} catch (error) {
-				// User aborted
 				logger.debug('No file selected', { error })
 			}
 		},
 
-		async onReExport() {
+		async onReExport(): Promise<void> {
 			if (!this.form.fileId) {
-				// Theoretically this will never fire
 				showError(t('forms', 'File is not linked'))
 				return
 			}
+
 			try {
 				const response = await axios.post(
 					generateOcsUrl(
@@ -793,9 +811,10 @@ export default {
 						fileFormat: this.form.fileFormat,
 					},
 				)
+
 				showSuccess(
 					t('forms', 'Export successful to {file}', {
-						file: OcsResponse2Data(response),
+						file: OcsResponse2Data<string>(response),
 					}),
 				)
 			} catch (error) {
@@ -804,41 +823,34 @@ export default {
 			}
 		},
 
-		/**
-		 * Determines if a submission can be deleted.
-		 *
-		 * @param {string} submissionUser - The ID of the user who created the submission.
-		 * @return {boolean} - Returns true if the submission can be deleted, otherwise false.
-		 *                      A submission can be deleted if:
-		 *                      - The user has the `canDeleteSubmissions` permission, or
-		 *                      - The form allows editing (`form.allowEditSubmissions`) and the current user is the owner of the submission.
-		 */
-		canDeleteSubmission(submissionUser) {
+		canDeleteSubmission(submissionUser: string): boolean {
+			const currentUser = getCurrentUser()
 			return (
 				this.canDeleteSubmissions
 				|| (this.form.allowEditSubmissions
-					&& getCurrentUser().uid === submissionUser)
+					&& currentUser?.uid === submissionUser)
 			)
 		},
 
 		/**
 		 * Determines if a submission can be edited.
 		 *
-		 * @param {string} submissionUser - The ID of the user who created the submission.
-		 * @return {boolean} - Returns true if the submission can be edited, otherwise false.
+		 * @param submissionUser - The ID of the user who created the submission.
+		 * @return - Returns true if the submission can be edited, otherwise false.
 		 *                      A submission can be edited if:
 		 *                      - The user has the `canDeleteSubmissions` permission, or
 		 *                      - The form allows editing (`form.allowEditSubmissions`) and the current user is the owner of the submission.
 		 */
-		canEditSubmission(submissionUser) {
+		canEditSubmission(submissionUser: string): boolean {
+			const currentUser = getCurrentUser()
 			return (
 				this.canDeleteSubmissions
 				|| (this.form.allowEditSubmissions
-					&& getCurrentUser().uid === submissionUser)
+					&& currentUser?.uid === submissionUser)
 			)
 		},
 
-		async deleteSubmission(id) {
+		async deleteSubmission(id: number): Promise<void> {
 			this.loadingResults = true
 
 			try {
@@ -851,9 +863,10 @@ export default {
 						},
 					),
 				)
+
 				showSuccess(t('forms', 'Response deleted'))
 				const index = this.submissions.findIndex(
-					(search) => search.id === id,
+					(search: SubmissionRecord) => search.id === id,
 				)
 				this.submissions.splice(index, 1)
 				emit('forms:last-updated:set', this.form.id)
@@ -867,19 +880,25 @@ export default {
 			}
 		},
 
-		deleteAllSubmissions() {
+		deleteAllSubmissions(): void {
 			this.showConfirmDeleteDialog = true
 		},
 
-		async deleteAllSubmissionsConfirmed() {
+		closeDeleteConfirmation(): void {
+			this.showConfirmDeleteDialog = false
+		},
+
+		async deleteAllSubmissionsConfirmed(): Promise<void> {
 			this.showConfirmDeleteDialog = false
 			this.loadingResults = true
+
 			try {
 				await axios.delete(
 					generateOcsUrl('apps/forms/api/v3/forms/{id}/submissions', {
 						id: this.form.id,
 					}),
 				)
+
 				this.submissions = []
 				this.form.submissionCount = 0
 				emit('forms:last-updated:set', this.form.id)
@@ -891,34 +910,31 @@ export default {
 			}
 		},
 
-		formatDateAnswers(submissions, questions) {
-			// Filter questions that are date/datetime/time
+		formatDateAnswers(
+			submissions: SubmissionRecord[],
+			questions: FormsQuestion[],
+		): SubmissionRecord[] {
 			const dateQuestions = Object.fromEntries(
 				questions
 					.filter(
 						(question) =>
-							(question.type === 'date')
-							| (question.type === 'datetime')
-							| (question.type === 'time'),
+							question.type === 'date'
+							|| question.type === 'datetime'
+							|| question.type === 'time',
 					)
 					.map((question) => [question.id, question.type]),
-			)
+			) as Record<number, keyof typeof answerTypes>
 
-			// Go through submissions and reformat answers to date/time questions
 			submissions.forEach((submission) => {
 				submission.answers
 					.filter((answer) => answer.questionId in dateQuestions)
 					.forEach((answer) => {
-						const date = moment(
-							answer.text,
+						const answerType =
 							answerTypes[dateQuestions[answer.questionId]]
-								.storageFormat,
-						)
+						const date = moment(answer.text, answerType.storageFormat)
+
 						if (date.isValid()) {
-							answer.text = date.format(
-								answerTypes[dateQuestions[answer.questionId]]
-									.momentFormat,
-							)
+							answer.text = date.format(answerType.momentFormat)
 						}
 					})
 			})
@@ -926,7 +942,7 @@ export default {
 			return submissions
 		},
 
-		getPicker() {
+		getPicker(): PickerLike {
 			if (this.picker !== null) {
 				return this.picker
 			}
@@ -936,33 +952,42 @@ export default {
 			)
 				.setMultiSelect(false)
 				.allowDirectories(true)
-				.setCanPick((node) => {
+				.setCanPick((node: INode) => {
 					if (node.type === FileType.Folder) {
 						return true
 					}
 
 					const extension = node.extension?.slice(1).toLowerCase()
-					return !!extension && extension in SUPPORTED_FILE_FORMATS
+					if (!extension) {
+						return false
+					}
+
+					return extension in SUPPORTED_FILE_FORMATS
 				})
-				.setButtonFactory((selectedNodes) => {
+				.setButtonFactory((selectedNodes: INode[]) => {
 					const [node] = selectedNodes
 					if (node && node.type === FileType.File) {
-						const extension = node.extension?.slice(1).toLowerCase()
+						const extension = node.extension?.slice(1).toLowerCase() as
+							SupportedFileFormat | undefined
+
 						return [
 							{
 								label: t('forms', 'Select {file}', {
 									file: selectedNodes[0].basename,
 								}),
-								icon: SUPPORTED_FILE_FORMATS[extension],
+								icon: extension
+									? SUPPORTED_FILE_FORMATS[extension]
+									: IconTable,
 								callback() {
-									fileFormat = extension
+									if (extension) {
+										fileFormat = extension
+									}
 								},
 								variant: 'primary',
 							},
 						]
 					}
 
-					// no node selected (pick current folder) or folder selected
 					return [
 						{
 							label: t('forms', 'Create XLSX'),
@@ -990,12 +1015,12 @@ export default {
 						},
 					]
 				})
-				.build()
+				.build() as PickerLike
 
 			return this.picker
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index ee92972d6..e62a6384b 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -57,13 +57,16 @@
 	</NcAppSidebar>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsShare } from '../models/Entities.d.ts'
+
 import IconComment from '@material-symbols/svg-400/outlined/comment.svg?raw'
 import IconSettings from '@material-symbols/svg-400/outlined/settings.svg?raw'
 import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
+import { defineComponent } from 'vue'
 import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar'
 import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -73,7 +76,14 @@ import PermissionTypes from '../mixins/PermissionTypes.ts'
 import ViewsMixin from '../mixins/ViewsMixin.ts'
 import logger from '../utils/Logger.ts'
 
-export default {
+interface CommentsViewLike {
+	update: (id: number) => Promise<void> | void
+	$mount: (el: Element) => void
+}
+
+type ShareWithId = FormsShare & { id: number }
+
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Sidebar',
 
@@ -98,6 +108,7 @@ export default {
 
 	setup() {
 		return {
+			t,
 			IconComment,
 			IconSettings,
 			IconShareVariant,
@@ -106,18 +117,18 @@ export default {
 
 	data() {
 		return {
-			commentsView: null,
+			commentsView: null as CommentsViewLike | null,
 		}
 	},
 
 	computed: {
-		canEdit() {
+		canEdit(): boolean {
 			return this.form?.permissions?.includes(
 				this.PERMISSION_TYPES.PERMISSION_EDIT,
 			)
 		},
 
-		lockedUntilFormatted() {
+		lockedUntilFormatted(): string {
 			if (this.form.lockedUntil === 0 || this.form.lockedUntil === null) {
 				return ''
 			}
@@ -126,7 +137,7 @@ export default {
 				.fromNow()
 		},
 
-		sidebarTitle() {
+		sidebarTitle(): string {
 			if (this.active === 'forms-comments') {
 				return t('forms', 'Form comments')
 			} else {
@@ -136,7 +147,7 @@ export default {
 	},
 
 	watch: {
-		'form.id': function (newId) {
+		'form.id': function (newId: number) {
 			// Only update comments when the Comments tab is active
 			if (this.active !== 'forms-comments') {
 				return
@@ -150,7 +161,7 @@ export default {
 			}
 		},
 
-		active(newVal) {
+		active(newVal: string) {
 			if (newVal === 'forms-comments') {
 				this.setupComments()
 			} else {
@@ -183,26 +194,44 @@ export default {
 	},
 
 	methods: {
-		onUpdateActive(active) {
+		onUpdateActive(active: string): void {
 			this.$emit('update:active', active)
 		},
 
 		// Mount or update the Comments view inside the sidebar
-		async setupComments() {
+		async setupComments(): Promise<void> {
 			// comments disabled for this form
 			if (!this.form.allowComments) {
 				return
 			}
 
 			// comments element missing
-			const el = this.$refs.commentsEl
+			const el = this.$refs.commentsEl as Element | undefined
 			if (!el) {
 				logger.debug('setupComments: no comments element found')
 				return
 			}
 
 			if (!this.commentsView) {
-				this.commentsView = new OCA.Comments.View('forms', {
+				const commentsCtor = (
+					window as unknown as {
+						OCA?: {
+							Comments?: {
+								View?: new (
+									scope: string,
+									options: { propsData: { resourceId: number } },
+								) => CommentsViewLike
+							}
+						}
+					}
+				).OCA?.Comments?.View
+
+				if (!commentsCtor) {
+					logger.debug('setupComments: comments constructor not available')
+					return
+				}
+
+				this.commentsView = new commentsCtor('forms', {
 					propsData: { resourceId: this.form.id },
 				})
 			}
@@ -210,48 +239,52 @@ export default {
 			this.commentsView.$mount(el)
 		},
 
-		teardownComments() {
+		teardownComments(): void {
 			this.commentsView = null
 		},
 
 		/**
 		 * Save Form-Properties
 		 *
-		 * @param {string} property The Name of the Property to update
-		 * @param {any} newVal The new Property value
+		 * @param property The Name of the Property to update
+		 * @param newVal The new Property value
 		 */
-		onPropertyChange(property, newVal) {
-			this.form[property] = newVal
+		onPropertyChange(property: string, newVal: unknown): void {
+			;(this.form as unknown as Record<string, unknown>)[property] = newVal
 			this.saveFormProperty(property)
 		},
 
 		/**
 		 * Adding/Removing Share from the reactive object. API-Request is done in sharing-tab.
 		 *
-		 * @param {object} share The respective share object
+		 * @param share The respective share object
 		 */
-		onAddShare(share) {
+		onAddShare(share: FormsShare): void {
 			this.form.shares.push(share)
 			emit('forms:last-updated:set', this.form.id)
 		},
 
-		onRemoveShare(share) {
+		onRemoveShare(share: ShareWithId): void {
 			const index = this.form.shares.findIndex(
-				(search) => search.id === share.id,
+				(search): boolean =>
+					'id' in (search as unknown as Record<string, unknown>)
+					&& (search as ShareWithId).id === share.id,
 			)
 			this.form.shares.splice(index, 1)
 			emit('forms:last-updated:set', this.form.id)
 		},
 
-		onUpdateShare(share) {
+		onUpdateShare(share: ShareWithId): void {
 			const index = this.form.shares.findIndex(
-				(search) => search.id === share.id,
+				(search): boolean =>
+					'id' in (search as unknown as Record<string, unknown>)
+					&& (search as ShareWithId).id === share.id,
 			)
 			this.form.shares.splice(index, 1, share)
 			emit('forms:last-updated:set', this.form.id)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index ce947d5c1..4552bcceb 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -73,7 +73,7 @@
 						? ''
 						: t('forms', 'Thank you for completing the form!')
 				"
-				:description="form.submissionMessage">
+				:description="form.submissionMessage ?? undefined">
 				<template #icon>
 					<NcIconSvgWrapper :svg="IconCheckSvg" :size="64" />
 				</template>
@@ -93,7 +93,7 @@
 					)
 				">
 				<template #icon>
-					<NcIconSvgWrapper :svg="IconCheckSvg" size="64" />
+					<NcIconSvgWrapper :svg="IconCheckSvg" :size="64" />
 				</template>
 			</NcEmptyContent>
 			<NcEmptyContent
@@ -107,7 +107,7 @@
 					)
 				">
 				<template #icon>
-					<NcIconSvgWrapper :svg="IconCheckSvg" size="64" />
+					<NcIconSvgWrapper :svg="IconCheckSvg" :size="64" />
 				</template>
 			</NcEmptyContent>
 			<NcEmptyContent
@@ -121,7 +121,7 @@
 					)
 				">
 				<template #icon>
-					<NcIconSvgWrapper :svg="IconCheckSvg" size="64" />
+					<NcIconSvgWrapper :svg="IconCheckSvg" :size="64" />
 				</template>
 			</NcEmptyContent>
 
@@ -141,7 +141,9 @@
 						:values="answers[question.id]"
 						@keydown.enter="onKeydownEnter"
 						@keydown.ctrl.enter="onKeydownCtrlEnter"
-						@update:values="(values) => onUpdate(question, values)" />
+						@update:values="
+							(values: unknown[]) => onUpdate(question, values)
+						" />
 				</ul>
 				<div class="form-buttons">
 					<NcButton
@@ -216,7 +218,9 @@
 	</NcAppContent>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsQuestion } from '../models/Entities.d.ts'
+
 import IconCancel from '@material-symbols/svg-400/outlined/block.svg?raw'
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import IconRefresh from '@material-symbols/svg-400/outlined/refresh.svg?raw'
@@ -225,8 +229,10 @@ import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
+import { defineComponent } from 'vue'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
@@ -250,7 +256,64 @@ import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
-export default {
+const formsAppName = 'forms'
+
+type AnswerValue = string[]
+type AnswersMap = Record<number, AnswerValue>
+
+interface StoredAnswerState {
+	value: AnswerValue
+	type: string
+}
+
+interface StoredAnswersMap {
+	[key: string]: StoredAnswerState
+}
+
+interface QuestionOption {
+	id: number
+	text: string
+	optionType?: string
+}
+
+interface SubmitQuestion extends FormsQuestion {
+	options?: QuestionOption[]
+	extraSettings?: Record<string, unknown> & {
+		allowOtherAnswer?: boolean
+	}
+	isRequired?: boolean
+}
+
+interface LoadedSubmissionAnswer {
+	id: number
+	questionId: number | string
+	text: string
+}
+
+interface LoadedSubmissionResponse {
+	answers: LoadedSubmissionAnswer[]
+}
+
+interface QuestionComponentRef {
+	validate: () => Promise<boolean>
+}
+
+interface DialogButton {
+	label: string
+	icon: string
+	variant?:
+		| 'primary'
+		| 'secondary'
+		| 'tertiary'
+		| 'tertiary-no-background'
+		| 'tertiary-on-primary'
+		| 'error'
+		| 'warning'
+		| 'success'
+	callback: () => void
+}
+
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Submit',
 
@@ -316,34 +379,33 @@ export default {
 			IconCheckSvg: IconCheck,
 			IconRefreshSvg: IconRefresh,
 			IconSendSvg: IconSend,
+			t,
 
-			maxStringLengths: loadState('forms', 'maxStringLengths'),
+			maxStringLengths: loadState(formsAppName, 'maxStringLengths') as Record<
+				string,
+				number
+			>,
 		}
 	},
 
 	data() {
 		return {
 			answerTypes,
-			/**
-			 * Mapping of questionId => answers
-			 *
-			 * @type {Record<number, string[]>}
-			 */
-			answers: {},
-			loading: false,
-			success: false,
-			successAnnouncement: '',
-			/** Submit state of the form, true if changes are currently submitted */
-			submitForm: false,
-			showConfirmEmptyModal: false,
-			showConfirmLeaveDialog: false,
-			showClearFormDialog: false,
-			showClearFormDueToChangeDialog: false,
+			answers: {} as AnswersMap,
+			loading: false as boolean,
+			success: false as boolean,
+			successAnnouncement: '' as string,
+			submitForm: false as boolean,
+			showConfirmEmptyModal: false as boolean,
+			showConfirmLeaveDialog: false as boolean,
+			showClearFormDialog: false as boolean,
+			showClearFormDueToChangeDialog: false as boolean,
+			confirmButtonCallback: () => {},
 		}
 	},
 
 	computed: {
-		validQuestions() {
+		validQuestions(): SubmitQuestion[] {
 			return this.form.questions.filter((question) => {
 				// All questions must have a valid title
 				if (question.text?.trim() === '') {
@@ -351,53 +413,53 @@ export default {
 				}
 
 				// If specific conditions provided, test against them
-				if ('validate' in answerTypes[question.type]) {
-					return answerTypes[question.type].validate(question)
+				const answerType = answerTypes[question.type]
+				if (typeof answerType.validate === 'function') {
+					return answerType.validate(question)
 				}
 				return true
-			})
+			}) as SubmitQuestion[]
 		},
 
-		validQuestionsIds() {
+		validQuestionsIds(): Set<number> {
 			return new Set(this.validQuestions.map((question) => question.id))
 		},
 
-		isRequiredUsed() {
-			return this.form.questions.reduce(
-				(isUsed, question) => isUsed || question.isRequired,
-				false,
+		isRequiredUsed(): boolean {
+			return this.form.questions.some((question) =>
+				Boolean(question.isRequired),
 			)
 		},
 
 		/**
 		 * Check if form is expired
 		 */
-		isExpired() {
-			return this.form.expires && moment().unix() > this.form.expires
+		isExpired(): boolean {
+			return this.form.expires > 0 && moment().unix() > this.form.expires
 		},
 
-		isArchived() {
+		isArchived(): boolean {
 			return this.form.state === FormState.FormArchived
 		},
 
-		isClosed() {
+		isClosed(): boolean {
 			return this.form.state === FormState.FormClosed
 		},
 
-		isMaxSubmissionsReached() {
+		isMaxSubmissionsReached(): boolean {
 			return this.form.isMaxSubmissionsReached === true
 		},
 
 		/**
 		 * Checks if the current state is active.
 		 *
-		 * @return {boolean} - Returns true if active, otherwise false.
+		 * @return - Returns true if active, otherwise false.
 		 */
-		isActive() {
+		isActive(): boolean {
 			return !this.isArchived && !this.isClosed && !this.isExpired
 		},
 
-		infoMessage() {
+		infoMessage(): string {
 			let message = ''
 			if (this.form.isAnonymous) {
 				message += t('forms', 'Responses are anonymous.')
@@ -417,7 +479,7 @@ export default {
 		/**
 		 * Rendered HTML of the custom submission message
 		 */
-		submissionMessageHTML() {
+		submissionMessageHTML(): string {
 			if (
 				this.form.submissionMessage
 				&& (this.success || !this.form.canSubmit)
@@ -427,7 +489,7 @@ export default {
 			return ''
 		},
 
-		expirationMessage() {
+		expirationMessage(): string {
 			const relativeDate = moment(this.form.expires, 'X')
 				.locale(window.OC.getLanguage())
 				.fromNow()
@@ -440,7 +502,7 @@ export default {
 		/**
 		 * Buttons for the "confirm submit empty form" dialog
 		 */
-		confirmEmptyModalButtons() {
+		confirmEmptyModalButtons(): DialogButton[] {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -459,7 +521,7 @@ export default {
 		/**
 		 * Buttons for the "confirm leave unsubmitted form" dialog
 		 */
-		confirmLeaveFormButtons() {
+		confirmLeaveFormButtons(): DialogButton[] {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -478,7 +540,7 @@ export default {
 		/**
 		 * Buttons for the "confirm clear form" dialog
 		 */
-		confirmClearFormButtons() {
+		confirmClearFormButtons(): DialogButton[] {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -494,20 +556,20 @@ export default {
 			]
 		},
 
-		hasAnswers() {
+		hasAnswers(): boolean {
 			return Object.keys(this.answers).length > 0
 		},
 
-		submissionId() {
+		submissionId(): number | null {
 			const id =
 				this.$route?.params.submissionId
-				|| loadState(appName, 'submissionId', null)
-			return id ? parseInt(id) : null
+				|| loadState(formsAppName, 'submissionId', null)
+			return id ? parseInt(String(id), 10) : null
 		},
 	},
 
 	watch: {
-		success(newVal) {
+		success(newVal: boolean): void {
 			if (newVal) {
 				// Delay populating the live region to avoid the announcement being
 				// swallowed by the simultaneous large DOM change (form replaced by
@@ -523,7 +585,7 @@ export default {
 			}
 		},
 
-		hash() {
+		hash(): void {
 			// If public view, abort. Should normally not occur.
 			if (this.publicView) {
 				logger.error('Hash changed on public view. Aborting.')
@@ -537,15 +599,15 @@ export default {
 		},
 	},
 
-	beforeUnmount() {
+	beforeUnmount(): void {
 		window.removeEventListener('beforeunload', this.beforeWindowUnload)
 	},
 
-	created() {
+	created(): void {
 		window.addEventListener('beforeunload', this.beforeWindowUnload)
 	},
 
-	async beforeMount() {
+	async beforeMount(): Promise<void> {
 		// Public Views get their form by initial-state from parent. No fetch necessary.
 		if (this.publicView) {
 			this.isLoadingForm = false
@@ -574,9 +636,9 @@ export default {
 		/**
 		 * Load saved values for current form from LocalStorage
 		 *
-		 * @return {Record<string,any>}
+		 * @return
 		 */
-		getFormValuesFromLocalStorage() {
+		getFormValuesFromLocalStorage(): StoredAnswersMap | null {
 			const fromLocalStorage = localStorage.getItem(
 				`nextcloud_forms_${this.publicView ? this.shareHash : this.hash}`,
 			)
@@ -589,16 +651,16 @@ export default {
 		/**
 		 * Initialize answers from saved state in LocalStorage
 		 */
-		initFromLocalStorage() {
+		initFromLocalStorage(): void {
 			const savedState = this.getFormValuesFromLocalStorage()
 			if (!savedState) {
 				return
 			}
 
-			const answers = {}
+			const answers: AnswersMap = {}
 			for (const [questionId, answer] of Object.entries(savedState)) {
 				// Clean up answers for questions that do not exist anymore
-				if (!this.validQuestionsIds.has(parseInt(questionId))) {
+				if (!this.validQuestionsIds.has(parseInt(questionId, 10))) {
 					this.showClearFormDueToChangeDialog = true
 					logger.debug('Question does not exist anymore', {
 						questionId,
@@ -606,7 +668,7 @@ export default {
 					continue
 				}
 
-				answers[questionId] = [
+				answers[parseInt(questionId, 10)] = [
 					'QuestionMultiple',
 					'QuestionRanking',
 				].includes(answer.type)
@@ -619,9 +681,9 @@ export default {
 		/**
 		 * Save updated answers for question to LocalStorage in case of browser crash / closes / etc
 		 *
-		 * @param {*} question Question to update
+		 * @param question Question to update
 		 */
-		addFormFieldToLocalStorage(question) {
+		addFormFieldToLocalStorage(question: SubmitQuestion): void {
 			if (!this.isLoggedIn) {
 				return
 			}
@@ -640,7 +702,7 @@ export default {
 			)
 		},
 
-		deleteFormFieldFromLocalStorage() {
+		deleteFormFieldFromLocalStorage(): void {
 			if (!this.isLoggedIn) {
 				return
 			}
@@ -649,7 +711,7 @@ export default {
 			)
 		},
 
-		async fetchSubmission() {
+		async fetchSubmission(): Promise<void> {
 			logger.debug(`Loading response ${this.submissionId}`)
 
 			try {
@@ -663,10 +725,11 @@ export default {
 					),
 				)
 
-				const answers = {}
-				const loadedAnswers = OcsResponse2Data(response).answers
+				const answers: AnswersMap = {}
+				const loadedAnswers =
+					OcsResponse2Data<LoadedSubmissionResponse>(response).answers
 				for (const answer of loadedAnswers) {
-					const questionId = answer.questionId
+					const questionId = Number(answer.questionId)
 					const text = answer.text
 
 					// Only initialize once, don't overwrite previous answers
@@ -676,7 +739,7 @@ export default {
 
 					logger.debug(`questionId: ${questionId}, answerId: ${answer.id}`)
 					// Clean up answers for questions that do not exist anymore
-					if (!this.validQuestionsIds.has(parseInt(questionId))) {
+					if (!this.validQuestionsIds.has(questionId)) {
 						this.showClearFormDueToChangeDialog = true
 						logger.debug('Question does not exist anymore', {
 							questionId,
@@ -686,7 +749,10 @@ export default {
 
 					const question = this.form.questions.find(
 						(question) => question.id === questionId,
-					)
+					) as SubmitQuestion | undefined
+					if (!question) {
+						continue
+					}
 					if (question.type === 'ranking') {
 						try {
 							answers[questionId].push(...JSON.parse(text).map(String))
@@ -701,15 +767,15 @@ export default {
 							question.type,
 						)
 					) {
-						const option = question.options.filter(
+						const option = (question.options ?? []).filter(
 							(option) => option.text === text,
 						)
 						if (option.length > 0) {
 							answers[questionId].push(String(option[0].id))
 						} else if (
-							question.extraSettings.allowOtherAnswer
+							question.extraSettings?.allowOtherAnswer
 							&& !answers[questionId].some((answer) =>
-								answer.startsWith(
+								String(answer).startsWith(
 									QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 								),
 							)
@@ -748,42 +814,50 @@ export default {
 		/**
 		 * Update answers of a give value
 		 *
-		 * @param {{id: number}} question The question to answer
-		 * @param {unknown[]} values The new values
+		 * @param question The question to answer
+		 * @param values The new values
 		 */
-		onUpdate(question, values) {
+		onUpdate(question: SubmitQuestion, values: AnswerValue): void {
 			this.answers = { ...this.answers, [question.id]: values }
 			this.addFormFieldToLocalStorage(question)
 		},
 
+		updateQuestionValues(question: SubmitQuestion, values: AnswerValue): void {
+			this.onUpdate(question, values)
+		},
+
 		/**
 		 * On Enter, focus next form-element
 		 * Last form element is the submit button, the form submits on enter then
 		 *
-		 * @param {object} event The fired event.
+		 * @param event The fired event.
 		 */
-		onKeydownEnter(event) {
-			const formInputs = Array.from(this.$refs.form)
+		onKeydownEnter(
+			event: KeyboardEvent & { originalTarget?: EventTarget | null },
+		): void {
+			const formInputs = Array.from(
+				(this.$refs.form as HTMLFormElement).elements,
+			) as HTMLElement[]
 			const sourceInputIndex = formInputs.findIndex(
-				(input) => input === event.originalTarget,
+				(input) => input === (event.originalTarget ?? event.target),
 			)
 
 			// Focus next form element
-			formInputs[sourceInputIndex + 1].focus()
+			formInputs[sourceInputIndex + 1]?.focus()
 		},
 
 		/**
 		 * Ctrl+Enter typically fires submit on forms.
 		 * Some inputs do automatically, while some need explicit handling
 		 */
-		onKeydownCtrlEnter() {
-			this.$refs.form.requestSubmit()
+		onKeydownCtrlEnter(): void {
+			;(this.$refs.form as HTMLFormElement | undefined)?.requestSubmit()
 		},
 
 		/*
 		 * Methods for catching unwanted unload events
 		 */
-		beforeWindowUnload(e) {
+		beforeWindowUnload(e: BeforeUnloadEvent): void {
 			if (
 				this.isActive
 				&& !this.submitForm
@@ -807,10 +881,10 @@ export default {
 		 * If the conditions are met, a confirmation dialog is shown and a promise is returned.
 		 * The promise resolves with the value passed to the confirm button callback.
 		 *
-		 * @return {Promise<boolean>|boolean} - Returns a promise that resolves with the value
+		 * @return - Returns a promise that resolves with the value
 		 * passed to the confirm button callback if the dialog is shown, otherwise returns true.
 		 */
-		confirmLeaveForm() {
+		confirmLeaveForm(): Promise<boolean> | boolean {
 			if (
 				this.isActive
 				&& !this.submitForm
@@ -818,7 +892,7 @@ export default {
 			) {
 				this.showConfirmLeaveDialog = true
 				return new Promise((resolve) => {
-					this.confirmButtonCallback = (val) => {
+					this.confirmButtonCallback = (val: boolean) => {
 						this.showConfirmLeaveDialog = false
 						resolve(val)
 					}
@@ -831,8 +905,13 @@ export default {
 		/**
 		 * Submit the form after the browser validated it 🚀 or show confirmation modal if empty
 		 */
-		async onSubmit() {
-			const validation = (this.$refs.questions ?? []).map(
+		async onSubmit(): Promise<void> {
+			const questionRefs = (
+				Array.isArray(this.$refs.questions)
+					? this.$refs.questions
+					: [this.$refs.questions].filter(Boolean)
+			) as QuestionComponentRef[]
+			const validation = questionRefs.map(
 				async (question) => await question.validate(),
 			)
 
@@ -864,7 +943,7 @@ export default {
 		/**
 		 * Handle the real submit of the form, this is only called if the form is not empty or user confirmed to submit
 		 */
-		async onConfirmedSubmit() {
+		async onConfirmedSubmit(): Promise<void> {
 			this.showConfirmEmptyModal = false
 			this.loading = true
 
@@ -898,7 +977,13 @@ export default {
 				this.deleteFormFieldFromLocalStorage()
 				emit('forms:last-updated:set', this.form.id)
 			} catch (error) {
-				const errorMessage = error.response?.data?.ocs?.meta?.message
+				const errorMessage = (
+					error as {
+						response?: {
+							data?: { ocs?: { meta?: { message?: string } } }
+						}
+					}
+				).response?.data?.ocs?.meta?.message
 				logger.error('Error while submitting the form', { error })
 				if (errorMessage) {
 					showError(
@@ -921,7 +1006,7 @@ export default {
 			}
 		},
 
-		onResetSubmission() {
+		onResetSubmission(): void {
 			this.deleteFormFieldFromLocalStorage()
 			this.resetData()
 		},
@@ -929,7 +1014,7 @@ export default {
 		/**
 		 * Reset View-Data
 		 */
-		resetData() {
+		resetData(): void {
 			this.answers = {}
 			this.loading = false
 			this.showConfirmLeaveDialog = false
@@ -939,7 +1024,7 @@ export default {
 			this.submitForm = false
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/tsconfig.json b/tsconfig.json
index 6794d7586..8d96f40b9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,13 +4,19 @@
  */
 
 {
-	"extends": "@vue/tsconfig",
-	"include": ["src/**/*", "*.ts"],
+	"extends": "@vue/tsconfig/tsconfig.dom.json",
 	"compilerOptions": {
-		"allowJs": true,
 		"target": "ESNext",
 		"module": "ESNext",
-		"moduleResolution": "Bundler",
-		"types": ["vite/client", "node"]
-	}
+		"moduleResolution": "bundler",
+		"strict": true,
+		"jsx": "preserve",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"types": ["@nextcloud/typings"]
+	},
+	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
+	"exclude": ["node_modules"]
 }