From 6e6d636edbf31671086e81eef436a8e6c001fde4 Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Fri, 17 Jul 2026 21:27:47 +0200
Subject: [PATCH] refactor: continue TS migration

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 package-lock.json                             |  54 +-
 package.json                                  |   7 +-
 src/components/AppNavigationForm.vue          |  79 +--
 src/components/PaginationToolbar.vue          |  19 +-
 src/components/PillMenu.vue                   |  75 ++-
 src/components/QRDialog.vue                   |  38 +-
 src/components/Questions/AnswerInput.vue      | 203 +++++---
 src/components/Questions/Question.vue         |  84 +--
 src/components/Questions/QuestionColor.vue    |  21 +-
 src/components/Questions/QuestionDate.vue     | 181 ++++---
 src/components/Questions/QuestionDropdown.vue |  35 +-
 src/components/Questions/QuestionFile.vue     | 193 ++++---
 src/components/Questions/QuestionGrid.vue     |  99 ++--
 .../Questions/QuestionLinearScale.vue         |  87 ++--
 src/components/Questions/QuestionLong.vue     |  27 +-
 src/components/Questions/QuestionMultiple.vue | 178 ++++---
 src/components/Questions/QuestionRanking.vue  |  88 ++--
 src/components/Questions/QuestionShort.vue    |  67 ++-
 src/components/TopBar.vue                     |  50 +-
 src/mixins/QuestionMixin.ts                   |   5 +-
 src/mixins/QuestionMultipleMixin.ts           |  22 +-
 src/mixins/ShareLinkMixin.ts                  |   9 +-
 src/mixins/UserSearchMixin.ts                 |  18 +-
 src/mixins/ViewsMixin.ts                      |  79 +--
 src/models/AnswerTypes.ts                     |   1 +
 src/models/Entities.d.ts                      |  56 ++
 src/models/FileTypes.ts                       |   2 +
 src/models/ValidationTypes.ts                 |   1 +
 src/types/markdown-it.d.ts                    |  28 +
 src/types/vue-router.d.ts                     |  13 +
 src/utils/SetWindowTitle.ts                   |  10 +
 src/views/Create.vue                          | 229 +++++---
 src/views/Results.vue                         | 488 +++++++++---------
 src/views/Submit.vue                          | 280 ++++++----
 34 files changed, 1798 insertions(+), 1028 deletions(-)
 create mode 100644 src/types/markdown-it.d.ts
 create mode 100644 src/types/vue-router.d.ts

diff --git a/package-lock.json b/package-lock.json
index 1df1df9e7..6ffb15d5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,11 +39,13 @@
         "@nextcloud/vite-config": "^2.5.2",
         "@playwright/test": "^1.61.1",
         "@types/node": "^26.1.1",
