diff --git a/frontend/.eslint/legacy-files.json b/frontend/.eslint/legacy-files.json
index cefafafb56..14aeb411f4 100644
--- a/frontend/.eslint/legacy-files.json
+++ b/frontend/.eslint/legacy-files.json
@@ -96,12 +96,8 @@
     "src/shared/banner/banner.vue",
     "src/shared/empty-state/empty-state-cta.vue",
     "src/shared/empty-state/empty-state.vue",
-    "src/shared/form/array-input.vue",
     "src/shared/form/autocomplete-many-input.vue",
     "src/shared/form/autocomplete-one-input.vue",
-    "src/shared/form/form-errors.vue",
-    "src/shared/form/form-item.vue",
-    "src/shared/form/inline-select-input.vue",
     "src/shared/form/keywords-input.vue",
     "src/shared/image/image.vue",
     "src/shared/layout/page-wrapper.vue",
@@ -448,10 +444,6 @@
     "src/shared/avatar/avatar-new-badge.vue",
     "src/shared/components/globals.vue",
     "src/shared/dialog/delete-confirm-dialog.vue",
-    "src/shared/form/array-input.vue",
-    "src/shared/form/form-errors.vue",
-    "src/shared/form/form-item.vue",
-    "src/shared/form/inline-select-input.vue",
     "src/shared/image/image.vue",
     "src/shared/loading/page-loader.vue",
     "src/shared/message/toaster-container.vue",
diff --git a/frontend/src/shared/form/array-input.vue b/frontend/src/shared/form/array-input.vue
index 5f7af0df81..9778532ae5 100644
--- a/frontend/src/shared/form/array-input.vue
+++ b/frontend/src/shared/form/array-input.vue
@@ -25,36 +25,33 @@
   </article>
 </template>
 
-<script setup>
-import { computed, defineEmits, defineProps } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { required } from '@vuelidate/validators';
-import useVuelidate from '@vuelidate/core';
+import useVuelidate, { type ValidationArgs } from '@vuelidate/core';
 import AppFormItem from '@/shared/form/form-item.vue';
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-    required: true,
-  },
-  placeholder: {
-    type: String,
-    default: null,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  inputClass: {
-    type: String,
-    default: '',
-  },
-  inputLabel: {
-    type: String,
-    default: '',
-  },
+defineOptions({ name: 'AppArrayInput' });
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  placeholder?: string | null;
+  disabled?: boolean;
+  inputClass?: string;
+  inputLabel?: string;
+}>(), {
+  placeholder: null,
+  disabled: false,
+  inputClass: '',
+  inputLabel: '',
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void;
+}>();
+
+defineSlots<{
+  after?:() => unknown;
+}>();
 
 const rules = {
   required,
@@ -69,11 +66,5 @@ const model = computed({
   },
 });
 
-const $v = useVuelidate(rules, model);
-</script>
-
-<script>
-export default {
-  name: 'AppArrayInput',
-};
+const $v = useVuelidate<string, ValidationArgs>(rules, model);
 </script>
diff --git a/frontend/src/shared/form/element-change.js b/frontend/src/shared/form/element-change.ts
similarity index 51%
rename from frontend/src/shared/form/element-change.js
rename to frontend/src/shared/form/element-change.ts
index 01e857d5db..789db7e5ee 100644
--- a/frontend/src/shared/form/element-change.js
+++ b/frontend/src/shared/form/element-change.ts
@@ -1,9 +1,15 @@
-import { ref, computed } from 'vue';
+import {
+  ref, computed, type Ref, type ComputedRef,
+} from 'vue';
 
