fix(types): resolve Typescript issues and add CI job to check for type issues

.github/workflows/lint-typescript.yml

@@ -0,0 +1,57 @@
+# This workflow is provided via the organization template repository
+#
+# https://github.com/nextcloud-libraries/.github
+# https://docs.github.com/en/actions/learn-github-actions/sharing-workflows-with-your-organization
+#
+# SPDX-FileCopyrightText: 2023-2024 Nextcloud GmbH and Nextcloud contributors
+# SPDX-License-Identifier: MIT
+
+name: Type checking
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - master
+      - stable*
+
+permissions:
+  contents: read
+
+concurrency:
+  group: lint-typescript-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    name: Lint Typescript
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          persist-credentials: false
+
+      - name: Read package.json
+        uses: nextcloud-libraries/parse-package-engines-action@122ae05d4257008180a514e1ddeb0c1b9d094bdd # v0.1.0
+        id: versions
+
+      - name: Set up node
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        with:
+          node-version: ${{ steps.versions.outputs.node-version }}
+
+      - name: Set up npm
+        run: npm i -g 'npm@${{ steps.versions.outputs.package-manager-version }}'
+
+      - name: Install dependencies
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+        run: npm ci
+
+      - name: Check types
+        run: |
+          npm run --if-present check-types
+          npm run --if-present ts:check

lib/components/FilePicker/FileList.vue

@@ -238,8 +238,8 @@ const fileContainer = ref<HTMLDivElement>()
 		const nodes = fileContainer.value?.parentElement?.children || []
 		let height = fileContainer.value?.parentElement?.clientHeight || 450
 		for (let index = 0; index < nodes.length; index++) {
-			if (!fileContainer.value?.isSameNode(nodes[index])) {
-				height -= nodes[index].clientHeight
+			if (!fileContainer.value?.isSameNode(nodes[index]!)) {
+				height -= nodes[index]!.clientHeight
 			}
 		}
 		// container height - 50px table header / row height of 50px

lib/components/FilePicker/FilePickerNavigation.vue

@@ -92,7 +92,7 @@ const currentViewObject = computed(() => availableViews.filter((v) => v.id === p
  *
  * @param value The new filter value
  */
-const updateFilterValue = (value: string) => emit('update:filterString', value)
+const updateFilterValue = (value: string | number) => emit('update:filterString', value.toString())
 </script>
 
 <style scoped lang="scss">

lib/components/PublicAuthPrompt.vue

@@ -74,11 +74,9 @@ watch(() => props.nickname, () => {
 watch(name, (newName) => {
 	// Check validity of the new name
 	const validity = getGuestNameValidity(newName)
-	if (!validity) {
+	if (!validity && inputElement.value) {
 		// If the nickname is not valid, show an error
-		inputElement.value.setCustomValidity(validity)
-		inputElement.value.reportValidity()
-		inputElement.value.focus()
+		setCustomValidity(validity)
 		return
 	}
 })
@@ -127,25 +125,19 @@ function onSubmit() {
 	const validity = getGuestNameValidity(nickname)
 	if (validity) {
 		// If the nickname is not valid, show an error
-		inputElement.value.setCustomValidity(validity)
-		inputElement.value.reportValidity()
-		inputElement.value.focus()
+		setCustomValidity(validity)
 		return
 	}
 
 	if (nickname === '') {
 		// Show error if the nickname is empty
-		inputElement.value.setCustomValidity(t('You cannot leave the name empty.'))
-		inputElement.value.reportValidity()
-		inputElement.value.focus()
+		setCustomValidity(t('You cannot leave the name empty.'))
 		return
 	}
 
 	if (nickname.length < 2) {
 		// Show error if the nickname is too short
-		inputElement.value.setCustomValidity(t('Please enter a name with at least 2 characters.'))
-		inputElement.value.reportValidity()
-		inputElement.value.focus()
+		setCustomValidity(t('Please enter a name with at least 2 characters.'))
 		return
 	}
 
@@ -155,7 +147,7 @@ function onSubmit() {
 	} catch (error) {
 		logger.error('Failed to set nickname', { error })
 		showError(t('Failed to set nickname.'))
-		inputElement.value.focus()
+		inputElement.value!.focus()
 		return
 	}
 
@@ -165,6 +157,21 @@ function onSubmit() {
 	// Close the dialog
 	emit('close', name.value)
 }
+
+/**
+ * Set custom validity message on the input
+ *
+ * @param message - The validity message
+ */
+function setCustomValidity(message: string) {
+	if (inputElement.value) {
+		// @ts-expect-error -- not exposed by the library but exists (todo: fix in vue library)
+		inputElement.value.setCustomValidity(message)
+		// @ts-expect-error -- not exposed by the library but exists (todo: fix in vue library)
+		inputElement.value.reportValidity()
+		inputElement.value.focus()
+	}
+}
 </script>
 
 <template>

lib/composables/views.spec.ts

@@ -29,6 +29,6 @@ describe('views composable', () => {
 		const { availableViews, allViews } = useViews(ref(true))
 		expect(allViews.length).toBe(3)
 		expect(availableViews.length).toBe(1)
-		expect(availableViews[0].id).toBe('files')
+		expect(availableViews[0]!.id).toBe('files')
 	})
 })

lib/css-modules.d.ts

@@ -0,0 +1,14 @@
+/**
+ * SPDX-FileCopyrightText: 2023-2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+declare module '*.module.css' {
+	const content: Record<string, string>
+	export default content
+}
+
+declare module '*.module.scss' {
+	const content: Record<string, string>
+	export default content
+}

lib/global.d.ts

@@ -12,7 +12,3 @@ declare global {
 		translations: GettextTranslation[]
 	}[]
 }
-
-// Allow css modules
-declare module '*.module.css';
-declare module '*.module.scss';

package.json

@@ -37,6 +37,7 @@
     "stylelint:fix": "stylelint lib/**/*.vue --fix",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
+    "ts:check": "vue-tsc --noEmit",
     "watch": "vite --mode development build --watch"
   },
   "browserslist": [
@@ -91,7 +92,8 @@
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^7.2.7",
     "vitest": "^4.0.10",
-    "vue-material-design-icons": "^5.3.1"
+    "vue-material-design-icons": "^5.3.1",
+    "vue-tsc": "^3.1.8"
   },
   "engines": {
     "node": "^20 || ^22 || ^24"