fix: createNewTask typing

package.json

@@ -23,6 +23,7 @@
     "@sentry/tracing": "7.7.0",
     "@sentry/vue": "7.7.0",
     "@types/is-touch-device": "1.0.0",
+    "@types/lodash.clonedeep": "^4.5.7",
     "@types/sortablejs": "1.13.0",
     "@vueuse/core": "8.9.4",
     "@vueuse/router": "8.9.4",

src/App.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, watch, Ref} from 'vue'
+import {computed, watch, type Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'

src/components/base/BaseButton.vue

@@ -12,12 +12,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default defineComponent({
-  inheritAttrs: false,
-})
+export default { inheritAttrs: false }
 </script>
 
 <script lang="ts" setup>

src/components/date/datemathHelp.vue

@@ -110,10 +110,10 @@
 </template>
 
 <script lang="ts" setup>
-import {format} from 'date-fns'
+import { formatDate } from '@/helpers/time/formatDate'
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const exampleDate = format(new Date(), 'yyyy-MM-dd')
+const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
 </script>
 
 <style scoped>

src/components/date/datepickerWithRange.vue

@@ -71,7 +71,7 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'

src/components/home/MenuButton.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

src/components/home/TheNavigation.vue

@@ -88,11 +88,11 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useRouter} from 'vue-router'
 
 import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
-import Rights from '@/models/constants/rights.json'
+import {RIGHTS as Rights} from '@/models/constants/rights'
 
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -103,6 +103,8 @@ import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
+import {getListTitle} from '@/helpers/getListTitle'
+
 const store = useStore()
 
 const userInfo = computed(() => store.state.auth.info)

src/components/home/contentAuth.vue

@@ -60,8 +60,8 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
-import {useStore} from 'vuex'
+import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
+import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
 

src/components/home/contentLinkShare.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'

src/components/home/navigation.vue

@@ -141,9 +141,9 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import draggable from 'zhyswan-vuedraggable'
-import {SortableEvent} from 'sortablejs'
+import type {SortableEvent} from 'sortablejs'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -154,9 +154,10 @@ import Logo from '@/components/home/Logo.vue'
 import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
+import {getListTitle} from '@/helpers/getListTitle'
 import {useEventListener} from '@vueuse/core'
-import NamespaceModel from '@/models/namespace'
-import ListModel from '@/models/list'
+import type { IList } from '@/models/list'
+import type { INamespace } from '@/models/namespace'
 
 const drag = ref(false)
 const dragOptions = {
@@ -171,7 +172,7 @@ const loading = computed(() => store.state.loading && store.state.loadingModule
 
 
 const namespaces = computed(() => {
-	return (store.state.namespaces.namespaces as NamespaceModel[]).filter(n => !n.isArchived)
+	return (store.state.namespaces.namespaces as INamespace[]).filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@@ -194,7 +195,7 @@ useEventListener('resize', resize)
 onMounted(() => resize())
 
 
-function toggleFavoriteList(list: ListModel) {
+function toggleFavoriteList(list: IList) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {
@@ -208,14 +209,14 @@ function resize() {
 	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
 }
 
-function toggleLists(namespaceId: number) {
+function toggleLists(namespaceId: INamespace['id']) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }
 
-const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
+	const namespaces = await store.dispatch('namespaces/loadNamespaces') as INamespace[]
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@@ -223,7 +224,7 @@ onBeforeMount(async () => {
 	})
 })
 
-function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
+function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 	// This is a bit hacky: since we do have to filter out the archived items from the list
 	// for vue draggable updating it is not as simple as replacing it.
 	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
@@ -240,7 +241,7 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
 	})
 }
 
-const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
 
 async function saveListPosition(e: SortableEvent) {
 	if (!e.newIndex) return

src/components/input/button.vue

@@ -18,15 +18,11 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-	name: 'x-button',
-})
+export default { name: 'x-button' }
 </script>
 
 <script setup lang="ts">