-export default function elementChangeDetector(element) {
+export default function elementChangeDetector(element: Ref<unknown>): {
+  temporaryElement: Ref<string>;
+  elementSnapshot: () => void;
+  hasElementChanged: ComputedRef<boolean>;
+} {
   const temporaryElement = ref('');
 
-  function elementSnapshot() {
+  function elementSnapshot(): void {
     temporaryElement.value = JSON.stringify(element.value);
   }
 
diff --git a/frontend/src/shared/form/form-change.js b/frontend/src/shared/form/form-change.js
deleted file mode 100644
index 54b7942b01..0000000000
--- a/frontend/src/shared/form/form-change.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ref, computed } from 'vue';
-
-export default function formChangeDetector(form) {
-  const temporaryForm = ref('');
-
-  function formSnapshot() {
-    temporaryForm.value = JSON.stringify(form);
-  }
-
-  const hasFormChanged = computed(() => temporaryForm.value !== JSON.stringify(form), { deep: true });
-
-  return {
-    temporaryForm,
-    formSnapshot,
-    hasFormChanged,
-  };
-}
diff --git a/frontend/src/shared/form/form-change.ts b/frontend/src/shared/form/form-change.ts
new file mode 100644
index 0000000000..8f99abf68f
--- /dev/null
+++ b/frontend/src/shared/form/form-change.ts
@@ -0,0 +1,23 @@
+import {
+  ref, computed, type Ref, type ComputedRef,
+} from 'vue';
+
+export default function formChangeDetector(form: object): {
+  temporaryForm: Ref<string>;
+  formSnapshot: () => void;
+  hasFormChanged: ComputedRef<boolean>;
+} {
+  const temporaryForm = ref('');
+
+  function formSnapshot(): void {
+    temporaryForm.value = JSON.stringify(form);
+  }
+
+  const hasFormChanged = computed(() => temporaryForm.value !== JSON.stringify(form));
+
+  return {
+    temporaryForm,
+    formSnapshot,
+    hasFormChanged,
+  };
+}
diff --git a/frontend/src/shared/form/form-errors.vue b/frontend/src/shared/form/form-errors.vue
index dbcdae91cd..eed6c01fc5 100644
--- a/frontend/src/shared/form/form-errors.vue
+++ b/frontend/src/shared/form/form-errors.vue
@@ -10,40 +10,29 @@
   </div>
 </template>
 
-<script setup>
-import { computed, defineProps } from 'vue';
+<script setup lang="ts">
+import { computed, unref } from 'vue';
+import type { ErrorObject } from '@vuelidate/core';
 
-const props = defineProps({
-  validation: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  errorMessages: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  hideDefault: {
-    required: false,
-    type: Boolean,
-    default: false,
-  },
-  errorIcon: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  errorClass: {
-    required: false,
-    type: String,
-    default: '',
-  },
+defineOptions({ name: 'AppFormErrors' });
+
+const props = withDefaults(defineProps<{
+  validation?: { $errors?: ErrorObject[] };
+  errorMessages?: Record<string, string>;
+  hideDefault?: boolean;
+  errorIcon?: string;
+  errorClass?: string;
+}>(), {
+  validation: () => ({}),
+  errorMessages: () => ({}),
+  hideDefault: false,
+  errorIcon: '',
+  errorClass: '',
 });
 
 const errors = computed(() => props.validation?.$errors || []);
 
-const errorMessage = (error) => {
+const errorMessage = (error: ErrorObject) => {
   const prop = `${error.$property}-${error.$validator}`;
   if (
     props.errorMessages
@@ -52,14 +41,8 @@ const errorMessage = (error) => {
     return props.errorMessages[prop];
   }
   if (!props.hideDefault) {
-    return error.$message;
+    return unref(error.$message);
   }
   return '';
 };
 </script>
-
-<script>
-export default {
-  name: 'AppFormErrors',
-};
-</script>
diff --git a/frontend/src/shared/form/form-item.vue b/frontend/src/shared/form/form-item.vue
index abd4ea84ef..a62b3e57bc 100644
--- a/frontend/src/shared/form/form-item.vue
+++ b/frontend/src/shared/form/form-item.vue
@@ -33,79 +33,54 @@
   </div>
 </template>
 
-<script setup>
-import { computed } from 'vue';
+<script setup lang="ts">
+import { computed, unref } from 'vue';
+import type { ErrorObject } from '@vuelidate/core';
 
-const props = defineProps({
-  validation: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  label: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  formId: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  required: {
-    required: false,
-    type: Boolean,
-    default: false,
-  },
-  errorMessages: {
-    required: false,
-    type: Object,
-    default: () => ({}),
-  },
-  filterErrors: {
-    required: false,
-    type: Array,
-    default: () => null,
-  },
-  showError: {
-    required: false,
-    type: Boolean,
-    default: true,
-  },
-  errorIcon: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  errorClass: {
-    required: false,
-    type: String,
-    default: '',
-  },
+defineOptions({ name: 'AppFormItem' });
+
+const props = withDefaults(defineProps<{
+  validation?: { $errors?: ErrorObject[] };
+  label?: string;
+  formId?: string;
+  required?: boolean;
+  errorMessages?: Record<string, string>;
+  filterErrors?: string[] | null;
+  showError?: boolean;
+  errorIcon?: string;
+  errorClass?: string;
+}>(), {
+  validation: () => ({}),
+  label: '',
+  formId: '',
+  required: false,
+  errorMessages: () => ({}),
+  filterErrors: null,
+  showError: true,
+  errorIcon: '',
+  errorClass: '',
 });
 
+defineSlots<{
+  default?:() => unknown;
+}>();
+
 const errors = computed(() => props.validation?.$errors || []);
 
-const enabledError = (errors) => {
+const enabledError = (errors: ErrorObject[]) => {
   if (props.filterErrors && props.filterErrors.length > 0 && errors.length > 0) {
     return props.filterErrors.includes(errors[0].$validator);
   }
   return errors.length > 0;
 };
 
-const errorMessage = (error) => {
+const errorMessage = (error: ErrorObject) => {
   if (
     props.errorMessages
     && props.errorMessages[error.$validator]
   ) {
     return props.errorMessages[error.$validator];
   }
-  return error.$message;
-};
-</script>
-
-<script>
-export default {
-  name: 'AppFormItem',
+  return unref(error.$message);
 };
 </script>
diff --git a/frontend/src/shared/form/inline-select-input.vue b/frontend/src/shared/form/inline-select-input.vue
index d00f1dd8d6..a31f92ddae 100644
--- a/frontend/src/shared/form/inline-select-input.vue
+++ b/frontend/src/shared/form/inline-select-input.vue
@@ -50,39 +50,38 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
-  defineProps,
-  defineEmits,
   ref,
   computed,
 } from 'vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Array],
-    default: null,
-  },
-  options: {
-    type: Array,
-    default: () => {},
-  },
-  prefix: {
-    type: String,
-    default: null,
-  },
-  popperClass: {
-    type: String,
-    default: null,
-  },
-  popperPlacement: {
-    type: String,
-    default: 'top-start',
-  },
+interface InlineSelectOption {
+  value: string | number;
+  label: string;
+  description?: string;
+}
+
+defineOptions({ name: 'AppInlineSelectInput' });
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | number | unknown[] | null;
+  options?: InlineSelectOption[];
+  prefix?: string | null;
+  popperClass?: string | null;
+  popperPlacement?: string;
+}>(), {
+  modelValue: null,
+  options: () => [],
+  prefix: null,
+  popperClass: null,
+  popperPlacement: 'top-start',
 });
 
-const emit = defineEmits(['update:modelValue', 'change']);
+const emit = defineEmits<{(e: 'update:modelValue', value: string | number | unknown[] | null): void;
+  (e: 'change', value: string | number | unknown[] | null): void;
+}>();
 
 const model = computed({
   get() {
@@ -103,20 +102,14 @@ const modelLabel = computed(() => props.options.find((o) => o.value === model.va
   ?.label);
 
 const dropdownExpanded = ref(false);
-const handleDropdownVisibleChange = (value) => {
+const handleDropdownVisibleChange = (value: boolean) => {
   dropdownExpanded.value = value;
 };
-const handleOptionClick = (option) => {
+const handleOptionClick = (option: InlineSelectOption) => {
   model.value = option.value;
 };
 </script>
 
-<script>
-export default {
-  name: 'AppInlineSelectInput',
-};
-</script>
-
 <style lang="scss">
 .inline-select-input {
   @apply leading-none;
diff --git a/frontend/typecheck-baseline.json b/frontend/typecheck-baseline.json
index 81f9a8674a..e6771df553 100644
--- a/frontend/typecheck-baseline.json
+++ b/frontend/typecheck-baseline.json
@@ -1 +1 @@
-{ "errors": 538 }
+{ "errors": 534 }