+        "@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.5",
-        "vite": "^7.3.6"
+        "vite": "^7.3.6",
+        "vue-tsc": "^3.3.7"
       },
       "engines": {
         "node": "^24.0.0",
@@ -3194,6 +3196,16 @@
         "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",
@@ -13106,6 +13118,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 9029c8d3d..04d1d2931 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"
@@ -59,11 +60,13 @@
     "@nextcloud/vite-config": "^2.5.2",
     "@playwright/test": "^1.61.1",
     "@types/node": "^26.1.1",
+    "@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.5",
-    "vite": "^7.3.6"
+    "vite": "^7.3.6",
+    "vue-tsc": "^3.3.7"
   },
   "engines": {
     "node": "^24.0.0",
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 232bea551..21dcfb774 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 { translate as 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,13 @@ import PermissionTypes from '../mixins/PermissionTypes.ts'
 import { FormState } from '../models/Constants.ts'
 import logger from '../utils/Logger.ts'
 
-export default {
+type NavigationTarget = 'submit' | 'formRoot'
+
+interface AppNavigationFormData {
+	loading: boolean
+}
+
+export default defineComponent({
 	name: 'AppNavigationForm',
 
 	components: {
@@ -138,7 +149,7 @@ export default {
 
 	props: {
 		form: {
-			type: Object,
+			type: Object as PropType<FormsForm>,
 			required: true,
 		},
 
@@ -158,6 +169,7 @@ export default {
 
 	setup() {
 		return {
+			t,
 			FormsIcon,
 			IconArchive,
 			IconArchiveOff,
@@ -170,65 +182,67 @@ export default {
 		}
 	},
 
-	data() {
+	data(): AppNavigationFormData {
 		return {
 			loading: false,
 		}
 	},
 
 	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 +252,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 +274,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 +296,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 +323,7 @@ export default {
 			}
 		},
 
-		async onToggleArchive() {
+		async onToggleArchive(): Promise<void> {
 			try {
 				// TODO: add loading status feedback ?
 				await axios.patch(
@@ -324,8 +338,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 +350,7 @@ export default {
 			}
 		},
 
-		async onDeleteForm() {
+		async onDeleteForm(): Promise<void> {
 			this.loading = true
 			try {
 				await axios.delete(
@@ -346,8 +360,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 +374,5 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
diff --git a/src/components/PaginationToolbar.vue b/src/components/PaginationToolbar.vue
index f84d0b848..741321fb2 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 { translate as 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..d22b8f7b3 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,14 @@ export default {
 		 * The active option
 		 */
 		active: {
-			type: Object,
+			type: Object as PropType<{
+				id: string | number
+				title?: string
+				ariaLabel?: string
+				icon?: string
+				disabled?: boolean
+			}>,
+
 			required: true,
 		},
 
@@ -70,7 +90,16 @@ export default {
 		 * `option: {id: string, title: string, ariaLabel: string, icon?: string}`
 		 */
 		options: {
-			type: Array,
+			type: Array as PropType<
+				Array<{
+					id: string | number
+					title: string
+					ariaLabel?: string
+					icon?: string
+					disabled?: boolean
+				}>
+			>,
+
 			required: true,
 		},
 	},
@@ -83,16 +112,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..115240383 100644
--- a/src/components/QRDialog.vue
+++ b/src/components/QRDialog.vue
@@ -23,12 +23,19 @@
 	</NcDialog>
 </template>
 
-<script>
+<script lang="ts">
+import { translate as 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 {
+interface QRDialogData {
+	uri: string
+	isOpen: boolean
+}
+
+export default defineComponent({
 	name: 'QRDialog',
 
 	components: {
@@ -49,24 +56,23 @@ export default {
 
 	emits: ['closed'],
 
-	data() {
+	setup() {
 		return {
-			uri: {
-				type: String,
-				default: '',
-			},
+			t,
+		}
+	},
 
-			isOpen: {
-				type: Boolean,
-				default: false,
-			},
+	data(): QRDialogData {
+		return {
+			uri: '',
+			isOpen: false,
 		}
 	},
 
 	watch: {
 		text: {
 			immediate: true,
-			handler() {
+			handler(): void {
 				this.generateQr()
 				this.isOpen = !!this.text
 			},
@@ -74,21 +80,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..561cfcb5f 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 { translate as 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,16 @@ import { INPUT_DEBOUNCE_MS, OptionType } from '../../models/Constants.ts'
 import logger from '../../utils/Logger.ts'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
-export default {
+type AnswerInputData = {
+	queue: PQueue | null
+	debounceOnInput: ((event: InputEvent) => void) | undefined
+	isIMEComposing: boolean
+	localText: string
+}
+
+type AnswerInputOption = FormsOption
+
+export default defineComponent({
 	name: 'AnswerInput',
 
 	components: {
@@ -177,28 +190,30 @@ export default {
 			IconDelete,
 			IconDragIndicator,
 			IconPlus,
+			t,
 		}
 	},
 
-	data() {
+	data(): AnswerInputData {
 		return {
 			queue: null,
-			debounceOnInput: null,
+			debounceOnInput: undefined,
 			isIMEComposing: false,
-			localText: this.answer?.text ?? '',
+			localText: (this.answer as AnswerInputOption | undefined)?.text ?? '',
 		}
 	},
 
 	computed: {
-		canCreateLocalAnswer() {
-			if (this.answer.local) {
+		canCreateLocalAnswer(): boolean {
+			if ((this.answer as AnswerInputOption).local) {
 				return !!this.localText?.trim()
 			}
-			return !!this.answer.text?.trim()
+			return !!(this.answer as AnswerInputOption).text?.trim()
 		},
 
-		ariaLabel() {
-			if (this.answer.local) {
+		ariaLabel(): string {
+			const answer = this.answer as AnswerInputOption
+			if (answer.local) {
 				if (this.optionType === OptionType.Column) {
 					return t('forms', 'Add a new column')
 				}
@@ -216,7 +231,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 +241,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 AnswerInputOption
+			return `q${answer.questionId}o${answer.id}o${this.optionType}__drag_menu`
 		},
 
-		placeholder() {
-			if (this.answer.local) {
+		placeholder(): string {
+			const answer = this.answer as AnswerInputOption
+			if (answer.local) {
 				if (this.optionType === OptionType.Column) {
 					return t('forms', 'Add a new column')
 				}
@@ -252,8 +271,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 AnswerInputOption
+			if (answer.local) {
 				return IconPlus
 			}
 
@@ -276,7 +296,7 @@ export default {
 	watch: {
 		// Keep localText in sync when the parent replaces/updates the answer prop
 		answer: {
-			handler(newVal) {
+			handler(newVal: AnswerInputOption) {
 				this.localText = newVal?.text ?? ''
 			},
 
@@ -284,59 +304,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 AnswerInputOption
+			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 AnswerInputOption).local) {
 				this.createLocalAnswer(e)
 				return
 			}
@@ -346,9 +384,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 +398,45 @@ export default {
 				return
 			}
 
-			const answer = { ...this.answer, text: value, local: false }
+			const answer = {
+				...(this.answer as AnswerInputOption),
+				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 +449,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 AnswerInputOption).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 +471,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 AnswerInputOption)
 				// 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: AnswerInputOption): Promise<AnswerInputOption> {
 			try {
 				const response = await axios.post(
 					generateOcsUrl(
@@ -448,7 +508,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 AnswerInputOption[])[0]
 			} catch (error) {
 				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
@@ -461,9 +521,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: AnswerInputOption): Promise<void> {
 			try {
 				await axios.patch(
 					generateOcsUrl(
@@ -490,7 +550,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 +559,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..620fab9fd 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 { translate as 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..f4419ff4b 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 { translate as 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,6 +71,7 @@ export default {
 	setup() {
 		return {
 			IconClose,
+			t,
 		}
 	},
 
@@ -79,19 +82,19 @@ export default {
 	},
 
 	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..0872b330e 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -108,8 +108,10 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
+import { translate as 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..7a99089ef 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 { translate as 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,6 +139,7 @@ export default {
 	setup() {
 		return {
 			IconContentPaste,
+			t,
 		}
 	},
 
@@ -148,47 +153,47 @@ export default {
 	},
 
 	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 | 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))),
 			)
 
 			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 +203,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 +225,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..eeaef5d57 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 { translate as 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'
@@ -193,7 +197,29 @@ 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
+}
+
+interface QuestionFileData {
+	fileTypes: typeof fileTypes
+	fileLoading: boolean
+	maxFileSizeUnit: FileSizeUnit
+	maxFileSizeValue: number
+	allowedFileTypesDialogOpened: boolean
+}
+
+export default defineComponent({
 	name: 'QuestionFile',
 	components: {
 		NcIconSvgWrapper,
@@ -218,44 +244,61 @@ export default {
 			IconFileDocumentAlert,
 			IconUpload,
 			IconUploadMultiple,
+			t,
 		}
 	},
 
-	data() {
+	data(): QuestionFileData {
 		return {
 			fileTypes,
 			fileLoading: false,
-			maxFileSizeUnit: Object.keys(FILE_SIZE_UNITS)[0],
-			maxFileSizeValue: '',
+			maxFileSizeUnit: Object.keys(FILE_SIZE_UNITS)[0] as FileSizeUnit,
+			maxFileSizeValue: 0,
 			allowedFileTypesDialogOpened: false,
 		}
 	},
 
 	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(): number {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			return extraSettings?.maxAllowedFilesCount ?? 1
 		},
 
-		maxAllowedFilesCount() {
-			return this.extraSettings?.maxAllowedFilesCount || 1
+		allowedFileExtensions(): string[] {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			return extraSettings?.allowedFileExtensions ?? []
 		},
 
-		allowedFileExtensions() {
-			return this.extraSettings?.allowedFileExtensions || []
+		allowedFileTypes(): string[] {
+			const extraSettings = this.extraSettings as
+				QuestionFileExtraSettings | undefined
+			return extraSettings?.allowedFileTypes ?? []
 		},
 
-		allowedFileTypesLabel() {
-			const allowedFileTypes = []
-			if (this.extraSettings?.allowedFileTypes?.length) {
+		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 +311,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 +359,7 @@ export default {
 							{
 								fileName: file.name,
 								maxFileSize: formatFileSize(
-									this.extraSettings.maxFileSize,
+									extraSettings.maxFileSize,
 								),
 							},
 						),
@@ -320,7 +373,10 @@ export default {
 				return
 			}
 
-			formData.append('shareHash', loadState('forms', 'shareHash', null))
+			formData.append(
+				'shareHash',
+				String(loadState('forms', 'shareHash', null) ?? ''),
+			)
 
 			const url = generateOcsUrl(
 				'apps/forms/api/v3/forms/{id}/submissions/files/{questionId}',
@@ -342,38 +398,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 +453,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 +469,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 +489,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 +506,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 +515,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..f4135f914 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -175,8 +175,11 @@
 	</Question>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormsOption } from '../../models/Entities.d.ts'
+
 import { translatePlural as n, translate as 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,27 @@ 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
+}
+
+interface QuestionGridData {
+	isDragging: boolean
+	isLoading: boolean
+	questionTypes: Array<{ label: string; id: GridQuestionType }>
+}
+
+export default defineComponent({
 	name: 'QuestionGrid',
 
 	components: {
@@ -202,7 +225,13 @@ export default {
 	mixins: [QuestionMixin, QuestionMultipleMixin],
 	emits: ['update:values'],
 
-	data() {
+	setup() {
+		return {
+			t,
+		}
+	},
+
+	data(): QuestionGridData {
 		return {
 			isDragging: false,
 			isLoading: false,
@@ -210,51 +239,55 @@ export default {
 				{ 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' },
 			],
 		}
 	},
 
 	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 +296,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 +318,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 +333,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..90ef35e90 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 { translate as 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,6 +152,7 @@ export default {
 	setup() {
 		return {
 			IconPencil,
+			t,
 		}
 	},
 
@@ -154,48 +163,52 @@ export default {
 	},
 
 	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..b712e301a 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 { translate as 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: {
@@ -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..f427a5876 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 { 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,23 @@ import {
 	QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 } from '../../models/Constants.ts'
 
-export default {
+type QuestionMultipleExtraSettings = {
+	allowOtherAnswer?: boolean
+	optionsLimitMax?: number
+	optionsLimitMin?: number
+	shuffleOptions?: boolean
+}
+
+interface QuestionMultipleData {
+	cachedOtherAnswerText: string
+	QUESTION_EXTRASETTINGS_OTHER_PREFIX: typeof QUESTION_EXTRASETTINGS_OTHER_PREFIX
+	isDragging: boolean
+	isOptionDialogShown: boolean
+	isLoading: boolean
+	OptionType: typeof OptionType
+}
+
+export default defineComponent({
 	name: 'QuestionMultiple',
 
 	components: {
@@ -233,10 +252,11 @@ export default {
 			IconCheckboxBlankOutline,
 			IconContentPaste,
 			IconRadioboxBlank,
+			t,
 		}
 	},
 
-	data() {
+	data(): QuestionMultipleData {
 		return {
 			/**
 			 * This is used to cache the "other" answer, meaning if the user:
@@ -254,62 +274,71 @@ export default {
 	},
 
 	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
 		},
 
-		allowOtherAnswer() {
-			return this.extraSettings?.allowOtherAnswer ?? false
+		multipleSettings(): QuestionMultipleExtraSettings {
+			return (
+				(this.extraSettings as QuestionMultipleExtraSettings | undefined)
+				?? {}
+			)
+		},
+
+		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
@@ -351,18 +380,19 @@ export default {
 
 	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 +400,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 +411,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 +426,11 @@ export default {
 			return true
 		},
 
-		onDragStart() {
+		onDragStart(): void {
 			this.isDragging = true
 		},
 
-		onDragEnd() {
+		onDragEnd(): void {
 			this.$nextTick(() => {
 				this.isDragging = false
 			})
@@ -409,7 +439,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 +449,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 +504,7 @@ export default {
 					return
 				}
 
-				if ((this.extraSettings.optionsLimitMin ?? 0) > max) {
+				if ((this.multipleSettings.optionsLimitMin ?? 0) > parsedMax) {
 					showError(
 						t(
 							'forms',
@@ -479,21 +514,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 +543,8 @@ export default {
 				}
 
 				if (
-					this.extraSettings.optionsLimitMax
-					&& min > this.extraSettings.optionsLimitMax
+					this.multipleSettings.optionsLimitMax
+					&& parsedMin > this.multipleSettings.optionsLimitMax
 				) {
 					showError(
 						t(
@@ -518,8 +554,8 @@ export default {
 					)
 					return
 				}
-				this.onExtraSettingsChange({ optionsLimitMin: min })
-				if (min > 0) {
+				this.onExtraSettingsChange({ optionsLimitMin: parsedMin })
+				if (parsedMin > 0) {
 					this.$emit('update:isRequired', true)
 				}
 			}
@@ -532,9 +568,9 @@ export default {
 		 * So we require the one that are checked or all
 		 * if none are checked yet.
 		 *
-		 * @return {boolean}
+		 * @return
 		 */
-		checkRequired() {
+		checkRequired(): boolean {
 			// false, if question not required
 			if (!this.isRequired) {
 				return false
@@ -552,16 +588,16 @@ export default {
 		/**
 		 * 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 +607,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 +628,7 @@ export default {
 			)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index 9a7fe5ed5..57da78bc7 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 { 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,20 @@ import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { OptionType } from '../../models/Constants.ts'
 
-export default {
+type RankingOption = FormsOption
+
+interface QuestionRankingData {
+	errorMessage: string | null
+	isDragging: boolean
+	isRanking: boolean
+	isLoading: boolean
+	isOptionDialogShown: boolean
+	rankedOptions: RankingOption[]
+	unrankedOptions: RankingOption[]
+	OptionType: typeof OptionType
+}
+
+export default defineComponent({
 	name: 'QuestionRanking',
 
 	components: {
@@ -240,33 +256,34 @@ export default {
 			IconClose,
 			IconContentPaste,
 			IconDragIndicator,
+			t,
 		}
 	},
 
-	data() {
+	data(): QuestionRankingData {
 		return {
 			errorMessage: null,
 			isDragging: false,
 			isRanking: false,
 			isLoading: false,
 			isOptionDialogShown: false,
-			rankedOptions: [],
-			unrankedOptions: [],
+			rankedOptions: [] as RankingOption[],
+			unrankedOptions: [] as RankingOption[],
 			OptionType,
 		}
 	},
 
 	computed: {
-		shiftDragHandle() {
+		shiftDragHandle(): boolean {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
 		choices: {
-			get() {
+			get(): RankingOption[] {
 				return this.sortOptionsOfType(this.options, OptionType.Choice)
 			},
 
-			set(value) {
+			set(value: RankingOption[]): void {
 				this.updateOptionsOrder(value, OptionType.Choice)
 			},
 		},
@@ -289,7 +306,7 @@ export default {
 	},
 
 	methods: {
-		async validate() {
+		async validate(): Promise<boolean> {
 			const optionsCount = this.sortOptionsOfType(
 				this.options,
 				OptionType.Choice,
@@ -308,11 +325,11 @@ export default {
 			return true
 		},
 
-		onDragStart() {
+		onDragStart(): void {
 			this.isDragging = true
 		},
 
-		onDragEnd() {
+		onDragEnd(): void {
 			this.$nextTick(() => {
 				this.isDragging = false
 			})
@@ -321,15 +338,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, RankingOption>
 				this.rankedOptions = this.values
-					.map((id) => byId[parseInt(id)])
-					.filter(Boolean)
+					.map((id) => byId[parseInt(String(id), 10)])
+					.filter((option): option is RankingOption => Boolean(option))
 				this.unrankedOptions = sorted.filter(
 					(o) => !this.rankedOptions.some((r) => r.id === o.id),
 				)
@@ -347,9 +366,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: RankingOption): void {
 			this.unrankedOptions = this.unrankedOptions.filter(
 				(o) => o.id !== option.id,
 			)
@@ -360,9 +379,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: RankingOption): void {
 			this.rankedOptions = this.rankedOptions.filter((o) => o.id !== option.id)
 			this.unrankedOptions.push(option)
 			this.emitValues()
@@ -371,11 +390,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 RankingOption[]
 			;[items[index - 1], items[index]] = [items[index], items[index - 1]]
 			this.rankedOptions = items
 			this.emitValues()
@@ -389,11 +408,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 RankingOption[]
 			;[items[index], items[index + 1]] = [items[index + 1], items[index]]
 			this.rankedOptions = items
 			this.emitValues()
@@ -409,26 +428,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 +458,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 +470,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index add5b0b57..31d91de26 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 { translate as 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,6 +110,7 @@ export default {
 	setup() {
 		return {
 			IconRegex,
+			t,
 		}
 	},
 
@@ -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/TopBar.vue b/src/components/TopBar.vue
index c3aae7f25..9b2039a7e 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,12 +125,13 @@ export default {
 	},
 
 	computed: {
-		currentView() {
-			return this.availableViews.filter((v) => v.id === this.$route.name)[0]
+		currentView(): TopBarViewOption | undefined {
+			const routeName = String(this.$route.name ?? '')
+			return this.availableViews.find((v) => v.id === routeName)
 		},
 
-		availableViews() {
-			const views = []
+		availableViews(): TopBarViewOption[] {
+			const views: TopBarViewOption[] = []
 			if (this.canSubmit) {
 				views.push(submitView)
 			}
@@ -135,30 +147,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)
@@ -171,9 +183,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
 			}
@@ -190,11 +202,11 @@ export default {
 			}
 		},
 
-		onShareForm() {
+		onShareForm(): void {
 			this.$emit('shareForm')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/mixins/QuestionMixin.ts b/src/mixins/QuestionMixin.ts
index 0eee3f528..dfe5ba479 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 { translate as 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..110c9fa14 100644
--- a/src/mixins/QuestionMultipleMixin.ts
+++ b/src/mixins/QuestionMultipleMixin.ts
@@ -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..c4e5988f2 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 { translate as 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..3ef498c70 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 { translate as 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..3e69e9449 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 { translate as 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..f71c433c2 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 { translate as 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..daa496232 100644
--- a/src/models/FileTypes.ts
+++ b/src/models/FileTypes.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { translate as t } from '@nextcloud/l10n'
+
 export interface FileTypeConfig {
 	label: string
 }
diff --git a/src/models/ValidationTypes.ts b/src/models/ValidationTypes.ts
index 69c4c440c..b92df2964 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 { translate as t } from '@nextcloud/l10n'
 
 export type ValidationFunction = (
 	input: string,
diff --git a/src/types/markdown-it.d.ts b/src/types/markdown-it.d.ts
new file mode 100644
index 000000000..c5734e5cb
--- /dev/null
+++ b/src/types/markdown-it.d.ts
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Options } from 'markdown-it'
+import type Renderer from 'markdown-it/lib/renderer'
+import type Token from 'markdown-it/lib/token'
+
+declare module 'markdown-it' {
+	class MarkdownIt {
+		constructor(options?: { breaks?: boolean })
+		render(input: string): string
+		renderer: {
+			rules: {
+				link_open?: (
+					tokens: Token[],
+					idx: number,
+					options: Options,
+					env: unknown,
+					self: Renderer,
+				) => string
+			}
+		}
+	}
+
+	export default MarkdownIt
+}
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..3e293bb8c 100644
--- a/src/utils/SetWindowTitle.ts
+++ b/src/utils/SetWindowTitle.ts
@@ -5,6 +5,16 @@
 
 import { t } from '@nextcloud/l10n'
 
+declare global {
+	interface Window {
+		OC: {
+			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..26e5bd65c 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 { translate as 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,25 @@ import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
-window.axios = axios
+interface QuestionRefInstance extends ComponentPublicInstance {
+	focus?: () => void
+}
+
+interface CreateViewData {
+	answerTypes: typeof answerTypes
+	isLoadingQuestions: boolean
+	isDragging: boolean
+	maxStringLengths: Record<string, number>
+	questionMenuOpened: boolean
+	activeQuestionType: string | null
+	questionRefsMap: Record<number, QuestionRefInstance>
+	insertMenuOpenedIndex: number | null
+	insertMenuOpened: boolean
+}
+
+;(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,10 +289,11 @@ export default {
 		return {
 			IconLock,
 			isMobile: useIsMobile(),
+			t,
 		}
 	},
 
-	data() {
+	data(): CreateViewData {
 		return {
 			answerTypes,
 
@@ -285,7 +301,11 @@ export default {
 			isLoadingQuestions: false,
 			isDragging: false,
 
-			maxStringLengths: loadState('forms', 'maxStringLengths'),
+			maxStringLengths: loadState('forms', 'maxStringLengths') as Record<
+				string,
+				number
+			>,
+
 			questionMenuOpened: false,
 			activeQuestionType: null,
 			questionRefsMap: {},
@@ -298,13 +318,14 @@ export default {
 	},
 
 	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 +333,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 +364,7 @@ export default {
 			return message
 		},
 
-		expirationMessage() {
+		expirationMessage(): string {
 			const relativeDate = moment(this.form.expires, 'X')
 				.locale(window.OC.getLanguage())
 				.fromNow()
@@ -354,19 +375,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 +407,7 @@ export default {
 		},
 
 		// resize description if form is loaded
-		isLoadingForm(value) {
+		isLoadingForm(value: boolean): void {
 			if (!value) {
 				this.resizeTitle()
 				this.resizeDescription()
@@ -397,17 +421,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 +442,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 +487,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 +502,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 +514,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 +527,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 +542,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 +588,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 +605,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 +621,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 +637,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 +662,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 +677,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 +692,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 +720,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 +744,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 256adfae0..442b6e0a5 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 { translate as 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,14 +316,73 @@ 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'
+}
+
+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>
+}
+
+interface ResultsViewData {
+	activeResponseView: ResponseView
+	questions: FormsQuestion[]
+	submissions: SubmissionRecord[]
+	filteredSubmissionsCount: number
+	isDownloadActionOpened: boolean
+	loadingResults: boolean
+	skipReloadOnOffsetChange: boolean
+	picker: PickerLike | null
+	showConfirmDeleteDialog: boolean
+	submissionSearch: string
+	limit: number
+	offset: number
+	linkedFileNotAvailableButtons: DialogButton[]
+	confirmDeleteButtons: DialogButton[]
+}
+
+const SUPPORTED_FILE_FORMATS: Record<SupportedFileFormat, string> = {
 	ods: IconTable,
 	csv: IconFileDelimited,
 	xlsx: IconFileExcelOutline,
 }
-let fileFormat = 'csv'
 
-const responseViews = [
+let fileFormat: SupportedFileFormat = 'csv'
+
+const responseViews: ResponseView[] = [
 	{
 		title: t('forms', 'Summary'),
 		id: 'summary',
@@ -328,9 +392,10 @@ const responseViews = [
 		id: 'responses',
 	},
 ]
+
 const responseViewIds = new Set(responseViews.map((view) => view.id))
 
-export default {
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Results',
 
@@ -358,10 +423,8 @@ export default {
 	setup() {
 		return {
 			isMobile: useIsSmallMobile(),
-
-			// non reactive props
+			t,
 			responseViews,
-
 			IconChevronLeft,
 			IconDelete,
 			IconDownload,
@@ -378,25 +441,21 @@ export default {
 		}
 	},
 
-	data() {
+	data(): ResultsViewData {
 		return {
 			activeResponseView: null,
 
 			questions: [],
 			submissions: [],
 			filteredSubmissionsCount: 0,
-
 			isDownloadActionOpened: false,
 			loadingResults: true,
 			skipReloadOnOffsetChange: false,
-
 			picker: null,
 			showConfirmDeleteDialog: false,
-
 			submissionSearch: '',
 			limit: 20,
 			offset: 0,
-
 			linkedFileNotAvailableButtons: [
 				{
 					label: t('forms', 'Unlink spreadsheet'),
@@ -422,7 +481,7 @@ export default {
 					icon: IconCancel,
 					variant: 'tertiary',
 					callback: () => {
-						this.showConfirmDeleteDialog = false
+						this.closeDeleteConfirmation()
 					},
 				},
 				{
@@ -438,17 +497,17 @@ export default {
 	},
 
 	computed: {
-		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,
@@ -456,39 +515,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
 			)
@@ -496,31 +551,34 @@ export default {
 	},
 
 	watch: {
-		// Reload results when form changes
-		async hash() {
+		async hash(): Promise<void> {
 			await this.fetchFullForm(this.form.id)
 			await this.syncActiveResponseViewFromRoute()
 			SetWindowTitle(this.formTitle)
 		},
 
 		'$route.query': {
-			handler() {
+			handler(): void {
 				this.syncActiveResponseViewFromRoute()
 			},
 		},
 
-		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(() => {
@@ -529,48 +587,31 @@ export default {
 			this.loadFormResults()
 		}, INPUT_DEBOUNCE_MS),
 
-		// Persist active response view to localStorage when it changes
-		activeResponseView(newView) {
+		activeResponseView(newView: ResponseView): void {
 			if (newView?.id) {
 				this.saveActiveResponseViewToLocalStorage(newView.id)
 			}
 		},
 	},
 
-	async beforeMount() {
+	async beforeMount(): Promise<void> {
 		await this.fetchFullForm(this.form.id)
 		await this.syncActiveResponseViewFromRoute()
 		SetWindowTitle(this.formTitle)
 	},
 
 	methods: {
-		/**
-		 * Resolve a response view object by its ID.
-		 *
-		 * @param {string} viewId The requested response view ID
-		 * @return {object}
-		 */
-		getResponseViewById(viewId) {
+		getResponseViewById(viewId: string): ResponseView {
 			return (
 				responseViews.find((view) => view.id === viewId) ?? responseViews[0]
 			)
 		},
 
-		/**
-		 * Read the explicit response view from the current route query.
-		 *
-		 * @return {string|null}
-		 */
-		getRouteResponseViewId() {
+		getRouteResponseViewId(): ResponseView['id'] | null {
 			return this.$route.query.view ?? null
 		},
 
-		/**
-		 * Load the stored response view preference from localStorage for the current form.
-		 *
-		 * @return {string}
-		 */
-		loadStoredActiveResponseViewId() {
+		loadStoredActiveResponseViewId(): ResponseView['id'] {
 			try {
 				const storageKey = this.getActiveResponseViewStorageKey()
 				if (!storageKey) {
@@ -578,8 +619,11 @@ export default {
 				}
 
 				const storedViewId = localStorage.getItem(storageKey)
-				if (storedViewId && responseViewIds.has(storedViewId)) {
-					return storedViewId
+				if (
+					storedViewId
+					&& responseViewIds.has(storedViewId as ResponseView['id'])
+				) {
+					return storedViewId as ResponseView['id']
 				}
 
 				return responseViews[0].id
@@ -591,22 +635,14 @@ export default {
 			}
 		},
 
-		/**
-		 * Resolve the effective response view using route state first and localStorage second.
-		 *
-		 * @return {string}
-		 */
-		resolveActiveResponseViewId() {
+		resolveActiveResponseViewId(): ResponseView['id'] {
 			return (
 				this.getRouteResponseViewId()
 				?? this.loadStoredActiveResponseViewId()
 			)
 		},
 
-		/**
-		 * Apply the effective route/localStorage view and refresh results when needed.
-		 */
-		async syncActiveResponseViewFromRoute() {
+		async syncActiveResponseViewFromRoute(): Promise<void> {
 			const routeViewId = this.getRouteResponseViewId()
 			const nextView = this.getResponseViewById(
 				routeViewId ?? this.loadStoredActiveResponseViewId(),
@@ -638,12 +674,7 @@ export default {
 			this.loadFormResults()
 		},
 
-		/**
-		 * Save the active response view preference to localStorage for the current form.
-		 *
-		 * @param {string} viewId - The ID of the view ('summary' or 'responses')
-		 */
-		saveActiveResponseViewToLocalStorage(viewId) {
+		saveActiveResponseViewToLocalStorage(viewId: ResponseView['id']): void {
 			try {
 				const storageKey = this.getActiveResponseViewStorageKey()
 				if (!storageKey) {
@@ -658,13 +689,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
 			}
@@ -672,15 +698,7 @@ export default {
 			return `nextcloud_forms_${formHash}_activeResponseView`
 		},
 
-		/**
-		 * Navigate to an explicit route query for the selected response view.
-		 *
-		 * @param {object} view The selected response view object
-		 */
-		async onChangeResponseView(view) {
-			if (!view?.id) {
-				return
-			}
+		async onChangeResponseView(view: ResponseView): Promise<void> {
 			if (this.getRouteResponseViewId() === view.id) {
 				this.loadFormResults()
 				return
@@ -701,7 +719,7 @@ export default {
 			}
 		},
 
-		async onUnlinkFile() {
+		async onUnlinkFile(): Promise<void> {
 			await axios.patch(
 				generateOcsUrl('apps/forms/api/v3/forms/{formId}', {
 					formId: this.form.id,
@@ -724,34 +742,35 @@ 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}`)
 
 			try {
-				let response = null
-				if (this.activeResponseView.id === 'summary') {
-					response = await axios.get(
-						generateOcsUrl('apps/forms/api/v3/forms/{id}/submissions', {
-							id: this.form.id,
-						}),
-					)
-				} else {
-					response = await axios.get(
-						generateOcsUrl(
-							'apps/forms/api/v3/forms/{id}/submissions?limit={limit}&offset={offset}&query={query}',
-							{
-								id: this.form.id,
-								limit: this.limit,
-								offset: this.offset,
-								query: this.submissionSearch,
-							},
-						),
-					)
-				}
-				const data = OcsResponse2Data(response)
+				const response =
+					this.activeResponseView.id === 'summary'
+						? await axios.get(
+								generateOcsUrl(
+									'apps/forms/api/v3/forms/{id}/submissions',
+									{
+										id: this.form.id,
+									},
+								),
+							)
+						: await axios.get(
+								generateOcsUrl(
+									'apps/forms/api/v3/forms/{id}/submissions?limit={limit}&offset={offset}&query={query}',
+									{
+										id: this.form.id,
+										limit: this.limit,
+										offset: this.offset,
+										query: this.submissionSearch,
+									},
+								),
+							)
+
+				const data = OcsResponse2Data<ResultsResponse>(response)
 
-				// Append questions & submissions
 				this.submissions = this.formatDateAnswers(
 					data.submissions,
 					data.questions,
@@ -766,111 +785,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(
@@ -884,9 +887,10 @@ export default {
 						fileFormat: this.form.fileFormat,
 					},
 				)
+
 				showSuccess(
 					t('forms', 'Export successful to {file}', {
-						file: OcsResponse2Data(response),
+						file: OcsResponse2Data<string>(response),
 					}),
 				)
 			} catch (error) {
@@ -895,41 +899,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 {
@@ -942,9 +939,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)
@@ -958,19 +956,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)
@@ -982,34 +986,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)
 						}
 					})
 			})
@@ -1017,7 +1018,7 @@ export default {
 			return submissions
 		},
 
-		getPicker() {
+		getPicker(): PickerLike {
 			if (this.picker !== null) {
 				return this.picker
 			}
@@ -1027,33 +1028,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'),
@@ -1081,12 +1091,12 @@ export default {
 						},
 					]
 				})
-				.build()
+				.build() as PickerLike
 
 			return this.picker
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index c07177e64..b6dca6d12 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,10 @@
 	</NcAppContent>
 </template>
 
-<script>
+<script lang="ts">
+import type { NavigationGuardNext } from 'vue-router'
+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 +230,10 @@ import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
+import { translate as 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 +257,76 @@ import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
-export default {
+type AnswerValue = unknown[]
+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
+}
+
+interface SubmitViewData {
+	answerTypes: typeof answerTypes
+	answers: AnswersMap
+	loading: boolean
+	success: boolean
+	successAnnouncement: string
+	submitForm: boolean
+	showConfirmEmptyModal: boolean
+	showConfirmLeaveDialog: boolean
+	showClearFormDialog: boolean
+	showClearFormDueToChangeDialog: boolean
+	confirmButtonCallback: (value: boolean) => void
+}
+
+export default defineComponent({
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Submit',
 
@@ -275,7 +351,11 @@ export default {
 	 * This is used to confirm that the user wants to leave the page
 	 * if the form is unsubmitted.
 	 */
-	async beforeRouteUpdate(to, from, next) {
+	async beforeRouteUpdate(
+		_to: unknown,
+		_from: unknown,
+		next: NavigationGuardNext,
+	): Promise<void> {
 		// This navigation guard is called when the route parameters changed (e.g. form hash)
 		// continue with the navigation if there are no changes or the user confirms to leave the form
 		if (await this.confirmLeaveForm()) {
@@ -286,7 +366,11 @@ export default {
 		}
 	},
 
-	async beforeRouteLeave(to, from, next) {
+	async beforeRouteLeave(
+		_to: unknown,
+		_from: unknown,
+		next: NavigationGuardNext,
+	): Promise<void> {
 		// This navigation guard is called when the route changed and a new view should be shown
 		// continue with the navigation if there are no changes or the user confirms to leave the form
 		if (await this.confirmLeaveForm()) {
@@ -316,34 +400,33 @@ export default {
 			IconCheckSvg: IconCheck,
 			IconRefreshSvg: IconRefresh,
 			IconSendSvg: IconSend,
+			t,
 
-			maxStringLengths: loadState('forms', 'maxStringLengths'),
+			maxStringLengths: loadState('forms', 'maxStringLengths') as Record<
+				string,
+				number
+			>,
 		}
 	},
 
-	data() {
+	data(): SubmitViewData {
 		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,
+			confirmButtonCallback: () => {},
 		}
 	},
 
 	computed: {
-		validQuestions() {
+		validQuestions(): SubmitQuestion[] {
 			return this.form.questions.filter((question) => {
 				// All questions must have a valid title
 				if (question.text?.trim() === '') {
@@ -351,53 +434,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 +500,7 @@ export default {
 		/**
 		 * Rendered HTML of the custom submission message
 		 */
-		submissionMessageHTML() {
+		submissionMessageHTML(): string {
 			if (
 				this.form.submissionMessage
 				&& (this.success || !this.form.canSubmit)
@@ -427,7 +510,7 @@ export default {
 			return ''
 		},
 
-		expirationMessage() {
+		expirationMessage(): string {
 			const relativeDate = moment(this.form.expires, 'X')
 				.locale(window.OC.getLanguage())
 				.fromNow()
@@ -440,7 +523,7 @@ export default {
 		/**
 		 * Buttons for the "confirm submit empty form" dialog
 		 */
-		confirmEmptyModalButtons() {
+		confirmEmptyModalButtons(): DialogButton[] {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -459,7 +542,7 @@ export default {
 		/**
 		 * Buttons for the "confirm leave unsubmitted form" dialog
 		 */
-		confirmLeaveFormButtons() {
+		confirmLeaveFormButtons(): DialogButton[] {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -478,7 +561,7 @@ export default {
 		/**
 		 * Buttons for the "confirm clear form" dialog
 		 */
-		confirmClearFormButtons() {
+		confirmClearFormButtons(): DialogButton[] {
 			return [
 				{
 					label: t('forms', 'Abort'),
@@ -494,20 +577,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('forms', '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 +606,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 +620,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 +657,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 +672,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 +689,7 @@ export default {
 					continue
 				}
 
-				answers[questionId] = [
+				answers[parseInt(questionId, 10)] = [
 					'QuestionMultiple',
 					'QuestionRanking',
 				].includes(answer.type)
@@ -619,9 +702,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 +723,7 @@ export default {
 			)
 		},
 
-		deleteFormFieldFromLocalStorage() {
+		deleteFormFieldFromLocalStorage(): void {
 			if (!this.isLoggedIn) {
 				return
 			}
@@ -649,7 +732,7 @@ export default {
 			)
 		},
 
-		async fetchSubmission() {
+		async fetchSubmission(): Promise<void> {
 			logger.debug(`Loading response ${this.submissionId}`)
 
 			try {
@@ -663,10 +746,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 +760,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 +770,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 +788,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 +835,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 +902,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 +913,7 @@ export default {
 			) {
 				this.showConfirmLeaveDialog = true
 				return new Promise((resolve) => {
-					this.confirmButtonCallback = (val) => {
+					this.confirmButtonCallback = (val: boolean) => {
 						this.showConfirmLeaveDialog = false
 						resolve(val)
 					}
@@ -831,8 +926,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 +964,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 +998,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 +1027,7 @@ export default {
 			}
 		},
 
-		onResetSubmission() {
+		onResetSubmission(): void {
 			this.deleteFormFieldFromLocalStorage()
 			this.resetData()
 		},
@@ -929,7 +1035,7 @@ export default {
 		/**
 		 * Reset View-Data
 		 */
-		resetData() {
+		resetData(): void {
 			this.answers = {}
 			this.loading = false
 			this.showConfirmLeaveDialog = false
@@ -939,7 +1045,7 @@ export default {
 			this.submitForm = false
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>