diff --git a/eslint.config.js b/eslint.config.js
index ce4e62946..cb77d8931 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -10,6 +10,7 @@ export default [
 	...recommended,
 	eslintPluginPrettierRecommended,
 	{
+		files: ['**/*.ts', '**/*.tsx'],
 		rules: {
 			'@stylistic/exp-list-style': 'off',
 		},
diff --git a/package-lock.json b/package-lock.json
index afba031ff..c71f4e456 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "@nextcloud/stylelint-config": "^3.2.2",
         "@nextcloud/vite-config": "^2.5.2",
         "@playwright/test": "^1.61.1",
+        "@types/node": "^25.6.1",
         "@vue/tsconfig": "^0.9.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-prettier": "^5.5.6",
diff --git a/package.json b/package.json
index e05640181..e44060ce1 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "dev:watch": "NODE_OPTIONS='--max-old-space-size=4096' npx vite --mode development build --watch",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
-    "lint": "eslint --ext .js,.vue src",
-    "lint:fix": "eslint --ext .js,.vue src --fix",
+    "lint": "eslint --ext .js,.ts,.vue src",
+    "lint:fix": "eslint --ext .js,.ts,.vue src --fix",
     "start:nextcloud": "node playwright/start-nextcloud-server.mjs",
     "stylelint": "stylelint css/*.css css/*.scss src/**/*.vue",
     "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.vue --fix"
@@ -57,6 +57,7 @@
     "@nextcloud/stylelint-config": "^3.2.2",
     "@nextcloud/vite-config": "^2.5.2",
     "@playwright/test": "^1.61.1",
+    "@types/node": "^25.6.1",
     "@vue/tsconfig": "^0.9.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
diff --git a/src/Forms.vue b/src/Forms.vue
index 457d44b1a..6204de239 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -170,10 +170,10 @@ import AppNavigationForm from './components/AppNavigationForm.vue'
 import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import Sidebar from './views/Sidebar.vue'
 import FormsIcon from '../img/forms-dark.svg?raw'
-import PermissionTypes from './mixins/PermissionTypes.js'
+import PermissionTypes from './mixins/PermissionTypes.ts'
 import { FormState } from './models/Constants.ts'
-import logger from './utils/Logger.js'
-import OcsResponse2Data from './utils/OcsResponse2Data.js'
+import logger from './utils/Logger.ts'
+import OcsResponse2Data from './utils/OcsResponse2Data.ts'
 
 const appName = 'forms'
 
diff --git a/src/FormsSettings.vue b/src/FormsSettings.vue
index 84a9df06b..78d09ad60 100644
--- a/src/FormsSettings.vue
+++ b/src/FormsSettings.vue
@@ -121,7 +121,7 @@ import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-import logger from './utils/Logger.js'
+import logger from './utils/Logger.ts'
 
 export default {
 	name: 'FormsSettings',
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 909830779..4a1e574cc 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -118,9 +118,9 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import FormsIcon from '../../img/forms-dark.svg?raw'
-import PermissionTypes from '../mixins/PermissionTypes.js'
+import PermissionTypes from '../mixins/PermissionTypes.ts'
 import { FormState } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 export default {
 	name: 'AppNavigationForm',
diff --git a/src/components/PaginationToolbar.vue b/src/components/PaginationToolbar.vue
index 30409360b..f84d0b848 100644
--- a/src/components/PaginationToolbar.vue
+++ b/src/components/PaginationToolbar.vue
@@ -146,7 +146,7 @@ export default {
 }
 
 .selected-page {
-	padding-left: 5px;
+	padding-inline-start: 5px;
 
 	display: inline-flex;
 	align-items: center;
diff --git a/src/components/QRDialog.vue b/src/components/QRDialog.vue
index a5325f899..66e691d92 100644
--- a/src/components/QRDialog.vue
+++ b/src/components/QRDialog.vue
@@ -26,7 +26,7 @@
 <script>
 import QRCode from 'qrcode'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 export default {
 	name: 'QRDialog',
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 811ff90ac..177fab481 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -100,8 +100,8 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../../models/Constants.ts'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 export default {
 	name: 'AnswerInput',
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index 89f45b7bc..940434077 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -51,7 +51,7 @@ 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.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionColor',
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index 087cf0b02..f5c60a3e1 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -119,7 +119,7 @@ import svgClockLoader20 from '../../../img/clock_loader_20.svg?raw'
 import svgClockLoader80 from '../../../img/clock_loader_80.svg?raw'
 import svgEventIcon from '../../../img/event.svg?raw'
 import svgTodayIcon from '../../../img/today.svg?raw'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionDate',
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 4e3ea9a4e..3a1edb94b 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -110,7 +110,7 @@ import NcSelect from '@nextcloud/vue/components/NcSelect'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { OptionType } from '../../models/Constants.ts'
 
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index e6dda6b06..29d5212d5 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -172,10 +172,10 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
-import fileTypes from '../../models/FileTypes.js'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import fileTypes from '../../models/FileTypes.ts'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 /**
  * A constant object representing file size units in bytes.
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index 9fbf7047d..eb9e1ca07 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -183,7 +183,7 @@ import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index ac7195ff6..2c2b9ed82 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -125,7 +125,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwit
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionLinearScale',
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 110c40861..3fb4547fc 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -39,7 +39,7 @@
 
 <script>
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionLong',
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index dc8cac37b..6245c2223 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -201,7 +201,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import {
 	OptionType,
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index 0287b96b3..9a7fe5ed5 100644
--- a/src/components/Questions/QuestionRanking.vue
+++ b/src/components/Questions/QuestionRanking.vue
@@ -210,7 +210,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { OptionType } from '../../models/Constants.ts'
 
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index d0a6e78ac..add5b0b57 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -86,10 +86,10 @@ import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
-import validationTypes from '../../models/ValidationTypes.js'
-import { splitRegex, validateExpression } from '../../utils/RegularExpression.js'
+import validationTypes from '../../models/ValidationTypes.ts'
+import { splitRegex, validateExpression } from '../../utils/RegularExpression.ts'
 
 export default {
 	name: 'QuestionShort',
diff --git a/src/components/Results/ResultsSummary.vue b/src/components/Results/ResultsSummary.vue
index e91340ee1..229e4365c 100644
--- a/src/components/Results/ResultsSummary.vue
+++ b/src/components/Results/ResultsSummary.vue
@@ -159,7 +159,7 @@
 import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
 import { generateUrl } from '@nextcloud/router'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import answerTypes from '../../models/AnswerTypes.js'
+import answerTypes from '../../models/AnswerTypes.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
 export default {
diff --git a/src/components/SidebarTabs/SettingsSidebarTab.vue b/src/components/SidebarTabs/SettingsSidebarTab.vue
index df5dc5dde..c6b0f7c15 100644
--- a/src/components/SidebarTabs/SettingsSidebarTab.vue
+++ b/src/components/SidebarTabs/SettingsSidebarTab.vue
@@ -288,7 +288,7 @@ import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import TransferOwnership from './TransferOwnership.vue'
 import svgLockOpen from '../../../img/lock_open.svg?raw'
-import ShareTypes from '../../mixins/ShareTypes.js'
+import ShareTypes from '../../mixins/ShareTypes.ts'
 import { FormState } from '../../models/Constants.ts'
 
 export default {
diff --git a/src/components/SidebarTabs/SharingSearchDiv.vue b/src/components/SidebarTabs/SharingSearchDiv.vue
index 9c1fc5592..31b13b82c 100644
--- a/src/components/SidebarTabs/SharingSearchDiv.vue
+++ b/src/components/SidebarTabs/SharingSearchDiv.vue
@@ -23,7 +23,7 @@
 
 <script>
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
-import UserSearchMixin from '../../mixins/UserSearchMixin.js'
+import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
 
 export default {
 	components: {
diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
index 9856e29d0..fcf81539d 100644
--- a/src/components/SidebarTabs/SharingShareDiv.vue
+++ b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -54,8 +54,8 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import PermissionTypes from '../../mixins/PermissionTypes.js'
-import ShareTypes from '../../mixins/ShareTypes.js'
+import PermissionTypes from '../../mixins/PermissionTypes.ts'
+import ShareTypes from '../../mixins/ShareTypes.ts'
 
 export default {
 	components: {
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
index cbff15ff1..027a1c3e1 100644
--- a/src/components/SidebarTabs/SharingSidebarTab.vue
+++ b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -263,12 +263,12 @@ import QRDialog from '../QRDialog.vue'
 import SharingSearchDiv from './SharingSearchDiv.vue'
 import SharingShareDiv from './SharingShareDiv.vue'
 import FormsIcon from '../../../img/forms-dark.svg?raw'
-import PermissionTypes from '../../mixins/PermissionTypes.js'
-import ShareLinkMixin from '../../mixins/ShareLinkMixin.js'
-import ShareTypes from '../../mixins/ShareTypes.js'
+import PermissionTypes from '../../mixins/PermissionTypes.ts'
+import ShareLinkMixin from '../../mixins/ShareLinkMixin.ts'
+import ShareTypes from '../../mixins/ShareTypes.ts'
 import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 export default {
 	components: {
diff --git a/src/components/SidebarTabs/TransferOwnership.vue b/src/components/SidebarTabs/TransferOwnership.vue
index 8a6340eae..e9424c7f9 100644
--- a/src/components/SidebarTabs/TransferOwnership.vue
+++ b/src/components/SidebarTabs/TransferOwnership.vue
@@ -100,8 +100,8 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import UserSearchMixin from '../../mixins/UserSearchMixin.js'
-import logger from '../../utils/Logger.js'
+import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
+import logger from '../../utils/Logger.ts'
 
 export default {
 	components: {
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 030cf5e92..c3aae7f25 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -41,8 +41,8 @@ import { useIsMobile } from '@nextcloud/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.js'
-import logger from '../utils/Logger.js'
+import PermissionTypes from '../mixins/PermissionTypes.ts'
+import logger from '../utils/Logger.ts'
 
 const submitView = {
 	ariaLabel: t('forms', 'View form'),
diff --git a/src/emptyContent.js b/src/emptyContent.ts
similarity index 95%
rename from src/emptyContent.js
rename to src/emptyContent.ts
index 73558934b..b6a7763cb 100644
--- a/src/emptyContent.js
+++ b/src/emptyContent.ts
@@ -12,3 +12,5 @@ const app = createApp(FormsEmptyContent)
 app.config.globalProperties.t = translate
 app.config.globalProperties.n = translatePlural
 app.mount('#content')
+
+export default app
diff --git a/src/main.js b/src/main.ts
similarity index 93%
rename from src/main.js
rename to src/main.ts
index a01a680d9..0da0e0705 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -6,7 +6,7 @@
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { createApp } from 'vue'
 import Forms from './Forms.vue'
-import router from './router.js'
+import router from './router.ts'
 
 import 'vite/modulepreload-polyfill'
 import '@nextcloud/dialogs/style.css'
diff --git a/src/mixins/PermissionTypes.js b/src/mixins/PermissionTypes.js
deleted file mode 100644
index 1cf228b00..000000000
--- a/src/mixins/PermissionTypes.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-export default {
-	data() {
-		return {
-			/**
-			 * !!! Keep in Sync with lib/Constants.php !!
-			 */
-			PERMISSION_TYPES: {
-				PERMISSION_EDIT: 'edit',
-				PERMISSION_RESULTS: 'results',
-				PERMISSION_RESULTS_DELETE: 'results_delete',
-				PERMISSION_SUBMIT: 'submit',
-				/** Internal permission to mark public link shares as embeddable */
-				PERMISSION_EMBED: 'embed',
-				PERMISSION_ALL: [
-					this.PERMISSION_EDIT,
-					this.PERMISSION_RESULTS,
-					this.PERMISSION_RESULTS_DELETE,
-					this.PERMISSION_SUBMIT,
-				],
-			},
-		}
-	},
-}
diff --git a/src/mixins/PermissionTypes.ts b/src/mixins/PermissionTypes.ts
new file mode 100644
index 000000000..b738e3000
--- /dev/null
+++ b/src/mixins/PermissionTypes.ts
@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineComponent } from 'vue'
+
+// !!! Keep in Sync with lib/Constants.php !!!
+export const PERMISSION_EDIT = 'edit'
+export const PERMISSION_RESULTS = 'results'
+export const PERMISSION_RESULTS_DELETE = 'results_delete'
+export const PERMISSION_SUBMIT = 'submit'
+/** Internal permission to mark public link shares as embeddable */
+export const PERMISSION_EMBED = 'embed'
+export const PERMISSION_ALL = [
+	PERMISSION_EDIT,
+	PERMISSION_RESULTS,
+	PERMISSION_RESULTS_DELETE,
+	PERMISSION_SUBMIT,
+]
+
+export interface PermissionTypesData {
+	PERMISSION_TYPES: {
+		PERMISSION_EDIT: string
+		PERMISSION_RESULTS: string
+		PERMISSION_RESULTS_DELETE: string
+		PERMISSION_SUBMIT: string
+		PERMISSION_EMBED: string
+		PERMISSION_ALL: string[]
+	}
+}
+
+export default defineComponent({
+	name: 'PermissionTypes',
+
+	data(): PermissionTypesData {
+		return {
+			PERMISSION_TYPES: {
+				PERMISSION_EDIT,
+				PERMISSION_RESULTS,
+				PERMISSION_RESULTS_DELETE,
+				PERMISSION_SUBMIT,
+				PERMISSION_EMBED,
+				PERMISSION_ALL,
+			},
+		}
+	},
+})
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.ts
similarity index 65%
rename from src/mixins/QuestionMixin.js
rename to src/mixins/QuestionMixin.ts
index 2cb78dfc8..0eee3f528 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.ts
@@ -1,18 +1,30 @@
-import axios from '@nextcloud/axios'
 /**
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+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 { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
+import { defineComponent } from 'vue'
 import Question from '../components/Questions/Question.vue'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+
+/** QuestionMixin data interface */
+interface QuestionMixinData {
+	errorMessage: string | null
+}
+
+export default defineComponent({
+	name: 'QuestionMixin',
 
-export default {
 	inheritAttrs: false,
 
 	emits: [
@@ -30,65 +42,49 @@ export default {
 	],
 
 	props: {
-		/**
-		 * Question-Id
-		 */
+		/** Question-Id */
 		id: {
 			type: Number,
 			required: true,
 		},
 
-		/**
-		 * ID of the form
-		 */
+		/** ID of the form */
 		formId: {
 			type: Number,
 			default: null,
 		},
 
-		/**
-		 * The question title
-		 */
+		/** The question title */
 		text: {
 			type: String,
 			required: true,
 		},
 
-		/**
-		 * Question Description
-		 */
+		/** Question Description */
 		description: {
 			type: String,
 			required: true,
 		},
 
-		/**
-		 * Required-Setting
-		 */
+		/** Required-Setting */
 		isRequired: {
 			type: Boolean,
 			required: true,
 		},
 
-		/**
-		 * The index of the question
-		 */
+		/** The index of the question */
 		index: {
 			type: Number,
 			required: true,
 		},
 
-		/**
-		 * Technical name
-		 */
+		/** Technical name */
 		name: {
 			type: String,
 			default: '',
 		},
 
-		/**
-		 * The user answers
-		 */
+		/** The user answers */
 		values: {
 			type: [Array, Object],
 			default() {
@@ -96,66 +92,50 @@ export default {
 			},
 		},
 
-		/**
-		 * The question list of answers
-		 */
+		/** The question list of answers */
 		options: {
-			type: Array,
+			type: Array as () => FormsOption[],
 			required: true,
 		},
 
-		/**
-		 * Order of the question
-		 */
+		/** Order of the question */
 		order: {
 			type: Number,
 			default: -1,
 		},
 
-		/**
-		 * Question type
-		 */
+		/** Question type */
 		type: {
 			type: String,
 			default: null,
 		},
 
-		/**
-		 * Answer type model object
-		 */
+		/** Answer type model object */
 		answerType: {
 			type: Object,
 			required: true,
 		},
 
-		/**
-		 * Submission or Edit-Mode
-		 */
+		/** Submission or Edit-Mode */
 		readOnly: {
 			type: Boolean,
 			default: false,
 		},
 
-		/**
-		 * Database-Restrictions
-		 */
+		/** Database-Restrictions */
 		maxStringLengths: {
 			type: Object,
 			required: true,
 		},
 
-		/**
-		 * Extra settings
-		 */
+		/** Extra settings */
 		extraSettings: {
 			default: () => {
 				return {}
 			},
 		},
 
-		/**
-		 * Mime-Types and file extensions that are allowed to be uploaded
-		 */
+		/** Mime-Types and file extensions that are allowed to be uploaded */
 		accept: {
 			type: Array,
 			default() {
@@ -163,17 +143,13 @@ export default {
 			},
 		},
 
-		/**
-		 * Can question be moved up in order?
-		 */
+		/** Can question be moved up in order? */
 		canMoveUp: {
 			type: Boolean,
 			default: false,
 		},
 
-		/**
-		 * Can question be moved down in order?
-		 */
+		/** Can question be moved down in order? */
 		canMoveDown: {
 			type: Boolean,
 			default: false,
@@ -184,19 +160,17 @@ export default {
 		Question,
 	},
 
-	data() {
+	data(): QuestionMixinData {
 		return {
-			/**
-			 * The shown error message
-			 */
+			/** The shown error message */
 			errorMessage: null,
 		}
 	},
 
 	computed: {
-		questionProps() {
+		questionProps(): any {
 			const props = { ...this.$props }
-			const allowedKeys = Object.keys(Question.props)
+			const allowedKeys = Object.keys(Question.props || {})
 			Object.keys(props).forEach((key) => {
 				if (!allowedKeys.includes(key)) {
 					delete props[key]
@@ -205,34 +179,34 @@ export default {
 			return props
 		},
 
-		titleId() {
+		titleId(): string {
 			return 'q' + this.index + '_title'
 		},
 
-		descriptionId() {
+		descriptionId(): string {
 			return 'q' + this.index + '_desc'
 		},
 
-		hasError() {
+		hasError(): boolean {
 			return !!this.errorMessage
 		},
 
-		hasInfo() {
-			return !!this.infoMessage
+		hasInfo(): boolean {
+			return !!(this as any).infoMessage
 		},
 
-		errorId() {
+		errorId(): string {
 			return `q${this.index}_error`
 		},
 
-		infoId() {
+		infoId(): string {
 			return `q${this.index}_info`
 		},
 
 		/**
 		 * Listeners for all questions to forward
 		 */
-		commonListeners() {
+		commonListeners(): any {
 			return {
 				clone: this.onClone,
 				delete: this.onDelete,
@@ -240,8 +214,8 @@ export default {
 				'update:description': this.onDescriptionChange,
 				'update:isRequired': this.onRequiredChange,
 				'update:name': this.onNameChange,
-				moveDown: (...args) => this.$emit('moveDown', ...args),
-				moveUp: (...args) => this.$emit('moveUp', ...args),
+				moveDown: (...args: any[]) => this.$emit('moveDown', ...args),
+				moveUp: (...args: any[]) => this.$emit('moveUp', ...args),
 			}
 		},
 	},
@@ -250,48 +224,38 @@ export default {
 		/**
 		 * Override to allow custom validation
 		 */
-		async validate() {
+		async validate(): Promise<boolean> {
 			return true
 		},
 
 		/**
 		 * Forward the title change to the parent and store to db
-		 *
-		 * @param {string} text the title
 		 */
-		onTitleChange: debounce(function (text) {
+		onTitleChange: debounce(function (this: any, text: string) {
 			this.$emit('update:text', text)
 			this.saveQuestionProperty('text', text)
 		}, INPUT_DEBOUNCE_MS),
 
 		/**
 		 * Forward the description change to the parent and store to db
-		 *
-		 * @param {string} description the description
 		 */
-		onDescriptionChange: debounce(function (description) {
+		onDescriptionChange: debounce(function (this: any, description: string) {
 			this.$emit('update:description', description)
 			this.saveQuestionProperty('description', description)
 		}, INPUT_DEBOUNCE_MS),
 
 		/**
 		 * Forward the required change to the parent and store to db
-		 *
-		 * @param {boolean} isRequiredValue new isRequired Value
 		 */
-		onRequiredChange: debounce(function (isRequiredValue) {
+		onRequiredChange: debounce(function (this: any, isRequiredValue: boolean) {
 			this.$emit('update:isRequired', isRequiredValue)
 			this.saveQuestionProperty('isRequired', isRequiredValue)
 		}, INPUT_DEBOUNCE_MS),
 
 		/**
 		 * Create mapper to forward the required change to the parent and store to db
-		 *
-		 * Either an object containing the *changed* settings.
-		 *
-		 * @param {object} newSettings changed settings
 		 */
-		onExtraSettingsChange: debounce(function (newSettings) {
+		onExtraSettingsChange: debounce(function (this: any, newSettings: any) {
 			const newExtraSettings = { ...this.extraSettings, ...newSettings }
 			this.$emit('update:extraSettings', newExtraSettings)
 			this.saveQuestionProperty('extraSettings', newExtraSettings)
@@ -299,10 +263,8 @@ export default {
 
 		/**
 		 * Forward the technical-name change to the parent and store to db
-		 *
-		 * @param {string} name The new technical name of the input
 		 */
-		onNameChange: debounce(function (name) {
+		onNameChange: debounce(function (this: any, name: string) {
 			this.$emit('update:name', name)
 			this.saveQuestionProperty('name', name)
 		}, INPUT_DEBOUNCE_MS),
@@ -310,32 +272,32 @@ export default {
 		/**
 		 * Forward the required change to the parent and store to db
 		 *
-		 * @param {boolean} shuffle Should options be shuffled
+		 * @param shuffle
 		 */
-		onShuffleOptionsChange(shuffle) {
-			return this.onExtraSettingsChange({ shuffleOptions: shuffle })
+		onShuffleOptionsChange(shuffle: boolean): void {
+			return (this.onExtraSettingsChange as any)({ shuffleOptions: shuffle })
 		},
 
 		/**
 		 * Forward the answer(s) change to the parent
 		 *
-		 * @param {Array} values the array of answers
+		 * @param values
 		 */
-		onValuesChange(values) {
+		onValuesChange(values: any): void {
 			this.$emit('update:values', values)
 		},
 
 		/**
 		 * Delete this question
 		 */
-		onDelete() {
+		onDelete(): void {
 			this.$emit('delete')
 		},
 
 		/**
 		 * Clone this question.
 		 */
-		onClone() {
+		onClone(): void {
 			this.$emit('clone')
 		},
 
@@ -343,21 +305,21 @@ export default {
 		 * Don't automatically submit form on Enter, parent will handle that
 		 * To be called with prevent: @keydown.enter.prevent="onKeydownEnter"
 		 *
-		 * @param {object} event The fired event
+		 * @param event
 		 */
-		onKeydownEnter(event) {
+		onKeydownEnter(event: KeyboardEvent): void {
 			this.$emit('keydown', event)
 		},
 
 		/**
 		 * Focus the first focusable element
 		 */
-		focus() {
-			this.$el.scrollIntoView({ behavior: 'smooth' })
+		focus(): void {
+			;(this.$el as HTMLElement).scrollIntoView({ behavior: 'smooth' })
 			this.$nextTick(() => {
-				const title = this.$el.querySelector(
+				const title = (this.$el as HTMLElement).querySelector(
 					'.question__header__title__text__input',
-				)
+				) as HTMLInputElement
 				if (title) {
 					title.focus()
 				}
@@ -367,10 +329,9 @@ export default {
 		/**
 		 * Shuffle an array using Fisher-Yates
 		 *
-		 * @param {Array} input Input array to shuffle
-		 * @return {Array} Shuffled input array
+		 * @param input
 		 */
-		shuffleArray(input) {
+		shuffleArray(input: any[]): any[] {
 			const shuffled = [...input]
 			let idx = shuffled.length
 			while (--idx > 0) {
@@ -383,7 +344,7 @@ export default {
 			return shuffled
 		},
 
-		async saveQuestionProperty(key, value) {
+		async saveQuestionProperty(key: string, value: any): Promise<void> {
 			try {
 				// TODO: add loading status feedback ?
 				await axios.patch(
@@ -410,10 +371,13 @@ export default {
 		/**
 		 * Handles multiple options for a question.
 		 *
-		 * @param {Array<string>} answers - The array of answers for the question.
+		 * @param answers
 		 */
-		async handleMultipleOptions(answers) {
-			this.isLoading = true
+		async handleMultipleOptions(answers: string[]): Promise<void> {
+			const component = this as any
+			if (component.isLoading !== undefined) {
+				component.isLoading = true
+			}
 			try {
 				const response = await axios.post(
 					generateOcsUrl(
@@ -428,26 +392,32 @@ export default {
 						optionType: OptionType.Choice,
 					},
 				)
-				const newServerOptions = OcsResponse2Data(response) // Assuming this function can handle arrays
+				const newServerOptions = OcsResponse2Data(response)
 				const options = this.options.slice()
-				newServerOptions.forEach((option) => {
+				newServerOptions.forEach((option: FormsOption) => {
 					options.push({
-						id: option.id, // Use the ID from the server
+						id: option.id,
 						questionId: this.id,
 						text: option.text,
 						optionType: option.optionType,
 						local: false,
 					})
 				})
-				this.updateOptions(options)
+				if (component.updateOptions) {
+					component.updateOptions(options)
+				}
 				this.$nextTick(() => {
-					this.focusIndex(options.length - 1)
+					if (component.focusIndex) {
+						component.focusIndex(options.length - 1, OptionType.Choice)
+					}
 				})
 			} catch (error) {
 				logger.error('Error while saving question options', { error })
 				showError(t('forms', 'Error while saving question options'))
 			}
-			this.isLoading = false
+			if (component.isLoading !== undefined) {
+				component.isLoading = false
+			}
 		},
 	},
-}
+})
diff --git a/src/mixins/QuestionMultipleMixin.ts b/src/mixins/QuestionMultipleMixin.ts
index ae1472497..1f72ba4a7 100644
--- a/src/mixins/QuestionMultipleMixin.ts
+++ b/src/mixins/QuestionMultipleMixin.ts
@@ -13,41 +13,61 @@ import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
+
+// Temporary augmentation to allow using `this.<prop>` in mixin methods
+declare module '@vue/runtime-core' {
+	interface ComponentCustomProperties {
+		options: FormsOption[]
+		values: unknown[]
+		answerType: { validate: (ctx: unknown) => boolean }
+		readOnly: boolean
+		extraSettings?: unknown
+		formId: number
+		id: number
+		shuffleArray: <T>(arr: T[]) => T[]
+		$refs: Record<string, unknown>
+	}
+}
 
 export default defineComponent({
 	emits: ['update:options'],
 
 	data() {
 		return {
-			dirtyOptionsType: null,
+			dirtyOptionsType: null as string | null,
 		}
 	},
 
 	computed: {
-		areNoneChecked() {
+		areNoneChecked(): boolean {
 			return this.values.length === 0
 		},
 
-		contentValid() {
+		contentValid(): boolean {
 			return this.answerType.validate(this)
 		},
 
-		isLastEmpty() {
-			const value = this.options[this.options.length - 1]
+		isLastEmpty(): boolean {
+			const value = this.options[this.options.length - 1] as
+				FormsOption | undefined
 			return value?.text?.trim?.().length === 0
 		},
 
-		expectedOptionTypes() {
+		expectedOptionTypes(): OptionType[] {
 			return [OptionType.Choice, OptionType.Row, OptionType.Column]
 		},
 
 		sortedOptionsPerType(): { [key: string]: FormsOption[] } {
-			const optionsPerType = Object.fromEntries(
-				this.expectedOptionTypes.map((optionType) => [optionType, []]),
-			)
+			const optionsPerType: { [key: string]: FormsOption[] } =
+				Object.fromEntries(
+					this.expectedOptionTypes.map((optionType) => [
+						optionType,
+						[] as FormsOption[],
+					]),
+				)
 
-			this.options.forEach((option) => {
+			this.options.forEach((option: FormsOption) => {
 				optionsPerType[option.optionType].push(option)
 			})
 
@@ -69,14 +89,15 @@ export default defineComponent({
 					})
 
 					if (!this.readOnly) {
-						// In edit mode append an empty option
+						// In edit mode append an empty option (cast as FormsOption temporarily)
 						optionsPerType[optionType].push({
+							id: 0,
 							local: true,
 							questionId: this.id,
 							text: '',
 							optionType,
 							order: optionsPerType[optionType].length,
-						})
+						} as FormsOption)
 					}
 				}
 			}
@@ -104,7 +125,7 @@ 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) => {
+			const item = this.$refs.input.find((instance: unknown) => {
 				return (
 					instance.$props.optionType === optionType
 					&& instance.$props.index === index
@@ -143,12 +164,13 @@ export default defineComponent({
 				return [
 					...options,
 					{
+						id: 0,
 						local: true,
 						questionId: this.id,
 						text: '',
 						optionType,
 						order: options.length,
-					},
+					} as FormsOption,
 				]
 			}
 			return options
@@ -386,7 +408,7 @@ export default defineComponent({
 	},
 
 	watch: {
-		dirtyOptionsType: debounce(function () {
+		dirtyOptionsType: debounce(function (this: unknown) {
 			if (!this.dirtyOptionsType) {
 				return
 			}
diff --git a/src/mixins/ShareLinkMixin.js b/src/mixins/ShareLinkMixin.ts
similarity index 62%
rename from src/mixins/ShareLinkMixin.js
rename to src/mixins/ShareLinkMixin.ts
index 267820b70..a7c704bcf 100644
--- a/src/mixins/ShareLinkMixin.js
+++ b/src/mixins/ShareLinkMixin.ts
@@ -1,20 +1,31 @@
-import { showError, showSuccess } from '@nextcloud/dialogs'
 /**
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import logger from '../utils/Logger.js'
+import { defineComponent } from 'vue'
+import logger from '../utils/Logger.ts'
+
+export interface Share {
+	shareType: number
+	permissions?: string[]
+	shareWith?: string
+}
+
+export default defineComponent({
+	name: 'ShareLinkMixin',
 
-export default {
 	methods: {
 		/**
 		 * Get the internal link for sharing the form
 		 *
-		 * @param {string} formHash Internal form hash
-		 * @return {string} link
+		 * @param formHash Internal form hash
+		 * @return link
 		 */
-		getInternalShareLink(formHash) {
+		getInternalShareLink(formHash: string): string {
 			return (
 				window.location.protocol
 				+ '//'
@@ -26,12 +37,13 @@ export default {
 		/**
 		 * Get the publish share link for a given share
 		 *
-		 * @param {object} share The share
-		 * @return {string} link
+		 * @param share The share
+		 * @return link
 		 */
-		getPublicShareLink(share) {
+		getPublicShareLink(share: Share): string {
 			let url
-			if (this.isEmbeddingAllowed(share)) {
+
+			if ((this as any).isEmbeddingAllowed(share)) {
 				url = generateUrl(`/apps/forms/embed/${share.shareWith}`)
 			} else {
 				url = generateUrl(`/apps/forms/s/${share.shareWith}`)
@@ -42,13 +54,14 @@ export default {
 		/**
 		 * Check if a share can be used for embedding
 		 *
-		 * @param {{ shareType: number, permissions: string[] }} share The share to check
+		 * @param share The share to check
 		 */
-		isEmbeddingAllowed(share) {
+		isEmbeddingAllowed(share: Share): boolean {
+			const self = this as any
 			return (
-				share.shareType === this.SHARE_TYPES.SHARE_TYPE_LINK
+				share.shareType === self.SHARE_TYPES.SHARE_TYPE_LINK
 				&& share.permissions?.includes(
-					this.PERMISSION_TYPES.PERMISSION_EMBED,
+					self.PERMISSION_TYPES.PERMISSION_EMBED,
 				)
 			)
 		},
@@ -56,10 +69,10 @@ export default {
 		/**
 		 * Copy link to clipboard.
 		 *
-		 * @param {object} event Origin event of function call.
-		 * @param {string} link Link to copy
+		 * @param event Origin event of function call.
+		 * @param link Link to copy
 		 */
-		async copyLink(event, link) {
+		async copyLink(event: Event, link: string): Promise<void> {
 			// Copy link, boolean return indicates success or fail.
 			try {
 				await navigator.clipboard.writeText(link)
@@ -69,15 +82,15 @@ export default {
 				logger.error('Copy link failed', { error })
 			}
 			// Set back focus as clipboard removes focus
-			event.target.focus()
+			;(event.target as HTMLElement).focus()
 		},
 
 		/**
 		 * Copy code to embed public share inside external websites
 		 *
-		 * @param {object} share Public link-share
+		 * @param share Public link-share
 		 */
-		async copyEmbeddingCode(share) {
+		async copyEmbeddingCode(share: Share): Promise<void> {
 			const code = `<iframe src="${this.getPublicShareLink(share)}" width="750" height="900"></iframe>`
 			try {
 				await navigator.clipboard.writeText(code)
@@ -87,7 +100,8 @@ export default {
 				logger.error('Copy embedding code failed', { error })
 			}
 			// Set back focus as clipboard removes focus
-			event.target.focus()
+
+			;(event as any).target.focus()
 		},
 	},
-}
+})
diff --git a/src/mixins/ShareTypes.js b/src/mixins/ShareTypes.js
deleted file mode 100644
index 48beee7be..000000000
--- a/src/mixins/ShareTypes.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-import IconChatSvg from '@material-symbols/svg-400/outlined/chat_bubble.svg?raw'
-import IconCircleSvg from '@material-symbols/svg-400/outlined/circle.svg?raw'
-import IconGroupSvg from '@material-symbols/svg-400/outlined/group.svg?raw'
-import IconMailSvg from '@material-symbols/svg-400/outlined/mail.svg?raw'
-import IconUserSvg from '@material-symbols/svg-400/outlined/person.svg?raw'
-
-export default {
-	data() {
-		return {
-			SHARE_TYPES: {
-				SHARE_TYPE_USER: OC.Share.SHARE_TYPE_USER,
-				SHARE_TYPE_GROUP: OC.Share.SHARE_TYPE_GROUP,
-				SHARE_TYPE_LINK: OC.Share.SHARE_TYPE_LINK,
-				SHARE_TYPE_EMAIL: OC.Share.SHARE_TYPE_EMAIL,
-				SHARE_TYPE_REMOTE: OC.Share.SHARE_TYPE_REMOTE,
-				SHARE_TYPE_CIRCLE: OC.Share.SHARE_TYPE_CIRCLE,
-				SHARE_TYPE_GUEST: OC.Share.SHARE_TYPE_GUEST,
-				SHARE_TYPE_REMOTE_GROUP: OC.Share.SHARE_TYPE_REMOTE_GROUP,
-				SHARE_TYPE_ROOM: OC.Share.SHARE_TYPE_ROOM,
-			},
-
-			/**
-			 * !!! Keep in Sync with lib/Constants.php !!
-			 */
-			SHARE_TYPES_USED: [
-				OC.Share.SHARE_TYPE_USER,
-				OC.Share.SHARE_TYPE_GROUP,
-				OC.Share.SHARE_TYPE_LINK,
-				OC.Share.SHARE_TYPE_CIRCLE,
-			],
-		}
-	},
-
-	methods: {
-		/**
-		 * Get the icon based on the share type
-		 * Default share is a user, other icons are here to differenciate from it, so let's not display the user icon.
-		 *
-		 * @param {number} type the share type
-		 * @return {string} the icon as raw svg
-		 */
-		shareTypeToIcon(type) {
-			switch (type) {
-				case this.SHARE_TYPES.SHARE_TYPE_GUEST:
-					// case this.SHARE_TYPES.SHARE_TYPE_REMOTE:
-					// case this.SHARE_TYPES.SHARE_TYPE_USER:
-					return IconUserSvg
-				case this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP:
-				case this.SHARE_TYPES.SHARE_TYPE_GROUP:
-					return IconGroupSvg
-				case this.SHARE_TYPES.SHARE_TYPE_EMAIL:
-					return IconMailSvg
-				case this.SHARE_TYPES.SHARE_TYPE_CIRCLE:
-					return IconCircleSvg
-				case this.SHARE_TYPES.SHARE_TYPE_ROOM:
-					return IconChatSvg
-
-				default:
-					return ''
-			}
-		},
-	},
-}
diff --git a/src/mixins/ShareTypes.ts b/src/mixins/ShareTypes.ts
new file mode 100644
index 000000000..9370f55ca
--- /dev/null
+++ b/src/mixins/ShareTypes.ts
@@ -0,0 +1,88 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import IconChatSvg from '@material-symbols/svg-400/outlined/chat_bubble.svg?raw'
+import IconCircleSvg from '@material-symbols/svg-400/outlined/circle.svg?raw'
+import IconGroupSvg from '@material-symbols/svg-400/outlined/group.svg?raw'
+import IconMailSvg from '@material-symbols/svg-400/outlined/mail.svg?raw'
+import IconUserSvg from '@material-symbols/svg-400/outlined/person.svg?raw'
+import { defineComponent } from 'vue'
+
+export interface ShareTypesData {
+	SHARE_TYPES: {
+		SHARE_TYPE_USER: number
+		SHARE_TYPE_GROUP: number
+		SHARE_TYPE_LINK: number
+		SHARE_TYPE_EMAIL: number
+		SHARE_TYPE_REMOTE: number
+		SHARE_TYPE_CIRCLE: number
+		SHARE_TYPE_GUEST: number
+		SHARE_TYPE_REMOTE_GROUP: number
+		SHARE_TYPE_ROOM: number
+	}
+	SHARE_TYPES_USED: number[]
+}
+
+export default defineComponent({
+	name: 'ShareTypes',
+
+	data(): ShareTypesData {
+		return {
+			SHARE_TYPES: {
+				SHARE_TYPE_USER: (window as any).OC.Share.SHARE_TYPE_USER,
+				SHARE_TYPE_GROUP: (window as any).OC.Share.SHARE_TYPE_GROUP,
+				SHARE_TYPE_LINK: (window as any).OC.Share.SHARE_TYPE_LINK,
+				SHARE_TYPE_EMAIL: (window as any).OC.Share.SHARE_TYPE_EMAIL,
+				SHARE_TYPE_REMOTE: (window as any).OC.Share.SHARE_TYPE_REMOTE,
+				SHARE_TYPE_CIRCLE: (window as any).OC.Share.SHARE_TYPE_CIRCLE,
+				SHARE_TYPE_GUEST: (window as any).OC.Share.SHARE_TYPE_GUEST,
+				SHARE_TYPE_REMOTE_GROUP: (window as any).OC.Share
+					.SHARE_TYPE_REMOTE_GROUP,
+				SHARE_TYPE_ROOM: (window as any).OC.Share.SHARE_TYPE_ROOM,
+			},
+
+			/**
+			 * !!! Keep in Sync with lib/Constants.php !!
+			 */
+			SHARE_TYPES_USED: [
+				(window as any).OC.Share.SHARE_TYPE_USER,
+				(window as any).OC.Share.SHARE_TYPE_GROUP,
+				(window as any).OC.Share.SHARE_TYPE_LINK,
+				(window as any).OC.Share.SHARE_TYPE_CIRCLE,
+			],
+		}
+	},
+
+	methods: {
+		/**
+		 * Get the icon based on the share type
+		 * Default share is a user, other icons are here to differenciate from it, so let's not display the user icon.
+		 *
+		 * @param type the share type
+		 * @return the icon as raw svg
+		 */
+		shareTypeToIcon(type: number): string {
+			switch (type) {
+				case this.SHARE_TYPES.SHARE_TYPE_GUEST:
+					// case this.SHARE_TYPES.SHARE_TYPE_REMOTE:
+					// case this.SHARE_TYPES.SHARE_TYPE_USER:
+					return IconUserSvg
+				case this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP:
+				case this.SHARE_TYPES.SHARE_TYPE_GROUP:
+					return IconGroupSvg
+				case this.SHARE_TYPES.SHARE_TYPE_EMAIL:
+					return IconMailSvg
+				case this.SHARE_TYPES.SHARE_TYPE_CIRCLE:
+					return IconCircleSvg
+				case this.SHARE_TYPES.SHARE_TYPE_ROOM:
+					return IconChatSvg
+
+				default:
+					return ''
+			}
+		},
+	},
+})
diff --git a/src/mixins/UserSearchMixin.js b/src/mixins/UserSearchMixin.ts
similarity index 61%
rename from src/mixins/UserSearchMixin.js
rename to src/mixins/UserSearchMixin.ts
index ffc50e8c8..d30e18311 100644
--- a/src/mixins/UserSearchMixin.js
+++ b/src/mixins/UserSearchMixin.ts
@@ -1,66 +1,108 @@
-import { getCurrentUser } from '@nextcloud/auth'
-import axios from '@nextcloud/axios'
 /**
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { getCurrentUser } from '@nextcloud/auth'
+import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
+import { defineComponent } from 'vue'
 import { INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
-import ShareTypes from './ShareTypes.js'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+import ShareTypes from './ShareTypes.ts'
+
+export interface Sharee {
+	label: string
+	shareWithDisplayNameUnique: string
+	value: {
+		shareType: number
+		shareWith: string
+	}
+	status?: unknown
+}
+
+export interface FormattedSharee {
+	shareWith: string
+	shareType: number
+	user: string
+	isNoUser: boolean
+	id: string
+	displayName: string
+	subname: string
+	iconSvg: string
+	key: string
+}
+
+export interface UserSearchMixinData {
+	loading: boolean
+	query: string
+	maxAutocompleteResults: number
+	minSearchStringLength: number
+	recommendations: FormattedSharee[]
+	suggestions: FormattedSharee[]
+}
+
+export default defineComponent({
+	name: 'UserSearchMixin',
 
-export default {
 	mixins: [ShareTypes],
-	data() {
+
+	data(): UserSearchMixinData {
 		return {
 			loading: false,
 
 			query: '',
 			// TODO: have a global mixin for this, shared with server?
 			maxAutocompleteResults:
-				parseInt(OC.config['sharing.maxAutocompleteResults'], 10) || 200,
+				parseInt(
+					(window as any).OC.config['sharing.maxAutocompleteResults'],
+					10,
+				) || 200,
 			minSearchStringLength:
-				parseInt(OC.config['sharing.minSearchStringLength'], 10) || 0,
+				parseInt(
+					(window as any).OC.config['sharing.minSearchStringLength'],
+					10,
+				) || 0,
 			// Search Results
 			recommendations: [],
 			suggestions: [],
 		}
 	},
+
 	computed: {
 		/**
 		 * Is the search query valid ?
-		 *
-		 * @return {boolean}
 		 */
-		isValidQuery() {
+		isValidQuery(): boolean {
 			return (
 				this.query
 				&& this.query.trim() !== ''
 				&& this.query.length > this.minSearchStringLength
 			)
 		},
+
 		/**
 		 * Text when there is no Results to be shown
-		 *
-		 * @return {string}
 		 */
-		noResultText() {
+		noResultText(): string {
 			if (!this.query) {
 				return t('forms', 'No recommendations. Start typing.')
 			}
 			return t('forms', 'No elements found.')
 		},
 	},
+
 	methods: {
 		/**
 		 * Search for suggestions
 		 *
-		 * @param {string} query The search query to search for
-		 * @param {number[]|undefined} shareType The type of recipient to search.
+		 * @param query The search query to search for
+		 * @param shareType The type of recipient to search.
 		 */
-		async asyncSearch(query, shareType) {
+		async asyncSearch(query: string, shareType?: number[]): Promise<void> {
 			// save query to check if valid
 			this.query = query.trim()
 			if (this.isValidQuery) {
@@ -72,25 +114,27 @@ export default {
 
 		/**
 		 * Debounce getSuggestions
-		 *
-		 * @param {...*} args arguments to pass
 		 */
-		debounceGetSuggestions: debounce(function (...args) {
+		debounceGetSuggestions: debounce(function (
+			this: any,
+			...args: [string, number[] | undefined]
+		) {
 			this.getSuggestions(...args)
 		}, INPUT_DEBOUNCE_MS),
 
 		/**
 		 * Get suggestions
 		 *
-		 * @param {string} query the search query
-		 * @param {number[]|undefined} shareType The type of recipient to search.
+		 * @param query the search query
+		 * @param shareType The type of recipient to search.
 		 */
-		async getSuggestions(query, shareType) {
+		async getSuggestions(query: string, shareType?: number[]): Promise<void> {
 			this.loading = true
 
 			// Search for all used share-types, except public link.
-			shareType ??= this.SHARE_TYPES_USED.filter(
-				(type) => type !== this.SHARE_TYPES.SHARE_TYPE_LINK,
+
+			shareType ??= (this as any).SHARE_TYPES_USED.filter(
+				(type: number) => type !== (this as any).SHARE_TYPES.SHARE_TYPE_LINK,
 			)
 
 			try {
@@ -107,7 +151,7 @@ export default {
 					},
 				)
 
-				const data = OcsResponse2Data(request)
+				const data = OcsResponse2Data(request) as any
 				const exact = data.exact
 				delete data.exact // removing exact from general results
 
@@ -125,7 +169,7 @@ export default {
 		/**
 		 * Get the sharing recommendations
 		 */
-		async getRecommendations() {
+		async getRecommendations(): Promise<void> {
 			this.loading = true
 
 			try {
@@ -140,7 +184,7 @@ export default {
 				)
 
 				this.recommendations = this.formatSearchResults(
-					OcsResponse2Data(request).exact,
+					(OcsResponse2Data(request) as any).exact,
 				)
 			} catch (error) {
 				logger.error('Fetching recommendations failed.', { error })
@@ -148,19 +192,14 @@ export default {
 				this.loading = false
 			}
 		},
-		/**
-		 * A OCS Sharee response
-		 *
-		 * @typedef {{label: string, shareWithDisplayNameUnique: string, value: { shareType: number, shareWith: string }, status?: unknown }} Sharee
-		 */
 
 		/**
 		 * Format search results
 		 *
-		 * @param {Record<string, Sharee>} results Results as returned by search
-		 * @return {Sharee[]} results as we use them on storage
+		 * @param results Results as returned by search
+		 * @return results as we use them on storage
 		 */
-		formatSearchResults(results) {
+		formatSearchResults(results: Record<string, Sharee>): FormattedSharee[] {
 			// flatten array of arrays
 			const flatResults = Object.values(results).flat()
 
@@ -176,10 +215,10 @@ export default {
 		 * Remove static unwanted shares from search results
 		 * Existing shares must be done dynamically to account for new shares.
 		 *
-		 * @param {Sharee[]} shares the array of share objects
-		 * @return {Sharee[]}
+		 * @param shares the array of share objects
+		 * @return
 		 */
-		filterUnwantedShares(shares) {
+		filterUnwantedShares(shares: Sharee[]): Sharee[] {
 			return shares.filter((share) => {
 				// only use proper objects
 				if (typeof share !== 'object') {
@@ -188,8 +227,10 @@ export default {
 
 				try {
 					// filter out current user
+
 					if (
-						share.value.shareType === this.SHARE_TYPES.SHARE_TYPE_USER
+						share.value.shareType
+							=== (this as any).SHARE_TYPES.SHARE_TYPE_USER
 						&& share.value.shareWith === getCurrentUser().uid
 					) {
 						return false
@@ -206,22 +247,26 @@ export default {
 		/**
 		 * Format shares for the multiselect options
 		 *
-		 * @param {Sharee} share Share in search formatting
-		 * @return {object} Share in multiselect formatting
+		 * @param share Share in search formatting
+		 * @return Share in multiselect formatting
 		 */
-		formatForMultiselect(share) {
+		formatForMultiselect(share: Sharee): FormattedSharee {
 			return {
 				shareWith: share.value.shareWith,
 				shareType: share.value.shareType,
 				user: share.value.shareWith,
-				isNoUser: share.value.shareType !== this.SHARE_TYPES.SHARE_TYPE_USER,
+
+				isNoUser:
+					share.value.shareType
+					!== (this as any).SHARE_TYPES.SHARE_TYPE_USER,
 				id: share.value.shareWith,
 				displayName: share.label,
 				subname: share.shareWithDisplayNameUnique,
-				iconSvg: this.shareTypeToIcon(share.value.shareType),
+
+				iconSvg: (this as any).shareTypeToIcon(share.value.shareType),
 				// Vue unique binding to render within Multiselect's AvatarSelectOption
 				key: share.value.shareWith + '-' + share.value.shareType,
 			}
 		},
 	},
-}
+})
diff --git a/src/mixins/ViewsMixin.js b/src/mixins/ViewsMixin.ts
similarity index 60%
rename from src/mixins/ViewsMixin.js
rename to src/mixins/ViewsMixin.ts
index 87e78e020..24a66e20f 100644
--- a/src/mixins/ViewsMixin.js
+++ b/src/mixins/ViewsMixin.ts
@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios, { isCancel } from '@nextcloud/axios'
@@ -10,11 +11,74 @@ import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import MarkdownIt from 'markdown-it'
-import CancelableRequest from '../utils/CancelableRequest.js'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
+import { defineComponent } from 'vue'
+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
+	cancelFetchFullForm: (reason?: string) => void
+	markdownit: MarkdownIt
+}
+
+export default defineComponent({
+	name: 'ViewsMixin',
 
-export default {
 	provide() {
 		return {
 			$markdownit: this.markdownit,
@@ -27,7 +91,7 @@ export default {
 			default: '',
 		},
 		form: {
-			type: Object,
+			type: Object as () => FormsForm,
 			required: true,
 		},
 		publicView: {
@@ -40,7 +104,7 @@ export default {
 		},
 	},
 
-	data() {
+	data(): ViewsMixinData {
 		return {
 			// State-Variable
 			isLoadingForm: true,
@@ -56,17 +120,15 @@ export default {
 	computed: {
 		/**
 		 * Return form title, or placeholder if not set
-		 *
-		 * @return {string}
 		 */
-		formTitle() {
+		formTitle(): string {
 			if (this.form.title) {
 				return this.form.title
 			}
 			return t('forms', 'New form')
 		},
 
-		formDescription() {
+		formDescription(): string {
 			// Remember the old renderer if overridden, or proxy to the default renderer.
 			const defaultRender =
 				this.markdownit.renderer.rules.link_open
@@ -94,35 +156,35 @@ export default {
 			)
 		},
 
-		isFormLocked() {
+		isFormLocked(): boolean {
 			return (
 				this.form.lockedUntil === 0
-				|| (this.form.lockedUntil > moment().unix()
+				|| (this.form.lockedUntil! > moment().unix()
 					&& this.form.lockedBy !== getCurrentUser().uid)
 			)
 		},
 	},
 
 	methods: {
-		onShareForm() {
+		onShareForm(): void {
 			this.$emit('open-sharing', this.form.hash)
 		},
 
 		/**
 		 * Focus title after form load
 		 */
-		focusTitle() {
+		focusTitle(): void {
 			this.$nextTick(() => {
-				this.$refs.title?.focus()
+				;(this.$refs.title as any)?.focus()
 			})
 		},
 
 		/**
 		 * Fetch the full form data and update parent
 		 *
-		 * @param {number} id the unique form hash
+		 * @param id the unique form hash
 		 */
-		async fetchFullForm(id) {
+		async fetchFullForm(id: number): Promise<void> {
 			this.isLoadingForm = true
 
 			// Cancel previous request
@@ -132,11 +194,12 @@ export default {
 			logger.debug(`Loading form ${id}`)
 
 			// Create new cancelable get request
-			const { request, cancel } = CancelableRequest(
-				async function (url, requestOptions) {
-					return axios.get(url, requestOptions)
-				},
-			)
+			const { request, cancel } = CancelableRequest(async function (
+				url: string,
+				requestOptions?: any,
+			) {
+				return axios.get(url, requestOptions)
+			})
 			// Store cancel-function
 			this.cancelFetchFullForm = cancel
 
@@ -162,7 +225,7 @@ export default {
 			}
 		},
 
-		async saveFormProperty(key) {
+		async saveFormProperty(key: string): Promise<void> {
 			try {
 				// TODO: add loading status feedback ?
 				await axios.patch(
@@ -171,7 +234,7 @@ export default {
 					}),
 					{
 						keyValuePairs: {
-							[key]: this.form[key],
+							[key]: this.form[key as keyof FormsForm],
 						},
 					},
 				)
@@ -182,4 +245,4 @@ export default {
 			}
 		},
 	},
-}
+})
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.ts
similarity index 76%
rename from src/models/AnswerTypes.js
rename to src/models/AnswerTypes.ts
index ee0370461..4249d971f 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.ts
@@ -2,6 +2,9 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { Component } from 'vue'
 
 import IconNumeric from '@material-symbols/svg-400/outlined/123.svg?raw'
 import IconArrowDownDropCircleOutline from '@material-symbols/svg-400/outlined/arrow_drop_down_circle.svg?raw'
@@ -29,44 +32,47 @@ import QuestionRanking from '../components/Questions/QuestionRanking.vue'
 import QuestionShort from '../components/Questions/QuestionShort.vue'
 import { OptionType } from './Constants.ts'
 
+export interface AnswerTypeSubtype {
+	icon: string
+	label: string
+	extraSettings: {
+		questionType: string
+	}
+}
+
+export interface AnswerTypeConfig {
+	component: Component
+	icon: string
+	label: string
+	predefined?: boolean
+	validate?: (question: unknown) => boolean
+	titlePlaceholder: string
+	createPlaceholder?: string
+	createPlaceholderRange?: string
+	submitPlaceholder?: string
+	submitPlaceholderRange?: string
+	warningInvalid: string
+	unique?: boolean
+	subtypes?: Record<string, AnswerTypeSubtype>
+	pickerType?: string
+	storageFormat?: string
+	momentFormat?: string
+}
+
 /**
- * @typedef {object} AnswerTypes
- * @property {string} multiple Checkbox Answer
- * @property {string} multiple_unique Radio buttons Answer
- * @property {string} dropdown Dropdown Answer
- * @property {string} short Short Text Answer
- * @property {string} long Long Text Answer
- * @property {string} date Date Answer
- * @property {string} datetime Date and Time Answer
- * @property {string} time Time Answer
- * @property {string} linearscale Linear Scale Answer
- * @property {string} color Color Answer
+ * !! Keep in SYNC with lib/Constants.php for props that are necessary on php !!
+ * Specifying Question-Models in a common place
+ * Further type-specific parameters are possible.
  */
-export default {
-	/**
-	 * !! Keep in SYNC with lib/Constants.php for props that are necessary on php !!
-	 * Specifying Question-Models in a common place
-	 * Further type-specific parameters are possible.
-	 *
-	 * @property {object} component The vue-component this answer-type relies on
-	 * @property {string} icon The icon corresponding to this answer-type
-	 * @property {string} label The answer-type label, that users will see as answer-type.
-	 * @property {boolean} predefined SYNC This AnswerType has/needs predefined Options.
-	 * @property {Function} validate *optional* Define conditions where this question is not ok
-	 * @property {string} titlePlaceholder The placeholder users see as empty question-title in edit-mode
-	 * @property {string} createPlaceholder *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field
-	 * @property {string} createPlaceholderRange *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field for date fields that use a date range
-	 * @property {string} submitPlaceholder *optional* The placeholder that is visible in submit-mode, to indicate a form input-field
-	 * @property {string} submitPlaceholderRange *optional* The placeholder that is visible in submit-mode, to indicate a form input-field for date fields that use a date range
-	 * @property {string} warningInvalid The warning users see in edit mode, if the question is invalid.
-	 */
-
+const answerTypes: Record<string, AnswerTypeConfig> = {
 	multiple: {
 		component: markRaw(QuestionMultiple),
 		icon: IconCheckboxOutline,
 		label: t('forms', 'Checkboxes'),
 		predefined: true,
-		validate: (question) => question.options.length > 0,
+		validate: (question: unknown) => {
+			return (question as any).options.length > 0
+		},
 
 		titlePlaceholder: t('forms', 'Checkbox question title'),
 		createPlaceholder: t('forms', 'People can submit a different answer'),
@@ -82,7 +88,9 @@ export default {
 		icon: IconRadioboxMarked,
 		label: t('forms', 'Radio buttons'),
 		predefined: true,
-		validate: (question) => question.options.length > 0,
+		validate: (question: unknown) => {
+			return (question as any).options.length > 0
+		},
 
 		titlePlaceholder: t('forms', 'Radio buttons question title'),
 		createPlaceholder: t('forms', 'People can submit a different answer'),
@@ -101,7 +109,9 @@ export default {
 		icon: IconArrowDownDropCircleOutline,
 		label: t('forms', 'Dropdown'),
 		predefined: true,
-		validate: (question) => question.options.length > 0,
+		validate: (question: unknown) => {
+			return (question as any).options.length > 0
+		},
 
 		titlePlaceholder: t('forms', 'Dropdown question title'),
 		createPlaceholder: t('forms', 'People can pick one option'),
@@ -152,13 +162,14 @@ export default {
 			},
 		},
 
-		validate: (question) => {
+		validate: (question: unknown) => {
+			const q = question as any
 			return (
-				question.options.filter(
-					(option) => option.optionType === OptionType.Column,
+				q.options.filter(
+					(option: any) => option.optionType === OptionType.Column,
 				).length > 0
-				&& question.options.filter(
-					(option) => option.optionType === OptionType.Row,
+				&& q.options.filter(
+					(option: any) => option.optionType === OptionType.Row,
 				).length > 0
 			)
 		},
@@ -272,7 +283,9 @@ export default {
 		icon: IconSwapVertical,
 		label: t('forms', 'Ranking'),
 		predefined: true,
-		validate: (question) => question.options.length > 0,
+		validate: (question: unknown) => {
+			return (question as any).options.length > 0
+		},
 
 		titlePlaceholder: t('forms', 'Ranking question title'),
 		createPlaceholder: t('forms', 'People can rank options'),
@@ -283,3 +296,5 @@ export default {
 		),
 	},
 }
+
+export default answerTypes
diff --git a/src/models/FileTypes.js b/src/models/FileTypes.ts
similarity index 79%
rename from src/models/FileTypes.js
rename to src/models/FileTypes.ts
index a41a555d6..ffb6711e9 100644
--- a/src/models/FileTypes.js
+++ b/src/models/FileTypes.ts
@@ -3,9 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { translate as t } from '@nextcloud/l10n'
+export interface FileTypeConfig {
+	label: string
+}
+
 // !! Keep in SYNC with lib/Constants.php for supported file types \OCA\Forms\Constants::EXTRA_SETTINGS_ALLOWED_FILE_TYPES !!
-export default {
+const fileTypes: Record<string, FileTypeConfig> = {
 	image: {
 		label: t('forms', 'Image'),
 	},
@@ -19,3 +22,5 @@ export default {
 		label: t('forms', 'Spreadsheet'),
 	},
 }
+
+export default fileTypes
diff --git a/src/models/ValidationTypes.js b/src/models/ValidationTypes.ts
similarity index 60%
rename from src/models/ValidationTypes.js
rename to src/models/ValidationTypes.ts
index 8832389bc..69c4c440c 100644
--- a/src/models/ValidationTypes.js
+++ b/src/models/ValidationTypes.ts
@@ -8,31 +8,26 @@ 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'
 
-/**
- * @callback ValidationFunction
- * @param {string} input User input text
- * @param {?Record<any>} options Optional setting for validation, like regex pattern.
- * @return {boolean} True if the input is valid, false otherwise
- */
-/**
- * @typedef {object} ValidationType
- * @property {string} label The validation-type label, that users will see.
- * @property {string} inputType The HTML <input> type used.
- * @property {string} errorMessage The error message shown if the validation fails.
- * @property {string|undefined} createPlaceholder *optional* A typed placeholder that is visible in edit-mode, to indicate a submission form-input field
- * @property {string|undefined} submitPlaceholder *optional* A typed placeholder that is visible in submit-mode, to indicate a form input-field
- * @property {import('vue').Component} icon The icon users will see on the input field.
- * @property {ValidationFunction} validate Function for validating user input to match the selected input type.
- */
+export type ValidationFunction = (
+	input: string,
+	options?: Record<string, unknown>,
+) => boolean
+
+export interface ValidationType {
+	label: string
+	inputType: string
+	errorMessage: string
+	createPlaceholder?: string
+	submitPlaceholder?: string
+	icon: string
+	validate: ValidationFunction
+}
 
 // !! Keep in SYNC with lib/Constants.php for supported types of input validation !!
-export default {
+const validationTypes: Record<string, ValidationType> = {
 	/**
 	 * Default, not validated, text input
-	 *
-	 * @type {ValidationType}
 	 */
 	text: {
 		icon: IconTextShort,
@@ -44,15 +39,13 @@ export default {
 
 	/**
 	 * Phone number validation
-	 *
-	 * @type {ValidationType}
 	 */
 	phone: {
 		icon: IconPhone,
 		inputType: 'tel',
 		label: t('forms', 'Phone number'),
 		// Remove common separator symbols, like space or braces, and validate rest are pure numbers
-		validate: (input) =>
+		validate: (input: string) =>
 			/^\+?[0-9]{3,}$/.test(input.replace(/[\s()-/x.]/gi, '')),
 		errorMessage: t('forms', 'The input is not a valid phone number'),
 		createPlaceholder: t('forms', 'People can enter a telephone number'),
@@ -61,15 +54,13 @@ export default {
 
 	/**
 	 * Email address validation
-	 *
-	 * @type {ValidationType}
 	 */
 	email: {
 		icon: IconEMail,
 		inputType: 'email',
 		label: t('forms', 'Email address'),
 		// Simplified email regex as a real one would be too complex, so we validate on backend
-		validate: (input) => /^[^@]+@[^@]+\.[^.]{2,}$/.test(input),
+		validate: (input: string) => /^[^@]+@[^@]+\.[^.]{2,}$/.test(input),
 		errorMessage: t('forms', 'The input is not a valid email address'),
 		createPlaceholder: t('forms', 'People can enter an email address'),
 		submitPlaceholder: t('forms', 'Enter an email address'),
@@ -77,14 +68,13 @@ export default {
 
 	/**
 	 * Numeric input validation
-	 *
-	 * @type {ValidationType}
 	 */
 	number: {
 		icon: IconNumeric,
 		inputType: 'number',
 		label: t('forms', 'Number'),
-		validate: (input) => !isNaN(input) || !isNaN(parseFloat(input)),
+		validate: (input: string) =>
+			!isNaN(Number(input)) || !isNaN(parseFloat(input)),
 		errorMessage: t('forms', 'The input is not a valid number'),
 		createPlaceholder: t('forms', 'People can enter a number'),
 		submitPlaceholder: t('forms', 'Enter a number'),
@@ -92,15 +82,19 @@ export default {
 
 	/**
 	 * Custom regular expression validation
-	 *
-	 * @type {ValidationType}
 	 */
 	regex: {
 		icon: IconRegex,
 		inputType: 'text',
 		label: t('forms', 'Custom regular expression'),
-		validate: (input, { pattern, modifiers }) =>
-			new RegExp(pattern, modifiers).test(input),
+		validate: (input: string, options?: Record<string, unknown>) => {
+			const opts = options || {}
+			const pattern = opts.pattern as string
+			const modifiers = opts.modifiers as string
+			return new RegExp(pattern, modifiers).test(input)
+		},
 		errorMessage: t('forms', 'The input does not match the required pattern'),
 	},
 }
+
+export default validationTypes
diff --git a/src/router.js b/src/router.js
deleted file mode 100644
index ec1f04acf..000000000
--- a/src/router.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { generateUrl } from '@nextcloud/router'
-import { createRouter, createWebHistory } from 'vue-router'
-
-const Create = () => import('./views/Create.vue')
-const Results = () => import('./views/Results.vue')
-const Submit = () => import('./views/Submit.vue')
-
-const router = createRouter({
-	history: createWebHistory(generateUrl('/apps/forms', '')),
-	linkActiveClass: 'active',
-	routes: [
-		{
-			path: '/',
-			name: 'root',
-		},
-		{
-			path: '/:hash',
-			redirect: { name: 'submit' },
-			name: 'formRoot',
-			props: true,
-		},
-		{
-			path: '/:hash/edit',
-			components: { default: Create },
-			name: 'edit',
-			props: { default: true },
-		},
-		{
-			path: '/:hash/results',
-			components: { default: Results },
-			name: 'results',
-			props: { default: true },
-		},
-		{
-			path: '/:hash/submit/:submissionId?',
-			components: { default: Submit },
-			name: 'submit',
-			props: { default: true },
-		},
-	],
-})
-
-export default router
diff --git a/src/router.ts b/src/router.ts
new file mode 100644
index 000000000..6d37b34f8
--- /dev/null
+++ b/src/router.ts
@@ -0,0 +1,54 @@
+/**
+ * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { RouteRecordRaw } from 'vue-router'
+
+import { generateUrl } from '@nextcloud/router'
+import { createRouter, createWebHistory } from 'vue-router'
+
+const Create = () => import('./views/Create.vue')
+const Results = () => import('./views/Results.vue')
+const Submit = () => import('./views/Submit.vue')
+const EmptyContent = () => import('./FormsEmptyContent.vue')
+
+const routes = [
+	{
+		path: '/',
+		name: 'root',
+		components: { default: EmptyContent },
+	},
+	{
+		path: '/:hash',
+		redirect: { name: 'submit' },
+		name: 'formRoot',
+		props: true,
+	},
+	{
+		path: '/:hash/edit',
+		components: { default: Create },
+		name: 'edit',
+		props: { default: true },
+	},
+	{
+		path: '/:hash/results',
+		components: { default: Results },
+		name: 'results',
+		props: { default: true },
+	},
+	{
+		path: '/:hash/submit/:submissionId?',
+		components: { default: Submit },
+		name: 'submit',
+		props: { default: true },
+	},
+]
+
+const router = createRouter({
+	history: createWebHistory(generateUrl('/apps/forms')),
+	linkActiveClass: 'active',
+	routes: routes as unknown as RouteRecordRaw[],
+})
+
+export default router
diff --git a/src/settings.js b/src/settings.ts
similarity index 100%
rename from src/settings.js
rename to src/settings.ts
diff --git a/src/submit.js b/src/submit.ts
similarity index 100%
rename from src/submit.js
rename to src/submit.ts
diff --git a/src/types/vite-modulepreload.d.ts b/src/types/vite-modulepreload.d.ts
new file mode 100644
index 000000000..a9f0f88af
--- /dev/null
+++ b/src/types/vite-modulepreload.d.ts
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+declare module 'vite/modulepreload-polyfill'
diff --git a/src/utils/CancelableRequest.js b/src/utils/CancelableRequest.ts
similarity index 58%
rename from src/utils/CancelableRequest.js
rename to src/utils/CancelableRequest.ts
index 94feb65c9..01bbdd328 100644
--- a/src/utils/CancelableRequest.js
+++ b/src/utils/CancelableRequest.ts
@@ -5,13 +5,15 @@
 
 import axios from '@nextcloud/axios'
 
+type RequestFn = (url: string, options?: unknown) => Promise<unknown>
+
 /**
  * Creates a cancelable axios 'request object'.
  *
- * @param {Function} request the axios promise request
- * @return {object}
+ * @param request the axios promise request
+ * @return
  */
-function CancelableRequest(request) {
+export default function CancelableRequest(request: RequestFn) {
 	/**
 	 * Generate an axios cancel token
 	 */
@@ -21,10 +23,10 @@ function CancelableRequest(request) {
 	/**
 	 * Execute the request
 	 *
-	 * @param {string} url the url to send the request to
-	 * @param {object} [options] optional config for the request
+	 * @param url the url to send the request to
+	 * @param [options] optional config for the request
 	 */
-	const fetch = async function (url, options) {
+	const fetch = async function (url: string, options?: Array<unknown>) {
 		return request(url, { cancelToken: source.token, ...options })
 	}
 	return {
@@ -32,5 +34,3 @@ function CancelableRequest(request) {
 		cancel: source.cancel,
 	}
 }
-
-export default CancelableRequest
diff --git a/src/utils/Logger.js b/src/utils/Logger.ts
similarity index 100%
rename from src/utils/Logger.js
rename to src/utils/Logger.ts
diff --git a/src/utils/OcsResponse2Data.js b/src/utils/OcsResponse2Data.ts
similarity index 58%
rename from src/utils/OcsResponse2Data.js
rename to src/utils/OcsResponse2Data.ts
index 346f3fdf5..344dd50f0 100644
--- a/src/utils/OcsResponse2Data.js
+++ b/src/utils/OcsResponse2Data.ts
@@ -7,11 +7,9 @@
  * Extract actual data from Axios OCS response
  * Just a small wrapper for nice code.
  *
- * @param {object} response response returned by axios
- * @return {object} The actual data out of the ocs response
+ * @param response response returned by axios
+ * @return The actual data out of the ocs response
  */
-function OcsResponse2Data(response) {
+export default function OcsResponse2Data(response: unknown): unknown {
 	return response.data.ocs.data
 }
-
-export default OcsResponse2Data
diff --git a/src/utils/RegularExpression.js b/src/utils/RegularExpression.ts
similarity index 70%
rename from src/utils/RegularExpression.js
rename to src/utils/RegularExpression.ts
index 1971c89e7..38cdb5347 100644
--- a/src/utils/RegularExpression.js
+++ b/src/utils/RegularExpression.ts
@@ -15,27 +15,23 @@ const REGEX_UNESCAPED_SLASH = /(?:^|[^\\])(?:\\\\)*\//
 /**
  * Check if a regex is valid and enclosed with delimiters
  *
- * @param {string} input regular expression
- * @return {boolean}
+ * @param input regular expression
+ * @return is expression valid
  */
-export function validateExpression(input) {
-	// empty regex passes
+export function validateExpression(input: string): boolean {
 	if (input.length === 0) {
 		return true
 	}
 
-	// Validate regex has delimters
 	if (!REGEX_WITH_DELIMITERS.test(input)) {
 		return false
 	}
 
-	// Check pattern is escaped
 	const { pattern, modifiers } = splitRegex(input)
 	if (REGEX_UNESCAPED_SLASH.test(pattern)) {
 		return false
 	}
 
-	// Check if regular expression can be compiled
 	try {
 		;(() => new RegExp(pattern, modifiers))()
 		return true
@@ -47,10 +43,10 @@ export function validateExpression(input) {
 /**
  * Split an enclosed regular expression into pattern and modifiers
  *
- * @param {string} regex regular expression with delimiters
- * @return {{pattern: string, modifiers: string}} pattern and modifiers
+ * @param regex regular expression with delimiters
+ * @return pattern and modifiers
  */
-export function splitRegex(regex) {
+export function splitRegex(regex: string): { pattern: string; modifiers: string } {
 	const [, pattern, modifiers] = regex.match(REGEX_WITH_DELIMITERS) || ['', '', '']
 	return { pattern, modifiers }
 }
diff --git a/src/utils/SetWindowTitle.js b/src/utils/SetWindowTitle.js
deleted file mode 100644
index 28e57832c..000000000
--- a/src/utils/SetWindowTitle.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/**
- * Set the Window-Title to current FormTitle including suffix.
- *
- * @param {string} formTitle Title of current form to set on window.
- */
-function SetWindowTitle(formTitle) {
-	if (formTitle === '') {
-		window.document.title = t('forms', 'Forms') + ' - ' + OC.theme.title
-	} else {
-		window.document.title =
-			formTitle + ' - ' + t('forms', 'Forms') + ' - ' + OC.theme.title
-	}
-}
-
-export default SetWindowTitle
diff --git a/src/utils/SetWindowTitle.ts b/src/utils/SetWindowTitle.ts
new file mode 100644
index 000000000..dd9bcd541
--- /dev/null
+++ b/src/utils/SetWindowTitle.ts
@@ -0,0 +1,20 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { t } from '@nextcloud/l10n'
+
+/**
+ * Set the Window-Title to current FormTitle including suffix.
+ *
+ * @param formTitle Title of current form to set on window.
+ */
+export default function SetWindowTitle(formTitle: string): void {
+	if (formTitle === '') {
+		window.document.title = t('forms', 'Forms') + ' - ' + window.OC.theme.title
+	} else {
+		window.document.title =
+			formTitle + ' - ' + t('forms', 'Forms') + ' - ' + window.OC.theme.title
+	}
+}
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 9c7e98b3c..33f841a06 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -241,12 +241,12 @@ import QuestionLong from '../components/Questions/QuestionLong.vue'
 import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
 import QuestionShort from '../components/Questions/QuestionShort.vue'
 import TopBar from '../components/TopBar.vue'
-import ViewsMixin from '../mixins/ViewsMixin.js'
-import answerTypes from '../models/AnswerTypes.js'
+import ViewsMixin from '../mixins/ViewsMixin.ts'
+import answerTypes from '../models/AnswerTypes.ts'
 import { FormState, INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
-import SetWindowTitle from '../utils/SetWindowTitle.js'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
 window.axios = axios
 
diff --git a/src/views/Results.vue b/src/views/Results.vue
index cfc61775a..856c3c49f 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -303,13 +303,13 @@ import PillMenu from '../components/PillMenu.vue'
 import ResultsSummary from '../components/Results/ResultsSummary.vue'
 import Submission from '../components/Results/Submission.vue'
 import TopBar from '../components/TopBar.vue'
-import PermissionTypes from '../mixins/PermissionTypes.js'
-import ViewsMixin from '../mixins/ViewsMixin.js'
-import answerTypes from '../models/AnswerTypes.js'
+import PermissionTypes from '../mixins/PermissionTypes.ts'
+import ViewsMixin from '../mixins/ViewsMixin.ts'
+import answerTypes from '../models/AnswerTypes.ts'
 import { FormState, INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
-import SetWindowTitle from '../utils/SetWindowTitle.js'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
 const SUPPORTED_FILE_FORMATS = {
 	ods: IconTable,
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index aec870b12..9ca8323a7 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -69,9 +69,9 @@ import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import SettingsSidebarTab from '../components/SidebarTabs/SettingsSidebarTab.vue'
 import SharingSidebarTab from '../components/SidebarTabs/SharingSidebarTab.vue'
-import PermissionTypes from '../mixins/PermissionTypes.js'
-import ViewsMixin from '../mixins/ViewsMixin.js'
-import logger from '../utils/Logger.js'
+import PermissionTypes from '../mixins/PermissionTypes.ts'
+import ViewsMixin from '../mixins/ViewsMixin.ts'
+import logger from '../utils/Logger.ts'
 
 export default {
 	// eslint-disable-next-line vue/multi-word-component-names
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 2d071caec..c06672f56 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -239,15 +239,15 @@ import QuestionLong from '../components/Questions/QuestionLong.vue'
 import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
 import QuestionShort from '../components/Questions/QuestionShort.vue'
 import TopBar from '../components/TopBar.vue'
-import ViewsMixin from '../mixins/ViewsMixin.js'
-import answerTypes from '../models/AnswerTypes.js'
+import ViewsMixin from '../mixins/ViewsMixin.ts'
+import answerTypes from '../models/AnswerTypes.ts'
 import {
 	FormState,
 	QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
-import OcsResponse2Data from '../utils/OcsResponse2Data.js'
-import SetWindowTitle from '../utils/SetWindowTitle.js'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+import SetWindowTitle from '../utils/SetWindowTitle.ts'
 
 export default {
 	// eslint-disable-next-line vue/multi-word-component-names
diff --git a/tsconfig.json b/tsconfig.json
index a2f6f9707..6794d7586 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,11 +5,12 @@
 
 {
 	"extends": "@vue/tsconfig",
-	"include": ["src/**.ts", "*.ts"],
+	"include": ["src/**/*", "*.ts"],
 	"compilerOptions": {
 		"allowJs": true,
 		"target": "ESNext",
 		"module": "ESNext",
-		"moduleResolution": "Bundler"
+		"moduleResolution": "Bundler",
+		"types": ["vite/client", "node"]
 	}
 }
diff --git a/vite.config.js b/vite.config.js
index f454bf373..7b7c0f07f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,10 +8,10 @@ import { join, resolve } from 'path'
 
 export default createAppConfig(
 	{
-		emptyContent: resolve(join('src', 'emptyContent.js')),
-		main: resolve(join('src', 'main.js')),
-		submit: resolve(join('src', 'submit.js')),
-		settings: resolve(join('src', 'settings.js')),
+		emptyContent: resolve(join('src', 'emptyContent.ts')),
+		main: resolve(join('src', 'main.ts')),
+		submit: resolve(join('src', 'submit.ts')),
+		settings: resolve(join('src', 'settings.ts')),
 	},
 	{
 		config: {