fix(config): Adjust typescript config to allow `.ts` imports and Typescript in Vue files

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/files/src/components/DragAndDropNotice.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script lang="ts">
-import type { Upload } from '@nextcloud/upload'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { getUploader } from '@nextcloud/upload'

apps/files/src/components/FilesListVirtual.vue

@@ -72,20 +72,21 @@ import { getFileListHeaders, Folder, View, getFileActions } from '@nextcloud/fil
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
+
+import { action as sidebarAction } from '../actions/sidebarAction.ts'
+import { useUserConfigStore } from '../store/userconfig.ts'
 
-import { action as sidebarAction } from '../actions/sidebarAction.js'
-import { useUserConfigStore } from '../store/userconfig.js'
 import FileEntry from './FileEntry.vue'
 import FileEntryGrid from './FileEntryGrid.vue'
 import FilesListHeader from './FilesListHeader.vue'
 import FilesListTableFooter from './FilesListTableFooter.vue'
 import FilesListTableHeader from './FilesListTableHeader.vue'
-import filesListWidthMixin from '../mixins/filesListWidth.js'
-import logger from '../logger.js'
+import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import VirtualList from './VirtualList.vue'
+import logger from '../logger.js'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FilesListVirtual',
 
 	components: {

apps/files/src/views/FilesList.vue

@@ -113,7 +113,7 @@ import { orderBy } from 'natural-orderby'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { Type } from '@nextcloud/sharing'
 import { UploadPicker } from '@nextcloud/upload'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 import LinkIcon from 'vue-material-design-icons/Link.vue'
 import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
@@ -125,23 +125,23 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import ShareVariantIcon from 'vue-material-design-icons/ShareVariant.vue'
 import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
 
-import { action as sidebarAction } from '../actions/sidebarAction.js'
-import { useFilesStore } from '../store/files.js'
-import { usePathsStore } from '../store/paths.js'
-import { useSelectionStore } from '../store/selection.js'
-import { useUploaderStore } from '../store/uploader.js'
-import { useUserConfigStore } from '../store/userconfig.js'
-import { useViewConfigStore } from '../store/viewConfig.js'
+import { action as sidebarAction } from '../actions/sidebarAction.ts'
+import { useFilesStore } from '../store/files.ts'
+import { usePathsStore } from '../store/paths.ts'
+import { useSelectionStore } from '../store/selection.ts'
+import { useUploaderStore } from '../store/uploader.ts'
+import { useUserConfigStore } from '../store/userconfig.ts'
+import { useViewConfigStore } from '../store/viewConfig.ts'
 import BreadCrumbs from '../components/BreadCrumbs.vue'
 import FilesListVirtual from '../components/FilesListVirtual.vue'
-import filesListWidthMixin from '../mixins/filesListWidth.js'
-import filesSortingMixin from '../mixins/filesSorting.js'
+import filesListWidthMixin from '../mixins/filesListWidth.ts'
+import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
 import DragAndDropNotice from '../components/DragAndDropNotice.vue'
 
 const isSharingEnabled = (getCapabilities() as { files_sharing?: boolean })?.files_sharing !== undefined
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FilesList',
 
 	components: {

tsconfig.json

@@ -1,12 +1,15 @@
 {
 	"extends": "@vue/tsconfig/tsconfig.json",
-	"include": ["./apps/**/*.ts", "./core/**/*.ts", "./*.d.ts"],
+	"include": ["./apps/**/*.ts", "./apps/**/*.vue", "./core/**/*.ts", "./*.d.ts"],
 	"compilerOptions": {
-		"types": ["jest", "node", "vue"],
+		"types": ["jest", "node", "vue", "vue-router"],
 		"outDir": "./dist/",
 		"target": "ESNext",
 		"module": "esnext",
-		"moduleResolution": "node",
+		// Set module resolution to bundler and `noEmit` to be able to set `allowImportingTsExtensions`, so we can import Typescript with .ts extension
+		"moduleResolution": "Bundler",
+		"allowImportingTsExtensions": true,
+		"noEmit": true,
 		// Allow ts to import js files
 		"allowJs": true,
 		"allowSyntheticDefaultImports": true,
@@ -19,6 +22,7 @@
 		// these options are overrides used only by ts-node
 		// same as our --compilerOptions flag and our TS_NODE_COMPILER_OPTIONS environment variable
 		"compilerOptions": {
+			"moduleResolution": "node",
 			"module": "commonjs",
 			"verbatimModuleSyntax": false
 		}