-import {computed, useSlots, PropType} from 'vue'
+import {computed, useSlots, type PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 const BUTTON_TYPES_MAP =  Object.freeze({

src/components/input/datepicker.vue

@@ -97,7 +97,7 @@ import {i18n} from '@/i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-import {format} from 'date-fns'
+import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@@ -170,11 +170,12 @@ export default defineComponent({
 					return ''
 				}
 
-				return format(this.date, 'yyy-LL-dd H:mm')
+				return formatDate(this.date, 'yyy-LL-dd H:mm')
 			},
 		},
 	},
 	methods: {
+		formatDateShort,
 		setDateValue(newVal) {
 			if (newVal === null) {
 				this.date = null
@@ -233,7 +234,7 @@ export default defineComponent({
 			const interval = calculateDayInterval(date)
 			const newDate = new Date()
 			newDate.setDate(newDate.getDate() + interval)
-			return format(newDate, 'E')
+			return formatDate(newDate, 'E')
 		},
 	},
 })

src/components/input/fancycheckbox.vue

@@ -53,7 +53,7 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		updateData(checked) {
+		updateData(checked: boolean) {
 			this.checked = checked
 			this.$emit('update:modelValue', checked)
 			this.$emit('change', checked)

src/components/list/list-settings-dropdown.vue

@@ -76,24 +76,24 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
-import {useStore} from 'vuex'
+import {ref, computed, watchEffect, type PropType} from 'vue'
+import {useStore} from '@/store'
 
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
-import ListModel from '@/models/list'
-import SubscriptionModel from '@/models/subscription'
+import type {IList} from '@/models/list'
+import type { ISubscription } from '@/models/subscription'
 
 const props = defineProps({
 	list: {
-		type: ListModel,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 })
 
-const subscription = ref<SubscriptionModel | null>(null)
+const subscription = ref<ISubscription | null>(null)
 watchEffect(() => {
 	subscription.value = props.list.subscription ?? null
 })

src/components/list/partials/filters.vue

@@ -186,8 +186,8 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import DatepickerWithRange from '@/components/date/datepickerWithRange'
-import Fancycheckbox from '../../input/fancycheckbox'
+import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
 import {includesById} from '@/helpers/utils'
 import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'

src/components/list/partials/list-card.vue

@@ -36,16 +36,16 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType, ref, watch} from 'vue'
-import {useStore} from 'vuex'
+import {type PropType, ref, watch} from 'vue'
+import {useStore} from '@/store'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
-import ListModel from '@/models/list'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import type { IList } from '@/models/list'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -53,7 +53,7 @@ const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
-		type: Object as PropType<ListModel>,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 	showArchived: {
@@ -86,7 +86,7 @@ async function loadBackground() {
 
 const store = useStore()
 
-function toggleFavoriteList(list: ListModel) {
+function toggleFavoriteList(list: IList) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {

src/components/misc/Done.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 type Variants = 'default' | 'small'
 
 defineProps({

src/components/misc/keyboard-shortcuts/index.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Shortcut from '@/components/misc/shortcut.vue'
 import Message from '@/components/misc/message.vue'

src/components/misc/legal.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

src/components/misc/message.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, PropType} from 'vue'
+import {computed, type PropType} from 'vue'
 
 const TEXT_ALIGN_MAP = Object.freeze({
 	left: '',

src/components/misc/no-auth-wrapper.vue

@@ -30,7 +30,7 @@ import Logo from '@/components/home/Logo.vue'
 import Message from '@/components/misc/message.vue'
 import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {computed} from 'vue'
 import {useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'

src/components/misc/ready.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/api-config.vue'

src/components/misc/subscription.vue

@@ -32,27 +32,32 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, shallowRef} from 'vue'
+import {computed, shallowRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 
 import SubscriptionService from '@/services/subscription'
-import SubscriptionModel from '@/models/subscription'
+import SubscriptionModel, { type ISubscription } from '@/models/subscription'
 
 import {success} from '@/message'
 
-interface Props {
-	entity: string
-	entityId: number
-	subscription: SubscriptionModel | null
-	type?: 'button' | 'dropdown' | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	subscription: null,
-	type: 'button',
+const props = defineProps({
+	entity: String,
+	entityId: Number,
+	isButton: {
+		type: Boolean,
+		default: true,
+	},
+	subscription: {
+		type: Object as PropType<ISubscription>,
+		default: null,
+	},
+	type: {
+		type: String as PropType<'button' | 'dropdown' | 'null'>,
+		default: 'button',
+	},
 })
 
 const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)

src/components/namespace/namespace-settings-dropdown.vue

@@ -54,15 +54,16 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+import {ref, onMounted, type PropType} from 'vue'
 
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import type { INamespace } from '@/models/namespace'
 
 const props = defineProps({
 	namespace: {
-		type: Object, // NamespaceModel
+		type: Object as PropType<INamespace>,
 		required: true,
 	},
 })

src/components/notifications/notifications.vue

@@ -30,7 +30,7 @@
 								{{ n.toText(userInfo) }}
 							</BaseButton>
 						</div>
-						<span class="created" v-tooltip="formatDate(n.created)">
+						<span class="created" v-tooltip="formatDateLong(n.created)">
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
@@ -52,17 +52,18 @@ import {computed, onMounted, onUnmounted, ref} from 'vue'
 import NotificationService from '@/services/notification'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
-import names from '@/models/constants/notificationNames.json'
+import { NOTIFICATION_NAMES as names, type INotification} from '@/models/notification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useRouter} from 'vue-router'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
 const store = useStore()
 const router = useRouter()
 
-const allNotifications = ref([])
+const allNotifications = ref<INotification[]>([])
 const showNotifications = ref(false)
 const popup = ref(null)
 

src/components/sharing/linkSharing.vue

@@ -177,16 +177,17 @@
 
 <script setup lang="ts">
 import {ref, watch, computed, shallowReactive} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
-import RIGHTS from '@/models/constants/rights.json'
-import LinkShareModel from '@/models/linkShare'
+import {RIGHTS} from '@/models/constants/rights'
+import LinkShareModel, { type ILinkShare } from '@/models/linkShare'
 
 import LinkShareService from '@/services/linkShare'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
+import type { IList } from '@/models/list'
 
 const props = defineProps({
 	listId: {
@@ -197,7 +198,7 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const linkShares = ref([])
+const linkShares = ref<ILinkShare[]>([])
 const linkShareService = shallowReactive(new LinkShareService())
 const selectedRight = ref(RIGHTS.READ)
 const name = ref('')
@@ -216,7 +217,7 @@ watch(
 const store = useStore()
 const frontendUrl = computed(() => store.state.config.frontendUrl)
 
-async function load(listId) {
+async function load(listId: IList['id']) {
 	// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
 	if (listId === 0) {
 		return
@@ -225,7 +226,7 @@ async function load(listId) {
 	linkShares.value = await linkShareService.getAll({listId})
 }
 
-async function add(listId) {
+async function add(listId: IList['id']) {
 	const newLinkShare = new LinkShareModel({
 		right: selectedRight.value,
 		listId,
@@ -241,7 +242,7 @@ async function add(listId) {
 	await load(listId)
 }
 
-async function remove(listId) {
+async function remove(listId: IList['id']) {
 	try {
 		await linkShareService.delete(new LinkShareModel({
 			id: linkIdToDelete.value,

src/components/sharing/userTeam.vue

@@ -133,32 +133,34 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({name: 'userTeamShare'})
+export default {name: 'userTeamShare'}
 </script>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, ShallowReactive, Ref} from 'vue'
+import {ref, reactive, computed, shallowReactive, type ShallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
-import UserNamespaceModel from '@/models/userNamespace'
-import UserListModel from '@/models/userList'
+import UserNamespaceModel, { type IUserNamespace } from '@/models/userNamespace'
+
 import UserListService from '@/services/userList'
+import UserListModel, { type IUserList } from '@/models/userList'
+
 import UserService from '@/services/user'
-import UserModel from '@/models/user'
+import UserModel, { type IUser } from '@/models/user'
 
 import TeamNamespaceService from '@/services/teamNamespace'
-import TeamNamespaceModel from '@/models/teamNamespace'
-import TeamListModel from '@/models/teamList'
-import TeamListService from '@/services/teamList'
-import TeamService from '@/services/team'
-import TeamModel from '@/models/team'
+import TeamNamespaceModel, { type ITeamNamespace } from '@/models/teamNamespace'
 
-import RIGHTS from '@/models/constants/rights.json'
+import TeamListService from '@/services/teamList'
+import TeamListModel, { type ITeamList } from '@/models/teamList'
+
+import TeamService from '@/services/team'
+import TeamModel, { type ITeam } from '@/models/team'
+
+import {RIGHTS} from '@/models/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
@@ -185,10 +187,10 @@ const props = defineProps({
 const {t} = useI18n({useScope: 'global'})
 
 // This user service is either a userNamespaceService or a userListService, depending on the type we are using
-let stuffService: ShallowReactive<UserNamespaceService | UserListService | TeamListService | TeamNamespaceService>
-let stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
-let searchService: ShallowReactive<UserService | TeamService>
-let sharable: Ref<UserModel | TeamModel>
+let stuffService: UserNamespaceService | UserListService | TeamListService | TeamNamespaceService
+let stuffModel: IUserNamespace | IUserList | ITeamList | ITeamNamespace
+let searchService: UserService | TeamService
+let sharable: Ref<IUser | ITeam>
 
 const searchLabel = ref('')
 const selectedRight = ref({})
@@ -355,7 +357,7 @@ async function toggleType(sharable) {
 const found = ref([])
 
 const currentUserId = computed(() => store.state.auth.info.id)
-async function find(query) {
+async function find(query: string) {
 	if (query === '') {
 		found.value = []
 		return

src/components/tasks/add-task.vue

@@ -43,8 +43,8 @@
 <script setup lang="ts">
 import {ref, watch, unref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from 'vuex'
-import {tryOnMounted, debouncedWatch, useWindowSize, MaybeRef} from '@vueuse/core'
+import {useStore} from '@/store'
+import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
 
 import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
@@ -200,7 +200,7 @@ function handleEnter(e: KeyboardEvent) {
 }
 
 function focusTaskInput() {
-	newTaskInput.value.focus()
+	newTaskInput.value?.focus()
 }
 
 defineExpose({

src/components/tasks/edit-task.vue

@@ -76,14 +76,14 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
+import {ref, reactive, computed, shallowReactive, watch, nextTick, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import TaskService from '@/services/task'
-import TaskModel from '@/models/task'
+import TaskModel, { type ITask } from '@/models/task'
 import EditLabels from './partials/editLabels.vue'
 import Reminders from './partials/reminders.vue'
 import ColorPicker from '../input/colorPicker.vue'
@@ -95,7 +95,7 @@ const router = useRouter()
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })
@@ -103,7 +103,7 @@ const props = defineProps({
 const taskService = shallowReactive(new TaskService())
 
 const editorActive = ref(false)
-let taskEditTask: TaskModel | undefined
+let taskEditTask: ITask | undefined
 
 
 // FIXME: this initialization should not be necessary here 

src/components/tasks/gantt-component.vue

@@ -175,19 +175,20 @@
 import {defineComponent} from 'vue'
 
 import VueDragResize from 'vue-drag-resize'
-import EditTask from './edit-task'
+import EditTask from './edit-task.vue'
 
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
-import priorities from '../../models/constants/priorities'
-import PriorityLabel from './partials/priorityLabel'
+import {PRIORITIES as priorities} from '@/models/constants/priorities'
+import PriorityLabel from './partials/priorityLabel.vue'
 import TaskCollectionService from '../../services/taskCollection'
 import {mapState} from 'vuex'
-import Rights from '../../models/constants/rights.json'
+import {RIGHTS as Rights} from '@/models/constants/rights'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {formatDate} from '@/helpers/time/formatDate'
 
 export default defineComponent({
 	name: 'GanttChart',
@@ -439,7 +440,7 @@ export default defineComponent({
 		formatMonthAndYear(year, month) {
 			month = month < 10 ? '0' + month : month
 			const date = new Date(`${year}-${month}-01`)
-			return this.format(date, 'MMMM, yyyy')
+			return formatDate(date, 'MMMM, yyyy')
 		},
 	},
 })

src/components/tasks/partials/attachments.vue

@@ -39,7 +39,7 @@
 				<div class="info">
 					<p class="attachment-info-meta">
 						<i18n-t keypath="task.attachment.createdBy">
-							<span v-tooltip="formatDate(a.created)">
+							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
 							<user
@@ -147,14 +147,16 @@
 import {defineComponent} from 'vue'
 
 import AttachmentService from '../../../services/attachment'
-import AttachmentModel from '../../../models/attachment'
-import User from '../../misc/user'
+import AttachmentModel, { type IAttachment } from '@/models/attachment'
+import User from '@/components/misc/user.vue'
 import {mapState} from 'vuex'
 
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
+import {formatDate, formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
 
 import BaseButton from '@/components/base/BaseButton'
+import type { IFile } from '@/models/file'
 
 export default defineComponent({
 	name: 'attachments',
@@ -190,7 +192,7 @@ export default defineComponent({
 	setup(props) {
 		const copy = useCopyToClipboard()
 
-		function copyUrl(attachment: AttachmentModel) {
+		function copyUrl(attachment: IAttachment) {
 			copy(generateAttachmentUrl(props.taskId, attachment.id))
 		}
 
@@ -229,7 +231,11 @@ export default defineComponent({
 		})
 	},
 	methods: {
-		downloadAttachment(attachment) {
+		formatDate,
+		formatDateSince,
+		formatDateLong,
+
+		downloadAttachment(attachment: IAttachment) {
 			this.attachmentService.download(attachment)
 		},
 		uploadNewAttachment() {
@@ -239,7 +245,7 @@ export default defineComponent({
 
 			this.uploadFiles(this.$refs.files.files)
 		},
-		uploadFiles(files) {
+		uploadFiles(files: IFile[]) {
 			uploadFiles(this.attachmentService, this.taskId, files)
 		},
 		async deleteAttachment() {

src/components/tasks/partials/checklist-summary.vue

@@ -10,15 +10,15 @@
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, type PropType} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {getChecklistStatistics} from '@/helpers/checklistFromText'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/models/task'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

src/components/tasks/partials/comments.vue

@@ -34,12 +34,12 @@
 							width="20"
 						/>
 						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
-						<span v-tooltip="formatDate(c.created)" class="has-text-grey">
+						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
 						<span
 							v-if="+new Date(c.created) !== +new Date(c.updated)"
-							v-tooltip="formatDate(c.updated)"
+							v-tooltip="formatDateLong(c.updated)"
 						>
 							· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
 						</span>
@@ -153,16 +153,18 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '@/services/taskComment'
-import TaskCommentModel from '@/models/taskComment'
+import TaskCommentModel, { type ITaskComment } from '@/models/taskComment'
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
+import type { ITask } from '@/models/task'
 const props = defineProps({
 	taskId: {
 		type: Number,
@@ -176,7 +178,7 @@ const props = defineProps({
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
-const comments = ref<TaskCommentModel[]>([])
+const comments = ref<ITaskComment[]>([])
 
 const showDeleteModal = ref(false)
 const commentToDelete = reactive(new TaskCommentModel())
@@ -186,8 +188,8 @@ const commentEdit = reactive(new TaskCommentModel())
 
 const newComment = reactive(new TaskCommentModel())
 
-const saved = ref(null)
-const saving = ref(null)
+const saved = ref<ITask['id'] | null>(null)
+const saving = ref<ITask['id'] | null>(null)
 
 const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
 const currentUserId = computed(() => store.state.auth.info.id)
@@ -213,7 +215,7 @@ function attachmentUpload(...args) {
 
 const taskCommentService = shallowReactive(new TaskCommentService())
 
-async function loadComments(taskId) {
+async function loadComments(taskId: ITask['id']) {
 	if (!enabled.value) {
 		return
 	}
@@ -257,12 +259,12 @@ async function addComment() {
 	}
 }
 
-function toggleEdit(comment: TaskCommentModel) {
+function toggleEdit(comment: ITaskComment) {
 	isCommentEdit.value = !isCommentEdit.value
 	Object.assign(commentEdit, comment)
 }
 
-function toggleDelete(commentId) {
+function toggleDelete(commentId: ITaskComment['id']) {
 	showDeleteModal.value = !showDeleteModal.value
 	commentToDelete.id = commentId
 }
@@ -292,7 +294,7 @@ async function editComment() {
 	}
 }
 
-async function deleteComment(commentToDelete: TaskCommentModel) {
+async function deleteComment(commentToDelete: ITaskComment) {
 	try {
 		await taskCommentService.delete(commentToDelete)
 		const index = comments.value.findIndex(({id}) => id === commentToDelete.id)

src/components/tasks/partials/createdUpdated.vue

@@ -1,6 +1,6 @@
 <template>
 	<p class="created">
-		<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
 			<i18n-t keypath="task.detail.created">
 				<span>{{ formatDateSince(task.created) }}</span>
 				{{ task.createdBy.getDisplayName() }}
@@ -27,13 +27,13 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, toRefs} from 'vue'
-import TaskModel from '@/models/task'
-import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {computed, toRefs, type PropType} from 'vue'
+import type { ITask } from '@/models/task'
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

src/components/tasks/partials/date-table-cell.vue

@@ -1,12 +1,14 @@
 <template>
-	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
-		<time :datetime="date ? formatISO(date) : null">
+	<td v-tooltip="+date === 0 ? '' : formatDateLong(date)">
+		<time :datetime="date ? formatISO(date) : undefined">
 			{{ +date === 0 ? '-' : formatDateSince(date) }}
 		</time>
 	</td>
 </template>
 
 <script setup lang="ts">
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+
 defineProps({
 	date: {
 		type: Date,

src/components/tasks/partials/defer-task.vue

@@ -38,17 +38,17 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
-import {useStore} from 'vuex'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
-import TaskModel from '@/models/task'
+import { type ITask } from '@/models/task'
 
 const props = defineProps({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })
@@ -58,7 +58,7 @@ const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
 const taskService = shallowReactive(new TaskService())
-const task = ref<TaskModel>()
+const task = ref<ITask>()
 
 // We're saving the due date seperately to prevent null errors in very short periods where the task is null.
 const dueDate = ref<Date>()

src/components/tasks/partials/description.vue

@@ -30,30 +30,31 @@
 </template>
 
 <script setup lang="ts">
-import {ref,computed, watch} from 'vue'
-import {useStore} from 'vuex'
+import {ref,computed, watch, type PropType} from 'vue'
+import {useStore} from '@/store'
 
 import Editor from '@/components/input/AsyncEditor'
 
-import TaskModel from '@/models/task'
+import type { ITask } from '@/models/task'
 
 
 const props = defineProps({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	attachmentUpload: {
 		required: true,
 	},
 	canWrite: {
+		type: Boolean,
 		required: true,
 	},
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const task = ref<TaskModel>({description: ''})
+const task = ref<ITask>({description: ''})
 const saved = ref(false)
 
 // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.

src/components/tasks/partials/editAssignees.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, watch, PropType} from 'vue'
-import {useStore} from 'vuex'
+import {ref, shallowReactive, watch, type PropType} from 'vue'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
@@ -37,9 +37,9 @@ import Multiselect from '@/components/input/multiselect.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
-import UserModel from '@/models/user'
 import ListUserService from '@/services/listUsers'
 import {success} from '@/message'
+import type { IUser } from '@/models/user'
 
 const props = defineProps({
 		taskId: {
@@ -54,7 +54,7 @@ const props = defineProps({
 			default: false,
 		},
 		modelValue: {
-			type: Array as PropType<UserModel[]>,
+			type: Array as PropType<IUser[]>,
 			default: () => [],
 		},
 	})
@@ -65,7 +65,7 @@ const {t} = useI18n({useScope: 'global'})
 
 const listUserService = shallowReactive(new ListUserService())
 const foundUsers = ref([])
-const assignees = ref<UserModel[]>([])
+const assignees = ref<IUser[]>([])
 
 watch(
 	() => props.modelValue,
@@ -78,13 +78,13 @@ watch(
 	},
 )
 
-async function addAssignee(user: UserModel) {
+async function addAssignee(user: IUser) {
 	await store.dispatch('tasks/addAssignee', {user: user, taskId: props.taskId})
 	emit('update:modelValue', assignees.value)
 	success({message: t('task.assignee.assignSuccess')})
 }
 
-async function removeAssignee(user: UserModel) {
+async function removeAssignee(user: IUser) {
 	await store.dispatch('tasks/removeAssignee', {user: user, taskId: props.taskId})
 
 	// Remove the assignee from the list

src/components/tasks/partials/editLabels.vue

@@ -39,11 +39,11 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, computed, shallowReactive, watch} from 'vue'
-import {useStore} from 'vuex'
+import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
-import LabelModel from '@/models/label'
+import LabelModel, { type ILabel } from '@/models/label'
 import LabelTaskService from '@/services/labelTask'
 import {success} from '@/message'
 
@@ -52,7 +52,7 @@ import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
 	modelValue: {
-		type: Array as PropType<LabelModel[]>,
+		type: Array as PropType<ILabel[]>,
 		default: () => [],
 	},
 	taskId: {
@@ -71,7 +71,7 @@ const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
 const labelTaskService = shallowReactive(new LabelTaskService())
-const labels = ref<LabelModel[]>([])
+const labels = ref<ILabel[]>([])
 const query = ref('')
 
 watch(
@@ -92,7 +92,7 @@ function findLabel(newQuery: string) {
 	query.value = newQuery
 }
 
-async function addLabel(label: LabelModel, showNotification = true) {
+async function addLabel(label: ILabel, showNotification = true) {
 	const bubble = () => {
 		emit('update:modelValue', labels.value)
 		emit('change', labels.value)
@@ -110,14 +110,14 @@ async function addLabel(label: LabelModel, showNotification = true) {
 	}
 }
 
-async function removeLabel(label: LabelModel) {
+async function removeLabel(label: ILabel) {
 	if (props.taskId !== 0) {
 		await store.dispatch('tasks/removeLabel', {label, taskId: props.taskId})
 	}
 
 	for (const l in labels.value) {
 		if (labels.value[l].id === label.id) {
-			labels.value.splice(l, 1)
+			labels.value.splice(l, 1) // FIXME: l should be index
 		}
 	}
 	emit('update:modelValue', labels.value)

src/components/tasks/partials/heading.vue

@@ -32,18 +32,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {ref, computed, type PropType} from 'vue'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Done from '@/components/misc/Done.vue'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/models/task'
 import { useRouter } from 'vue-router'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	canWrite: {

src/components/tasks/partials/kanban-card.vue

@@ -24,7 +24,7 @@
 			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
 			class="due-date"
 			v-if="task.dueDate > 0"
-			v-tooltip="formatDate(task.dueDate)">
+			v-tooltip="formatDateLong(task.dueDate)">
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
@@ -66,16 +66,17 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, type PropType} from 'vue'
 
 import {playPop} from '../../../helpers/playPop'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import User from '../../../components/misc/user'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
+import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels'
-import ChecklistSummary from './checklist-summary'
-import {TASK_DEFAULT_COLOR} from '@/models/task'
+import Labels from '../../../components/tasks/partials/labels.vue'
+import ChecklistSummary from './checklist-summary.vue'
+import {TASK_DEFAULT_COLOR, type ITask} from '@/models/task'
 
+import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 export default defineComponent({
@@ -95,6 +96,7 @@ export default defineComponent({
 	},
 	props: {
 		task: {
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		loading: {
@@ -111,8 +113,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		formatDateLong,
+		formatISO,
+		formatDateSince,
 		colorIsDark,
-		async toggleTaskDone(task) {
+		async toggleTaskDone(task: ITask) {
 			this.loadingInternal = true
 			try {
 				const done = !task.done

src/components/tasks/partials/labels.vue

@@ -11,8 +11,12 @@
 </template>
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ILabel } from '@/models/label'
+
 defineProps({
 	labels: {
+		type: Array as PropType<ILabel[]>,
 		required: true,
 	},
 })

src/components/tasks/partials/listSearch.vue

@@ -1,5 +1,5 @@
 <template>
-	<multiselect
+	<Multiselect
 		class="control is-expanded"
 		:placeholder="$t('list.search')"
 		@search="findLists"
@@ -13,23 +13,20 @@
 			<span class="list-namespace-title search-result">{{ namespace(props.option.namespaceId) }} ></span>
 			{{ props.option.title }}
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
-import ListModel from '@/models/list'
+import ListModel, { type IList } from '@/models/list'
 import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
 	modelValue: {
-		type: Object as PropType<ListModel>,
-		validator(value) {
-			return value instanceof ListModel
-		},
+		type: Object as PropType<IList>,
 		required: false,
 	},
 })
@@ -38,7 +35,7 @@ const emit = defineEmits(['update:modelValue'])
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const list = reactive<ListModel>(new ListModel())
+const list: IList = reactive(new ListModel())
 
 watch(
 	() => props.modelValue,
@@ -57,7 +54,7 @@ function findLists(query: string) {
 	foundLists.value = store.getters['lists/searchList'](query)
 }
 
-function select(l: ListModel | null) {
+function select(l: IList | null) {
 	Object.assign(list, l)
 	emit('update:modelValue', list)
 }

src/components/tasks/partials/priorityLabel.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import priorities from '@/models/constants/priorities'
+import {PRIORITIES as priorities} from '@/models/constants/priorities'
 	
 defineProps({
 	priority: {

src/components/tasks/partials/prioritySelect.vue

@@ -5,19 +5,19 @@
 			@change="updateData"
 			:disabled="disabled || undefined"
 		>
-			<option :value="priorities.UNSET">{{ $t('task.priority.unset') }}</option>
-			<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
-			<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
-			<option :value="priorities.HIGH">{{ $t('task.priority.high') }}</option>
-			<option :value="priorities.URGENT">{{ $t('task.priority.urgent') }}</option>
-			<option :value="priorities.DO_NOW">{{ $t('task.priority.doNow') }}</option>
+			<option :value="PRIORITIES.UNSET">{{ $t('task.priority.unset') }}</option>
+			<option :value="PRIORITIES.LOW">{{ $t('task.priority.low') }}</option>
+			<option :value="PRIORITIES.MEDIUM">{{ $t('task.priority.medium') }}</option>
+			<option :value="PRIORITIES.HIGH">{{ $t('task.priority.high') }}</option>
+			<option :value="PRIORITIES.URGENT">{{ $t('task.priority.urgent') }}</option>
+			<option :value="PRIORITIES.DO_NOW">{{ $t('task.priority.doNow') }}</option>
 		</select>
 	</div>
 </template>
 
 <script setup lang="ts">
 import {ref, watch} from 'vue'
-import priorities from '@/models/constants/priorities.json'
+import {PRIORITIES} from '@/models/constants/priorities'
 
 const priority = ref(0)
 

src/components/tasks/partials/relatedTasks.vue

@@ -144,8 +144,7 @@ import {defineComponent} from 'vue'
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 import TaskRelationService from '../../../services/taskRelation'
-import relationKinds from '../../../models/constants/relationKinds'
-import TaskRelationModel from '../../../models/taskRelation'
+import TaskRelationModel, {RELATION_KINDS} from '@/models/taskRelation'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
@@ -157,7 +156,7 @@ export default defineComponent({
 			relatedTasks: {},
 			taskService: new TaskService(),
 			foundTasks: [],
-			relationKinds: relationKinds,
+			relationKinds: RELATION_KINDS,
 			newTaskRelationTask: new TaskModel(),
 			newTaskRelationKind: 'related',
 			taskRelationService: new TaskRelationService(),
@@ -221,7 +220,7 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async findTasks(query) {
+		async findTasks(query: string) {
 			this.query = query
 			this.foundTasks = await this.taskService.getAll({}, {s: query})
 		},

src/components/tasks/partials/reminders.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, onMounted, watch} from 'vue'
+import {type PropType, ref, onMounted, watch} from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
@@ -45,8 +45,8 @@ const props = defineProps({
 				return false
 			}
 
-			const isDate = (e: any) => e instanceof Date
-			const isString = (e: any) => typeof e === 'string'
+			const isDate = (e: unknown) => e instanceof Date
+			const isString = (e: unknown) => typeof e === 'string'
 
 			for (const e of prop) {
 				if (!isDate(e) && !isString(e)) {

src/components/tasks/partials/repeatAfter.vue

@@ -18,17 +18,14 @@
 			<div class="control">
 				<div class="select">
 					<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
-						<option :value="repeatModes.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">{{
-								$t('task.repeat.fromCurrentDate')
-							}}
-						</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
 					</select>
 				</div>
 			</div>
 		</div>
-		<div class="is-flex" v-if="task.repeatMode !== repeatModes.REPEAT_MODE_MONTH">
+		<div class="is-flex" v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH">
 			<p class="pr-4">
 				{{ $t('task.repeat.each') }}
 			</p>
@@ -65,14 +62,15 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, watch} from 'vue'
-import repeatModes from '@/models/constants/taskRepeatModes.json'
-import TaskModel from '@/models/task'
-import {error} from '@/message'
+import {ref, reactive, watch, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
+import {error} from '@/message'
+import {TASK_REPEAT_MODES, type ITask, type RepeatAfter} from '@/models/task'
+
 const props = defineProps({
 	modelValue: {
+		type: Object as PropType<ITask>,
 		default: () => ({}),
 		required: true,
 	},
@@ -86,7 +84,7 @@ const {t} = useI18n()
 
 const emit = defineEmits(['update:modelValue', 'change'])
 
-const task = ref<TaskModel>()
+const task = ref<ITask>()
 const repeatAfter = reactive({
 	amount: 0,
 	type: '',
@@ -104,7 +102,7 @@ watch(
 )
 
 function updateData() {
-	if (task.value.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
+	if (!task.value || task.value.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
 		return
 	}
 
@@ -118,8 +116,8 @@ function updateData() {
 	emit('change')
 }
 
-function setRepeatAfter(amount: number, type) {
-	Object.assign(repeatAfter, {amount, type})
+function setRepeatAfter(amount: number, type: RepeatAfter['type']) {
+	Object.assign(repeatAfter, { amount, type})
 	updateData()
 }
 </script>

src/components/tasks/partials/singleTaskInList.vue

@@ -43,7 +43,7 @@
 				v-if="+new Date(task.dueDate) > 0"
 				class="dueDate"
 				@click.prevent.stop="showDefer = !showDefer"
-				v-tooltip="formatDate(task.dueDate)"
+				v-tooltip="formatDateLong(task.dueDate)"
 			>
 				<time
 					:datetime="formatISO(task.dueDate)"
@@ -98,17 +98,16 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import TaskModel from '../../../models/task'
-import PriorityLabel from './priorityLabel'
+import TaskModel, { type ITask } from '../../../models/task'
+import PriorityLabel from './priorityLabel.vue'
 import TaskService from '../../../services/task'
-import Labels from './labels'
-import User from '../../misc/user'
 import BaseButton from '@/components/base/BaseButton.vue'
-import Fancycheckbox from '../../input/fancycheckbox'
-import DeferTask from './defer-task'
+import Fancycheckbox from '../../input/fancycheckbox.vue'
+import DeferTask from './defer-task.vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {playPop} from '@/helpers/playPop'
-import ChecklistSummary from './checklist-summary'
+import ChecklistSummary from './checklist-summary.vue'
+import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -130,7 +129,7 @@ export default defineComponent({
 	},
 	props: {
 		theTask: {
-			type: TaskModel,
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		isArchived: {
@@ -188,7 +187,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async markAsDone(checked) {
+		formatDateSince,
+		formatISO,
+		formatDateLong,
+
+		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
 				const task = await this.taskService.update(this.task)
 				if (this.task.done) {
@@ -213,7 +216,7 @@ export default defineComponent({
 			}
 		},
 
-		undoDone(checked) {
+		undoDone(checked: boolean) {
 			this.task.done = !this.task.done
 			this.markAsDone(!checked)
 		},

src/components/tasks/partials/sort.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 type Order = 'asc' | 'desc' | 'none'

src/composables/useNamespaceSearch.ts

@@ -1,5 +1,5 @@
 import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 export function useNameSpaceSearch() {
 	const query = ref('')

src/helpers/attachments.ts

@@ -1,22 +1,27 @@
-import AttachmentModel from '@/models/attachment'
-import FileModel from '@/models/file'
+import AttachmentModel, { type IAttachment } from '@/models/attachment'
+import type {IFile} from '@/models/file'
 
 import AttachmentService from '@/services/attachment'
 import { store } from '@/store'
 
-export function uploadFile(taskId: number, file: FileModel, onSuccess: () => Function) {
+export function uploadFile(taskId: number, file: IFile, onSuccess: () => Function) {
 	const attachmentService = new AttachmentService()
 	const files = [file]
 
 	return uploadFiles(attachmentService, taskId, files, onSuccess)
 }
 
-export async function uploadFiles(attachmentService: AttachmentService, taskId: number, files: FileModel[], onSuccess : Function = () => {}) {
+export async function uploadFiles(
+	attachmentService: AttachmentService,
+	taskId: number,
+	files: IFile[],
+	onSuccess: Function = () => {},
+) {
 	const attachmentModel = new AttachmentModel({taskId})
 	const response = await attachmentService.create(attachmentModel, files)
 	console.debug(`Uploaded attachments for task ${taskId}, response was`, response)
 
-	response.success?.map((attachment: AttachmentModel) => {
+	response.success?.map((attachment: IAttachment) => {
 		store.dispatch('tasks/addTaskAttachment', {
 			taskId,
 			attachment,
@@ -29,6 +34,6 @@ export async function uploadFiles(attachmentService: AttachmentService, taskId:
 	}
 }
 
-export function generateAttachmentUrl(taskId: number, attachmentId: number) : any {
+export function generateAttachmentUrl(taskId: number, attachmentId: number) {
 	return `${window.API_URL}/tasks/${taskId}/attachments/${attachmentId}`
 }

src/helpers/getListTitle.ts

@@ -1,8 +1,7 @@
 import {i18n} from '@/i18n'
+import type { IList } from '@/models/list'
 
-import type ListModal from '@/models/list'
-
-export function getListTitle(l: ListModal) {
+export function getListTitle(l: IList) {
 	if (l.id === -1) {
 		return i18n.global.t('list.pseudo.favorites.title')
 	}

src/helpers/getNamespaceTitle.ts

@@ -1,7 +1,7 @@
 import {i18n} from '@/i18n'
-import NamespaceModel from '@/models/namespace'
+import type {INamespace} from '@/models/namespace'
 
-export const getNamespaceTitle = (n: NamespaceModel) => {
+export const getNamespaceTitle = (n: INamespace) => {
 	if (n.id === -1) {
 		return i18n.global.t('namespace.pseudo.sharedLists.title')
 	}

src/helpers/labels.ts

@@ -1,18 +1,10 @@
 import {createNewIndexer} from '../indexes'
 
+import type {LabelState} from '@/store/types'
+import type {ILabel} from '@/models/label'
+
 const {search} = createNewIndexer('labels', ['title', 'description'])
 
-export interface label {
-	id: number,
-	title: string,
-}
-
-interface labelState {
-	labels: {
-		[k: number]: label,
-	},
-}
-
 /**
  * Checks if a list of labels is available in the store and filters them then query
  * @param {Object} state
@@ -20,7 +12,7 @@ interface labelState {
  * @param {String} query
  * @returns {Array}
  */
-export function filterLabelsByQuery(state: labelState, labelsToHide: label[], query: string) {
+export function filterLabelsByQuery(state: LabelState, labelsToHide: ILabel[], query: string) {
 	const labelIdsToHide: number[] = labelsToHide.map(({id}) => id)
 
 	return search(query)
@@ -36,6 +28,6 @@ export function filterLabelsByQuery(state: labelState, labelsToHide: label[], qu
  * @param {Array} ids
  * @returns {Array}
  */
-export function getLabelsByIds(state: labelState, ids: number[]) {
+export function getLabelsByIds(state: LabelState, ids: ILabel['id'][]) {
 	return Object.values(state.labels).filter(({id}) => ids.includes(id))
 }

src/helpers/redirectToProvider.ts

@@ -1,7 +1,7 @@
 import {createRandomID} from '@/helpers/randomId'
 import {parseURL} from 'ufo'
 
-interface Provider {
+export interface Provider {
 	name: string
 	key: string
 	authUrl: string

src/helpers/saveCollapsedBucketState.ts

@@ -1,4 +1,4 @@
-import ListModel from '@/models/list'
+import type {IList} from '@/models/list'
 
 const key = 'collapsedBuckets'
 
@@ -11,7 +11,10 @@ const getAllState = () => {
 	return JSON.parse(saved)
 }
 
-export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBuckets) => {
+export const saveCollapsedBucketState = (
+	listId: IList['id'],
+	collapsedBuckets,
+) => {
 	const state = getAllState()
 	state[listId] = collapsedBuckets
 	for (const bucketId in state[listId]) {
@@ -22,7 +25,7 @@ export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBucke
 	localStorage.setItem(key, JSON.stringify(state))
 }
 
-export const getCollapsedBucketState = (listId : ListModel['id']) => {
+export const getCollapsedBucketState = (listId : IList['id']) => {
 	const state = getAllState()
 	if (typeof state[listId] !== 'undefined') {
 		return state[listId]

src/helpers/savedFilter.ts

@@ -1,6 +1,6 @@
-import ListModel from '@/models/list'
+import type {IList} from '@/models/list'
 
-export function getSavedFilterIdFromListId(listId: ListModel['id']) {
+export function getSavedFilterIdFromListId(listId: IList['id']) {
 	let filterId = listId * -1 - 1
 	// FilterIds from listIds are always positive
 	if (filterId < 0) {

src/helpers/utils.ts

@@ -1,8 +1,8 @@
-export function findIndexById(array : [], id : string | number) {
+export function findIndexById<T extends {id: string | number}>(array : T[], id : string | number) {
 	return array.findIndex(({id: currentId}) => currentId === id)
 }
 
-export function findById(array : [], id : string | number) {
+export function findById<T extends {id: string | number}>(array : T[], id : string | number) {
 	return array.find(({id: currentId}) => currentId === id)
 }
 
@@ -11,11 +11,11 @@ export function includesById(array: [], id: string | number) {
 }
 
 // https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_isnil
-export function isNil(value: any) {
+export function isNil(value: unknown) {
 	return value == null
 }
 
-export function omitBy(obj: {}, check: (value: any) => boolean): {} {
+export function omitBy(obj: {}, check: (value: unknown) => boolean) {
 	if (isNil(obj)) {
 		return {}
 	}

src/main.ts

@@ -5,8 +5,6 @@ import router from './router'
 
 import {error, success} from './message'
 
-import {formatDate, formatDateShort, formatDateLong, formatDateSince, formatISO} from '@/helpers/time/formatDate'
-
 import {VERSION} from './version.json'
 
 // Notifications
@@ -16,7 +14,7 @@ import Notifications from '@kyvg/vue3-notification'
 import './registerServiceWorker'
 
 // Vuex
-import {store} from './store'
+import { store, key } from './store'
 // i18n
 import {i18n} from './i18n'
 
@@ -69,24 +67,6 @@ app.component('x-button', Button)
 app.component('modal', Modal)
 app.component('card', Card)
 
-// Mixins
-import {getNamespaceTitle} from './helpers/getNamespaceTitle'
-import {getListTitle} from './helpers/getListTitle'
-import {setTitle} from './helpers/setTitle'
-
-app.mixin({
-	methods: {
-		formatDateSince,
-		format: formatDate,
-		formatDate: formatDateLong,
-		formatDateShort: formatDateShort,
-		formatISO,
-		getNamespaceTitle,
-		getListTitle,
-		setTitle,
-	},
-})
-
 app.config.errorHandler = (err, vm, info) => {
 	if (import.meta.env.DEV) {
 		console.error(err, vm, info)
@@ -124,7 +104,7 @@ if (window.SENTRY_ENABLED) {
 	import('./sentry').then(sentry => sentry.default(app, router))
 }
 
-app.use(store)
+app.use(store, key) // pass the injection key
 app.use(router)
 app.use(i18n)
 

src/models/abstractModel.ts

@@ -1,12 +1,17 @@
 import {objectToCamelCase} from '@/helpers/case'
 import {omitBy, isNil} from '@/helpers/utils'
+import type {Right} from '@/models/constants/rights'
 
-export default class AbstractModel {
+export interface IAbstract {
+	maxRight: Right | null
+}
+
+export default class AbstractModel implements IAbstract {
 
 	/**
 	 * The max right the user has on this object, as returned by the x-max-right header from the api.
 	 */
-	maxRight: number | null = null
+	maxRight: Right | null = null
 
 	/**
 	 * The abstract constructor takes an object and merges its data with the default data of this model.

src/models/attachment.ts

@@ -1,24 +1,35 @@
 import AbstractModel from './abstractModel'
-import UserModel from './user'
-import FileModel from './file'
+import UserModel, {type IUser} from './user'
+import FileModel, {type IFile} from './file'
+
+export interface IAttachment extends AbstractModel {
+	id: number
+	taskId: number
+	createdBy: IUser
+	file: IFile
+	created: Date
+}
+
+export default class AttachmentModel extends AbstractModel implements IAttachment {
+	declare id: number
+	declare taskId: number
+	createdBy: IUser
+	file: IFile
+	created: Date
 
-export default class AttachmentModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 		this.createdBy = new UserModel(this.createdBy)
 		this.file = new FileModel(this.file)
 		this.created = new Date(this.created)
-
-		/** @type {number} */
-		this.id
 	}
 
 	defaults() {
 		return {
 			id: 0,
 			taskId: 0,
-			file: FileModel,
 			createdBy: UserModel,
+			file: FileModel,
 			created: null,
 		}
 	}

src/models/avatar.ts

@@ -1,6 +1,14 @@
 import AbstractModel from './abstractModel'
 
-export default class AvatarModel extends AbstractModel {
+export type AvatarProvider = 'default' | 'initials' | 'gravatar' | 'marble' | 'upload'
+
+export interface IAvatar extends AbstractModel {
+	avatarProvider: AvatarProvider
+}
+
+export default class AvatarModel extends AbstractModel implements IAvatar {
+	declare avatarProvider: AvatarProvider
+
 	defaults() {
 		return {
 			avatarProvider: '',

src/models/backgroundImage.ts

@@ -1,6 +1,26 @@
 import AbstractModel from './abstractModel'
 
-export default class BackgroundImageModel extends AbstractModel {
+export interface IBackgroundImage extends AbstractModel {
+	id: number
+	url: string
+	thumb: string
+	info: {
+		author: string
+		authorName: string
+	}
+	blurHash: string  
+}
+
+export default class BackgroundImageModel extends AbstractModel implements IBackgroundImage {
+	declare id: number
+	declare url: string
+	declare thumb: string
+	declare info: {
+		author: string
+		authorName: string
+	}
+	declare blurHash: string  
+
 	defaults() {
 		return {
 			id: 0,

src/models/bucket.ts

@@ -1,8 +1,34 @@
 import AbstractModel from './abstractModel'
-import UserModel from './user'
-import TaskModel from './task'
+import UserModel, { type IUser } from './user'
+import TaskModel, { type ITask } from './task'
+
+export interface IBucket extends AbstractModel {
+	id: number
+	title: string
+	listId: number
+	limit: number
+	tasks: ITask[]
+	isDoneBucket: boolean
+	position: number
+	
+	createdBy: IUser
+	created: Date
+	updated: Date
+}
+
+export default class BucketModel extends AbstractModel implements IBucket {
+	declare id: number
+	declare title: string
+	declare listId: number
+	declare limit: number
+	declare tasks: ITask[]
+	declare isDoneBucket: boolean
+	declare position: number
+	
+	createdBy: IUser
+	created: Date
+	updated: Date
 
-export default class BucketModel extends AbstractModel {
 	constructor(bucket) {
 		super(bucket)
 

src/models/caldavToken.ts

@@ -1,14 +1,20 @@
 import AbstractModel from './abstractModel'
 
-export default class CaldavTokenModel extends AbstractModel {
+export interface ICaldavToken extends AbstractModel {
+	id: number;
+	created: Date;
+}
+
+export default class CaldavTokenModel extends AbstractModel implements ICaldavToken {
+	declare id: number
+	declare created: Date
+
 	constructor(data? : Object) {
 		super(data)
 		
-		/** @type {number} */
 		this.id
 
 		if (this.created) {
-			/** @type {Date} */
 			this.created = new Date(this.created)
 		}
 	}

src/models/constants/notificationNames.json

@@ -1,7 +0,0 @@
-{
-  "TASK_COMMENT": "task.comment",
-  "TASK_ASSIGNED": "task.assigned",
-  "TASK_DELETED": "task.deleted",
-  "LIST_CREATED": "list.created",
-  "TEAM_MEMBER_ADDED": "team.member.added"
-}

src/models/constants/priorities.json

@@ -1,8 +0,0 @@
-{
-"UNSET": 0,
-"LOW": 1,
-"MEDIUM": 2,
-"HIGH": 3,
-"URGENT": 4,
-"DO_NOW": 5
-}

src/models/constants/priorities.ts

@@ -0,0 +1,10 @@
+export const PRIORITIES = {
+	'UNSET': 0,
+	'LOW': 1,
+	'MEDIUM': 2,
+	'HIGH': 3,
+	'URGENT': 4,
+	'DO_NOW': 5,
+} as const
+
+export type Priority = typeof PRIORITIES[keyof typeof PRIORITIES]

src/models/constants/relationKinds.json

@@ -1,12 +0,0 @@
-[
-  "subtask",
-  "parenttask",
-  "related",
-  "duplicates",
-  "blocking",
-  "blocked",
-  "precedes",
-  "follows",
-  "copiedfrom",
-  "copiedto"
-]

src/models/constants/rights.json

@@ -1,5 +0,0 @@
-{
-  "READ": 0,
-  "READ_WRITE": 1,
-  "ADMIN": 2
-}

src/models/constants/rights.ts

@@ -0,0 +1,7 @@
+export const RIGHTS = {
+  'READ': 0,
+  'READ_WRITE': 1,
+  'ADMIN': 2,
+} as const
+
+export type Right = typeof RIGHTS[keyof typeof RIGHTS]

src/models/constants/taskRepeatModes.json

@@ -1,5 +0,0 @@
-{
-  "REPEAT_MODE_DEFAULT": 0,
-  "REPEAT_MODE_MONTH": 1,
-  "REPEAT_MODE_FROM_CURRENT_DATE": 2
-}

src/models/emailUpdate.ts

@@ -1,6 +1,14 @@
 import AbstractModel from './abstractModel'
 
-export default class EmailUpdateModel extends AbstractModel {
+interface IEmailUpdate extends AbstractModel {
+	newEmail: string
+	password: string
+}
+
+export default class EmailUpdateModel extends AbstractModel implements IEmailUpdate {
+	declare newEmail: string
+	declare password: string
+
 	defaults() {
 		return {
 			newEmail: '',

src/models/file.ts

@@ -1,6 +1,20 @@
 import AbstractModel from './abstractModel'
 
-export default class FileModel extends AbstractModel {
+export interface IFile extends AbstractModel {
+	id: number
+	mime: string
+	name: string
+	size: number
+	created: Date
+} 
+
+export default class FileModel extends AbstractModel implements IFile {
+	declare id: number
+	declare mime: string
+	declare name: string
+	declare size: number
+	created: Date
+
 	constructor(data) {
 		super(data)
 		this.created = new Date(this.created)

src/models/label.ts

@@ -1,9 +1,34 @@
 import AbstractModel from './abstractModel'
-import UserModel from './user'
+import UserModel, { type IUser } from './user'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 const DEFAULT_LABEL_BACKGROUND_COLOR = 'e8e8e8'
-export default class LabelModel extends AbstractModel {
+
+export interface ILabel extends AbstractModel {
+	id: number
+	title: string
+	hexColor: string
+	description: string
+	createdBy: IUser
+	listId: number
+	textColor: string
+
+	created: Date
+	updated: Date
+}
+
+export default class LabelModel extends AbstractModel implements ILabel {
+	declare id: number
+	declare title: string
+	declare hexColor: string
+	declare description: string
+	declare createdBy: IUser
+	declare listId: number
+	declare textColor: string
+
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 		// FIXME: this should be empty and be definied in the client.

src/models/labelTask.ts

@@ -1,6 +1,16 @@
 import AbstractModel from './abstractModel'
 
-export default class LabelTask extends AbstractModel {
+export interface ILabelTask extends AbstractModel {
+	id: number
+	taskId: number
+	labelId: number
+}
+
+export default class LabelTask extends AbstractModel implements ILabelTask {
+	declare id: number
+	declare taskId: number
+	declare labelId: number
+
 	defaults() {
 		return {
 			id: 0,

src/models/linkShare.ts

@@ -1,7 +1,31 @@
 import AbstractModel from './abstractModel'
-import UserModel from './user'
+import UserModel, { type IUser } from './user'
+import {RIGHTS, type Right} from '@/models/constants/rights'
 
-export default class LinkShareModel extends AbstractModel {
+export interface ILinkShare extends AbstractModel {
+	id: number
+	hash: string
+	right: Right
+	sharedBy: IUser
+	sharingType: number // FIXME: use correct numbers
+	listId: number
+	name: string
+	password: string
+	created: Date
+	updated: Date
+}
+
+export default class LinkShareModel extends AbstractModel implements ILinkShare {
+	declare id: number
+	declare hash: string
+	declare right: Right
+	sharedBy: IUser
+	declare sharingType: number // FIXME: use correct numbers
+	declare listId: number
+	declare name: string
+	declare password: string
+	created: Date
+	updated: Date
 
 	constructor(data) {
 		// The constructor of AbstractModel handles all the default parsing.
@@ -18,7 +42,7 @@ export default class LinkShareModel extends AbstractModel {
 		return {
 			id: 0,
 			hash: '',
-			right: 0,
+			right: RIGHTS.READ,
 			sharedBy: UserModel,
 			sharingType: 0,
 			listId: 0,

src/models/list.ts

@@ -1,72 +1,69 @@
-import AbstractModel from './abstractModel'
-import TaskModel from './task'
-import UserModel from './user'
-import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
-import SubscriptionModel from '@/models/subscription'
+import AbstractModel from '@/models/abstractModel'
+import TaskModel, { type ITask } from '@/models/task'
+import UserModel, { type IUser } from '@/models/user'
+import SubscriptionModel, { type ISubscription } from '@/models/subscription'
+import type { INamespace } from '@/models/namespace'
 
-export default class ListModel extends AbstractModel {
+import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
+
+export interface IList extends AbstractModel {
+	id: number
+	title: string
+	description: string
+	owner: IUser
+	tasks: ITask[]
+	namespaceId: INamespace['id']
+	isArchived: boolean
+	hexColor: string
+	identifier: string
+	backgroundInformation: any
+	isFavorite: boolean
+	subscription: ISubscription
+	position: number
+	backgroundBlurHash: string
+	
+	created: Date
+	updated: Date
+}
+
+export default class ListModel extends AbstractModel implements IList {
+	declare id: number
+	declare title: string
+	declare description: string
+	owner: IUser
+	tasks: ITask[]
+	declare namespaceId: INamespace['id']
+	declare isArchived: boolean
+	declare hexColor: string
+	declare identifier: string
+	declare backgroundInformation: any
+	declare isFavorite: boolean
+	declare subscription: ISubscription
+	declare position: number
+	declare backgroundBlurHash: string
+	
+	created: Date
+	updated: Date
 
 	constructor(data) {
 		super(data)
 
 		this.owner = new UserModel(this.owner)
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.title
-
-		/** @type {string} */
-		this.description
-		
-		/** @type {UserModel} */
-		this.owner
-
-		/** @type {TaskModel[]} */
-		this.tasks
-
 		// Make all tasks to task models
 		this.tasks = this.tasks.map(t => {
 			return new TaskModel(t)
 		})
-		
-		/** @type {number} */
-		this.namespaceId
-
-		/** @type {boolean} */
-		this.isArchived
-
-		/** @type {string} */
-		this.hexColor
 
 		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
 
-		/** @type {string} */
-		this.identifier
-
-		/** @type */
-		this.backgroundInformation
-
-		/** @type {boolean} */
-		this.isFavorite
-
-		/** @type */
-		this.subscription
-
 		if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
-		/** @type {number} */
-		this.position
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {Date} */
 		this.updated = new Date(this.updated)
 	}
 

src/models/listDuplicateModel.ts

@@ -1,7 +1,18 @@
 import AbstractModel from './abstractModel'
-import ListModel from './list'
+import ListModel, { type IList } from './list'
+import type { INamespace } from './namespace'
+
+export interface IListDuplicate extends AbstractModel {
+	listId: number
+	namespaceId: INamespace['id']
+	list: IList
+}
+
+export default class ListDuplicateModel extends AbstractModel implements IListDuplicate {
+	declare listId: number
+	declare namespaceId: INamespace['id']
+	list: IList
 
-export default class ListDuplicateModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 		this.list = new ListModel(this.list)

src/models/namespace.ts

@@ -1,9 +1,35 @@
 import AbstractModel from './abstractModel'
-import ListModel from './list'
-import UserModel from './user'
-import SubscriptionModel from '@/models/subscription'
+import ListModel, { type IList } from './list'
+import UserModel, { type IUser } from './user'
+import SubscriptionModel, { type ISubscription } from '@/models/subscription'
+
+export interface INamespace extends AbstractModel {
+	id: number
+	title: string
+	description: string
+	owner: IUser
+	lists: IList[]
+	isArchived: boolean
+	hexColor: string
+	subscription: ISubscription
+
+	created: Date
+	updated: Date
+}
+
+export default class NamespaceModel extends AbstractModel implements INamespace {
+	declare id: number
+	declare title: string
+	declare description: string
+	owner: IUser
+	lists: IList[]
+	declare isArchived: boolean
+	declare hexColor: string
+	declare subscription: ISubscription
+
+	created: Date
+	updated: Date
 
-export default class NamespaceModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 
@@ -11,7 +37,6 @@ export default class NamespaceModel extends AbstractModel {
 			this.hexColor = '#' + this.hexColor
 		}
 
-		/** @type {ListModel[]} */
 		this.lists = this.lists.map(l => {
 			return new ListModel(l)
 		})
@@ -22,15 +47,6 @@ export default class NamespaceModel extends AbstractModel {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.title
-
-		/** @type {boolean} */
-		this.isArchived
-
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
 	}

src/models/notification.ts

@@ -1,39 +1,100 @@
 import AbstractModel from '@/models/abstractModel'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
-import UserModel from '@/models/user'
-import TaskModel from '@/models/task'
-import TaskCommentModel from '@/models/taskComment'
+import UserModel, { type IUser } from '@/models/user'
+import TaskModel, { type ITask } from '@/models/task'
+import TaskCommentModel, { type ITaskComment } from '@/models/taskComment'
 import ListModel from '@/models/list'
-import TeamModel from '@/models/team'
-import names from './constants/notificationNames.json'
+import TeamModel, { type ITeam } from '@/models/team'
+
+export const NOTIFICATION_NAMES = {
+	'TASK_COMMENT': 'task.comment',
+	'TASK_ASSIGNED': 'task.assigned',
+	'TASK_DELETED': 'task.deleted',
+	'LIST_CREATED': 'list.created',
+	'TEAM_MEMBER_ADDED': 'team.member.added',
+} as const
+
+interface Notification {
+	doer: IUser
+}
+interface NotificationTask extends Notification {
+	task: ITask
+	comment: ITaskComment
+}
+
+interface NotificationAssigned extends Notification {
+	task: ITask
+	assignee: IUser
+}
+
+interface NotificationDeleted extends Notification {
+	task: ITask
+}
+
+interface NotificationCreated extends Notification {
+	task: ITask
+}
+
+interface NotificationMemberAdded extends Notification {
+	member: IUser
+	team: ITeam
+}
+
+export interface INotification extends AbstractModel {
+	id: number
+	name: string
+	notification: NotificationTask | NotificationAssigned | NotificationDeleted | NotificationCreated | NotificationMemberAdded
+	read: boolean
+	readAt: Date | null
+
+	created: Date
+}
+
+export default class NotificationModel extends AbstractModel implements INotification {
+	declare id: number
+	declare name: string
+	declare notification: NotificationTask | NotificationAssigned | NotificationDeleted | NotificationCreated | NotificationMemberAdded
+	declare read: boolean
+	readAt: Date | null
+
+	created: Date
 
-export default class NotificationModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 
 		switch (this.name) {
-			case names.TASK_COMMENT:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.task = new TaskModel(this.notification.task)
-				this.notification.comment = new TaskCommentModel(this.notification.comment)
+			case NOTIFICATION_NAMES.TASK_COMMENT:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					task: new TaskModel(this.notification.task),
+					comment: new TaskCommentModel(this.notification.comment),
+				}
 				break
-			case names.TASK_ASSIGNED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.task = new TaskModel(this.notification.task)
-				this.notification.assignee = new UserModel(this.notification.assignee)
+			case NOTIFICATION_NAMES.TASK_ASSIGNED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					task: new TaskModel(this.notification.task),
+					assignee: new UserModel(this.notification.assignee),
+				}
 				break
-			case names.TASK_DELETED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.task = new TaskModel(this.notification.task)
+			case NOTIFICATION_NAMES.TASK_DELETED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					task: new TaskModel(this.notification.task),
+				}
 				break
-			case names.LIST_CREATED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.list = new ListModel(this.notification.list)
+			case NOTIFICATION_NAMES.LIST_CREATED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					list: new ListModel(this.notification.list),
+				}
 				break
-			case names.TEAM_MEMBER_ADDED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.member = new UserModel(this.notification.member)
-				this.notification.team = new TeamModel(this.notification.team)
+			case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					member: new UserModel(this.notification.member),
+					team: new TeamModel(this.notification.team),
+				}
 				break
 		}
 
@@ -55,9 +116,9 @@ export default class NotificationModel extends AbstractModel {
 		let who = ''
 
 		switch (this.name) {
-			case names.TASK_COMMENT:
+			case NOTIFICATION_NAMES.TASK_COMMENT:
 				return `commented on ${this.notification.task.getTextIdentifier()}`
-			case names.TASK_ASSIGNED:
+			case NOTIFICATION_NAMES.TASK_ASSIGNED:
 				who = `${this.notification.assignee.getDisplayName()}`
 
 				if (user !== null && user.id === this.notification.assignee.id) {
@@ -65,11 +126,11 @@ export default class NotificationModel extends AbstractModel {
 				}
 
 				return `assigned ${who} to ${this.notification.task.getTextIdentifier()}`
-			case names.TASK_DELETED:
+			case NOTIFICATION_NAMES.TASK_DELETED:
 				return `deleted ${this.notification.task.getTextIdentifier()}`
-			case names.LIST_CREATED:
+			case NOTIFICATION_NAMES.LIST_CREATED:
 				return `created ${this.notification.list.title}`
-			case names.TEAM_MEMBER_ADDED:
+			case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
 				who = `${this.notification.member.getDisplayName()}`
 
 				if (user !== null && user.id === this.notification.member.id) {

src/models/passwordReset.ts

@@ -1,6 +1,16 @@
 import AbstractModel from './abstractModel'
 
-export default class PasswordResetModel extends AbstractModel {
+export interface IPasswordReset extends AbstractModel {
+	token: string
+	newPassword: string
+	email: string
+}
+
+export default class PasswordResetModel extends AbstractModel implements IPasswordReset {
+	token: string
+	declare newPassword: string
+	declare email: string
+
 	constructor(data) {
 		super(data)
 

src/models/passwordUpdate.ts

@@ -1,6 +1,14 @@
-import AbstractModel from './abstractModel'
+import AbstractModel from '@/models/abstractModel'
+
+export interface IPasswordUpdate extends AbstractModel {
+	newPassword: string
+	oldPassword: string
+}
+
+export default class PasswordUpdateModel extends AbstractModel implements IPasswordUpdate {
+	declare newPassword: string
+	declare oldPassword: string
 
-export default class PasswordUpdateModel extends AbstractModel {
 	defaults() {
 		return {
 			newPassword: '',

src/models/savedFilter.ts

@@ -1,7 +1,43 @@
 import AbstractModel from '@/models/abstractModel'
-import UserModel from '@/models/user'
+import UserModel, { type IUser } from '@/models/user'
+
+export interface ISavedFilter extends AbstractModel {
+	id: 0
+	title: string
+	description: string
+	filters: {
+		sortBy: ('done' | 'id')[]
+		orderBy: ('asc' | 'desc')[]
+		filterBy: 'done'[]
+		filterValue: 'false'[]
+		filterComparator: 'equals'[]
+		filterConcat: 'and'
+		filterIncludeNulls: boolean
+	}
+
+	owner: IUser
+	created: Date
+	updated: Date
+}
+
+export default class SavedFilterModel extends AbstractModel implements ISavedFilter {
+	declare id: 0
+	declare title: string
+	declare description: string
+	declare filters: {
+		sortBy: ('done' | 'id')[]
+		orderBy: ('asc' | 'desc')[]
+		filterBy: 'done'[]
+		filterValue: 'false'[]
+		filterComparator: 'equals'[]
+		filterConcat: 'and'
+		filterIncludeNulls: boolean
+	}
+
+	owner: IUser
+	created: Date
+	updated: Date
 
-export default class SavedFilterModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 

src/models/subscription.ts

@@ -1,23 +1,27 @@
 import AbstractModel from '@/models/abstractModel'
-import UserModel from '@/models/user'
+import UserModel, { type IUser } from '@/models/user'
+
+export interface ISubscription extends AbstractModel {
+	id: number
+	entity: string // FIXME: correct type?
+	entityId: number // FIXME: correct type?
+	user: IUser
+
+	created: Date
+}
+
+export default class SubscriptionModel extends AbstractModel implements ISubscription {
+	declare id: number
+	declare entity: string // FIXME: correct type?
+	declare entityId: number // FIXME: correct type?
+	user: IUser
+
+	created: Date
 
-export default class SubscriptionModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.entity
-
-		/** @type {number} */
-		this.entityId
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {UserModel} */
 		this.user = new UserModel(this.user)
 	}
 

src/models/task.ts

@@ -1,70 +1,125 @@
-import AbstractModel from './abstractModel'
-import UserModel from './user'
-import LabelModel from './label'
-import AttachmentModel from './attachment'
-import {REPEAT_MODE_DEFAULT} from './constants/taskRepeatModes'
+import type { Priority } from '@/models/constants/priorities'
+
+import AbstractModel from '@/models/abstractModel'
+import UserModel, { type IUser } from '@/models/user'
+import LabelModel, { type ILabel } from '@/models/label'
+import AttachmentModel, {type IAttachment} from '@/models/attachment'
+import SubscriptionModel, { type ISubscription } from '@/models/subscription'
+import type { IList } from '@/models/list'
+import  type {IRepeats} from '@/types/IRepeats'
 
-import SubscriptionModel from '@/models/subscription'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
+import type { IBucket } from './bucket'
 
 const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
 export const TASK_DEFAULT_COLOR = '#1973ff'
 
-export default class TaskModel extends AbstractModel {
-	constructor(data) {
+export const TASK_REPEAT_MODES = {
+	'REPEAT_MODE_DEFAULT': 0,
+	'REPEAT_MODE_MONTH': 1,
+	'REPEAT_MODE_FROM_CURRENT_DATE': 2,
+} as const
+
+export type TaskRepeatMode = typeof TASK_REPEAT_MODES[keyof typeof TASK_REPEAT_MODES] 
+
+export interface ITask extends AbstractModel {
+	id: number
+	title: string
+	description: string
+	done: boolean
+	doneAt: Date | null
+	priority: Priority
+	labels: ILabel[]
+	assignees: IUser[]
+
+	dueDate: Date | null
+	startDate: Date | null
+	endDate: Date | null
+	repeatAfter: number | IRepeats
+	repeatFromCurrentDate: boolean
+	repeatMode: TaskRepeatMode
+	reminderDates: Date[]
+	parentTaskId: ITask['id']
+	hexColor: string
+	percentDone: number
+	relatedTasks: { [relationKind: string]: ITask } // FIXME: use relationKinds
+	attachments: IAttachment[]
+	identifier: string
+	index: number
+	isFavorite: boolean
+	subscription: ISubscription
+
+	position: number
+	kanbanPosition: number
+
+	createdBy: IUser
+	created: Date
+	updated: Date
+
+	listId: IList['id'] // Meta, only used when creating a new task
+	bucketId: IBucket['id']
+}
+
+export default class TaskModel extends AbstractModel implements ITask {
+	id: number
+	title: string
+	declare description: string
+	declare done: boolean
+	doneAt: Date | null
+	declare priority: Priority
+	labels: ILabel[]
+	assignees: IUser[]
+
+	dueDate: Date | null
+	startDate: Date | null
+	endDate: Date | null
+	declare repeatAfter: number | IRepeats
+	declare repeatFromCurrentDate: boolean
+	declare repeatMode: TaskRepeatMode
+	reminderDates: Date[]
+	declare parentTaskId: ITask['id']
+	declare hexColor: string
+	declare percentDone: number
+	declare relatedTasks: { [relationKind: string]: ITask } // FIXME: use relationKinds
+	attachments: IAttachment[]
+	declare identifier: string
+	declare index: number
+	declare isFavorite: boolean
+	declare subscription: ISubscription
+
+	declare position: number
+	declare kanbanPosition: number
+
+	createdBy: IUser
+	created: Date
+	updated: Date
+
+	listId: IList['id'] // Meta, only used when creating a new task
+	declare bucketId: IBucket['id']
+
+	constructor(data: Partial<ITask>) {
 		super(data)
 
-		/** @type {number} */
 		this.id = Number(this.id)
-
-		/** @type {string} */
 		this.title = this.title?.trim()
-
-		/** @type {string} */
-		this.description
-
-		/** @type {boolean} */
-		this.done
-
-		/** @type */
 		this.doneAt = parseDateOrNull(this.doneAt)
 
-		/** @type {number} */
-		this.priority
-
-		/** @type {LabelModel[]} */
 		this.labels = this.labels
 			.map(l => new LabelModel(l))
 			.sort((f, s) => f.title > s.title ? 1 : -1)
 
-		/** @type {UserModel[]} */
 		// Parse the assignees into user models
 		this.assignees = this.assignees.map(a => {
 			return new UserModel(a)
 		})
 
-		/** @type {Date} */
 		this.dueDate = parseDateOrNull(this.dueDate)
-
-		/** @type {Date} */
 		this.startDate = parseDateOrNull(this.startDate)
-
-		/** @type {Date} */
 		this.endDate = parseDateOrNull(this.endDate)
 
-		/** @type */
-		this.repeatAfter
-
 		// Parse the repeat after into something usable
 		this.parseRepeatAfter()
 
-		/** @type {boolean} */
-		this.repeatFromCurrentDate
-
-		/** @type {TaskRepeatMode: 0 | 1 | 2} */
-		this.repeatMode
-
-		/** @type {Date[]} */
 		this.reminderDates = this.reminderDates.map(d => new Date(d))
 
 		// Cancel all scheduled notifications for this task to be sure to only have available notifications
@@ -73,22 +128,10 @@ export default class TaskModel extends AbstractModel {
 			this.reminderDates.forEach(d => this.scheduleNotification(d))
 		})
 
-		/** @type {number} */
-		this.parentTaskId
-
-		/** @type {string} */
-		this.hexColor
-
 		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
 
-		/** @type {number} */
-		this.percentDone
-
-		/** @type {{ [relationKind: string]: TaskModel }} */
-		this.relatedTasks
-
 		// Make all subtasks to task models
 		Object.keys(this.relatedTasks).forEach(relationKind => {
 			this.relatedTasks[relationKind] = this.relatedTasks[relationKind].map(t => {
@@ -97,46 +140,21 @@ export default class TaskModel extends AbstractModel {
 		})
 
 		// Make all attachments to attachment models
-		/** @type {AttachmentModel[]} */
 		this.attachments = this.attachments.map(a => new AttachmentModel(a))
 
-		/** @type {string} */
-		this.identifier
-
 		// Set the task identifier to empty if the list does not have one
 		if (this.identifier === `-${this.index}`) {
 			this.identifier = ''
 		}
 
-		/** @type {number} */
-		this.index
-
-		/** @type {boolean} */
-		this.isFavorite
-
-		/** @type {SubscriptionModel} */
-		this.subscription
-
 		if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
-		/** @type {number} */
-		this.position
-
-		/** @type {number} */
-		this.kanbanPosition
-
-		/** @type {UserModel} */
 		this.createdBy = new UserModel(this.createdBy)
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {Date} */
 		this.updated = new Date(this.updated)
 
-		/** @type {number} */
 		this.listId = Number(this.listId)
 	}
 
@@ -156,7 +174,7 @@ export default class TaskModel extends AbstractModel {
 			endDate: 0,
 			repeatAfter: 0,
 			repeatFromCurrentDate: false,
-			repeatMode: REPEAT_MODE_DEFAULT,
+			repeatMode: TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT,
 			reminderDates: [],
 			parentTaskId: 0,
 			hexColor: '',
@@ -176,6 +194,7 @@ export default class TaskModel extends AbstractModel {
 			updated: null,
 
 			listId: 0, // Meta, only used when creating a new task
+			bucketId: 0,
 		}
 	}
 
@@ -204,7 +223,7 @@ export default class TaskModel extends AbstractModel {
 	 * This function should only be called from the constructor.
 	 */
 	parseRepeatAfter() {
-		const repeatAfterHours = (this.repeatAfter / 60) / 60
+		const repeatAfterHours = (this.repeatAfter as number / 60) / 60
 		this.repeatAfter = {type: 'hours', amount: repeatAfterHours}
 
 		// if its dividable by 24, its something with days, otherwise hours

src/models/taskAssignee.ts

@@ -1,6 +1,18 @@
 import AbstractModel from './abstractModel'
+import type { ITask } from './task'
+import type { IUser } from './user'
+
+export interface ITaskAssignee extends AbstractModel {
+	created: Date
+	userId: IUser['id']
+	taskId: ITask['id']
+}
+
+export default class TaskAssigneeModel extends AbstractModel implements ITaskAssignee {
+	created: Date
+	declare userId: IUser['id']
+	declare taskId: ITask['id']
 
-export default class TaskAssigneeModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 		this.created = new Date(this.created)

src/models/taskComment.ts

@@ -1,7 +1,26 @@
 import AbstractModel from './abstractModel'
-import UserModel from './user'
+import UserModel, { type IUser } from './user'
+import type { ITask } from './task'
+
+export interface ITaskComment extends AbstractModel {
+	id: number
+	taskId: ITask['id']
+	comment: string
+	author: IUser
+
+	created: Date
+	updated: Date
+}
+
+export default class TaskCommentModel extends AbstractModel implements ITaskComment {
+	declare id: number
+	declare taskId: ITask['id']
+	declare comment: string
+	author: IUser
+
+	created: Date
+	updated: Date
 
-export default class TaskCommentModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 		this.author = new UserModel(this.author)
@@ -16,7 +35,7 @@ export default class TaskCommentModel extends AbstractModel {
 			comment: '',
 			author: UserModel,
 			created: null,
-			update: null,
+			updated: null,
 		}
 	}
 }

src/models/taskRelation.ts

@@ -1,7 +1,43 @@
 import AbstractModel from './abstractModel'
-import UserModel from './user'
+import UserModel, { type IUser } from './user'
+import type { ITask } from './task'
+
+export const RELATION_KIND = {
+	'SUBTASK': 'subtask',
+	'PARENTTASK': 'parenttask',
+	'RELATED': 'related',
+	'DUPLICATES': 'duplicates',
+	'BLOCKING': 'blocking',
+	'BLOCKED': 'blocked',
+	'PROCEDES': 'precedes',
+	'FOLLOWS': 'follows',
+	'COPIEDFROM': 'copiedfrom',
+	'COPIEDTO': 'copiedto',
+ } as const
+
+export const RELATION_KINDS = [...Object.values(RELATION_KIND)] as const
+
+export type RelationKind = typeof RELATION_KINDS[number]
+
+export interface ITaskRelation extends AbstractModel {
+	id: number
+	otherTaskId: ITask['id']
+	taskId: ITask['id']
+	relationKind: RelationKind
+
+	createdBy: IUser
+	created: Date
+}
+
+export default class TaskRelationModel extends AbstractModel implements ITaskRelation {
+	declare id: number
+	declare otherTaskId: ITask['id']
+	declare taskId: ITask['id']
+	declare relationKind: RelationKind
+
+	createdBy: IUser
+	created: Date
 
-export default class TaskRelationModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 		this.createdBy = new UserModel(this.createdBy)

src/models/team.ts

@@ -1,8 +1,31 @@
 import AbstractModel from './abstractModel'
-import UserModel from './user'
-import TeamMemberModel from './teamMember'
+import UserModel, { type IUser } from './user'
+import TeamMemberModel, { type ITeamMember } from './teamMember'
+import {RIGHTS, type Right} from '@/models/constants/rights'
+
+export interface ITeam extends AbstractModel {
+	id: number
+	name: string
+	description: string
+	members: ITeamMember[]
+	right: Right
+
+	createdBy: IUser
+	created: Date
+	updated: Date
+}
+
+export default class TeamModel extends AbstractModel implements ITeam {
+	declare id: number
+	declare name: string
+	declare description: string
+	members: ITeamMember[]
+	declare right: Right
+
+	createdBy: IUser
+	created: Date
+	updated: Date
 
-export default class TeamModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 
@@ -22,7 +45,7 @@ export default class TeamModel extends AbstractModel {
 			name: '',
 			description: '',
 			members: [],
-			right: 0,
+			right: RIGHTS.READ,
 
 			createdBy: {},
 			created: null,

src/models/teamList.ts

@@ -1,6 +1,13 @@
 import TeamShareBaseModel from './teamShareBase'
+import type { IList } from './list'
+
+export interface ITeamList extends TeamShareBaseModel {
+	listId: IList['id']
+}
+
+export default class TeamListModel extends TeamShareBaseModel implements ITeamList {
+	declare listId: IList['id']
 
-export default class TeamListModel extends TeamShareBaseModel {
 	defaults() {
 		return {
 			...super.defaults(),

src/models/teamMember.ts

@@ -1,6 +1,15 @@
 import UserModel from './user'
+import type { IList } from './list'
+
+export interface ITeamMember extends UserModel {
+	admin: boolean
+	teamId: IList['id']
+}
+
+export default class TeamMemberModel extends UserModel implements ITeamMember {
+	declare admin: boolean
+	declare teamId: IList['id']
 
-export default class TeamMemberModel extends UserModel {
 	defaults() {
 		return {
 			...super.defaults(),

src/models/teamNamespace.ts

@@ -1,6 +1,13 @@
 import TeamShareBaseModel from './teamShareBase'
+import type { INamespace } from './namespace'
+
+export interface ITeamNamespace extends TeamShareBaseModel {
+	namespaceId: INamespace['id']
+}
+
+export default class TeamNamespaceModel extends TeamShareBaseModel implements ITeamNamespace {
+	declare namespaceId: INamespace['id']
 
-export default class TeamNamespaceModel extends TeamShareBaseModel {
 	defaults() {
 		return {
 			...super.defaults(),

src/models/teamShareBase.ts

@@ -1,10 +1,26 @@
 import AbstractModel from './abstractModel'
+import {RIGHTS, type Right} from '@/models/constants/rights'
+import type { ITeam } from './team'
+
+export interface ITeamShareBase extends AbstractModel {
+	teamId: ITeam['id']
+	right: Right
+
+	created: Date
+	updated: Date
+}
 
 /**
  * This class is a base class for common team sharing model.
  * It is extended in a way so it can be used for namespaces as well for lists.
  */
-export default class TeamShareBaseModel extends AbstractModel {
+export default class TeamShareBaseModel extends AbstractModel implements ITeamShareBase {
+	declare teamId: ITeam['id']
+	declare right: Right
+
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 		this.created = new Date(this.created)
@@ -14,7 +30,7 @@ export default class TeamShareBaseModel extends AbstractModel {
 	defaults() {
 		return {
 			teamId: 0,
-			right: 0,
+			right: RIGHTS.READ,
 
 			created: null,
 			updated: null,

src/models/totp.ts

@@ -1,6 +1,16 @@
 import AbstractModel from './abstractModel'
 
-export default class TotpModel extends AbstractModel {
+export interface ITotp extends AbstractModel {
+	secret: string
+	enabled: boolean
+	url: string
+}
+
+export default class TotpModel extends AbstractModel implements ITotp{
+	declare secret: string
+	declare enabled: boolean
+	declare url: string
+
 	defaults() {
 		return {
 			secret: '',

src/models/user.ts

@@ -1,31 +1,33 @@
 import AbstractModel from './abstractModel'
-import UserSettingsModel from '@/models/userSettings'
+import UserSettingsModel, { type IUserSettings } from '@/models/userSettings'
+
+export interface IUser extends AbstractModel {
+	id: number
+	email: string
+	username: string
+	name: string
+
+	created: Date
+	updated: Date
+	settings: IUserSettings
+}
+
+export default class UserModel extends AbstractModel implements IUser {
+	declare id: number
+	declare email: string
+	declare username: string
+	declare name: string
+
+	created: Date
+	updated: Date
+	settings: IUserSettings
 
-export default class UserModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.email
-
-		/** @type {string} */
-		this.username
-
-		/** @type {string} */
-		this.name
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {Date} */
 		this.updated = new Date(this.updated)
 
-		/** @type {UserSettingsModel} */
-		this.settings
-
 		if (this.settings !== null) {
 			this.settings = new UserSettingsModel(this.settings)
 		}
@@ -37,6 +39,7 @@ export default class UserModel extends AbstractModel {
 			email: '',
 			username: '',
 			name: '',
+
 			created: null,
 			updated: null,
 			settings: null,

src/models/userList.ts

@@ -1,7 +1,14 @@
 import UserShareBaseModel from './userShareBase'
+import type { IList } from './list'
+
+export interface IUserList extends UserShareBaseModel {
+	listId: IList['id']
+}
 
 // This class extends the user share model with a 'rights' parameter which is used in sharing
-export default class UserListModel extends UserShareBaseModel {
+export default class UserListModel extends UserShareBaseModel implements IUserList {
+	declare listId: IList['id']
+
 	defaults() {
 		return {
 			...super.defaults(),

src/models/userNamespace.ts

@@ -1,7 +1,14 @@
 import UserShareBaseModel from './userShareBase'
+import type { INamespace } from './namespace'
+
+export interface IUserNamespace extends UserShareBaseModel {
+	namespaceId: INamespace['id']
+}
 
 // This class extends the user share model with a 'rights' parameter which is used in sharing
-export default class UserNamespaceModel extends UserShareBaseModel {
+export default class UserNamespaceModel extends UserShareBaseModel implements IUserNamespace {
+	declare namespaceId: INamespace['id']
+
 	defaults() {
 		return {
 			...super.defaults(),

src/models/userSettings.ts

@@ -1,7 +1,28 @@
 
 import AbstractModel from './abstractModel'
+import type { IList } from './list'
+
+export interface IUserSettings extends AbstractModel {
+	name: string
+	emailRemindersEnabled: boolean
+	discoverableByName: boolean
+	discoverableByEmail: boolean
+	overdueTasksRemindersEnabled: boolean
+	defaultListId: undefined | IList['id']
+	weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6
+	timezone: string
+}
+
+export default class UserSettingsModel extends AbstractModel implements IUserSettings {
+	declare name: string
+	declare emailRemindersEnabled: boolean
+	declare discoverableByName: boolean
+	declare discoverableByEmail: boolean
+	declare overdueTasksRemindersEnabled: boolean
+	declare defaultListId: undefined | IList['id']
+	declare weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6
+	declare timezone: string
 
-export default class UserSettingsModel extends AbstractModel {
 	defaults() {
 		return {
 			name: '',