add config for ts and webpack

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": ["@babel/env", "@babel/typescript"],
+  "plugins": [
+    "@babel/transform-typescript",
+    "@babel/proposal-class-properties",
+    "@babel/transform-async-to-generator"
+  ],
+  "comments": false
+}

package.json

@@ -34,13 +34,17 @@
     "npm": "^7.0.0 || ^8.0.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-typescript": "^7.24.1",
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^2.2.0",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.1.2",
-    "@nextcloud/webpack-vue-config": "^5.2.1",
+    "@nextcloud/webpack-vue-config": "^5.5.1",
+    "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.56.0",
+    "ts-loader": "^9.5.1",
     "webpack": "^5.65.0",
     "webpack-cli": "^5.0.1"
   }
-}
+}

src/App.vue

@@ -6,30 +6,30 @@
 	<NcContent app-name="templateapp">
 		<NcAppNavigation>
 			<NcAppNavigationNew v-if="!loading"
-				:text="t('templateapp', 'New note')"
+				:text="'New note'"
 				:disabled="false"
 				button-id="new-templateapp-button"
 				button-class="icon-add"
 				@click="newNote" />
 			<ul>
 				<NcAppNavigationItem v-for="note in notes"
 					:key="note.title"
-					:name="note.title ? note.title : t('templateapp', 'New note')"
-					:title="note.title ? note.title : t('templateapp', 'New note')"
+					:name="note.title ? note.title : 'New note'"
+					:title="note.title ? note.title : 'New note'"
 					:class="{active: currentNoteId === note.id}"
 					@click="openNote(note)">
 					<template slot="actions">
 						<NcActionButton v-if="note.id === -1"
 							icon="icon-close"
-							@click="cancelNewNote(note)">
+							@click="cancelNewNote">
 							{{
-								t('templateapp', 'Cancel note creation') }}
+								'Cancel note creation' }}
 						</NcActionButton>
 						<NcActionButton v-else
 							icon="icon-delete"
 							@click="deleteNote(note)">
 							{{
-								t('templateapp', 'Delete note') }}
+								'Delete note' }}
 						</NcActionButton>
 					</template>
 				</NcAppNavigationItem>
@@ -44,30 +44,34 @@
 				<textarea ref="content" v-model="currentNote.content" :disabled="updating" />
 				<input type="button"
 					class="primary"
-					:value="t('templateapp', 'Save')"
+					:value="'Save'"
 					:disabled="updating || !savePossible"
 					@click="saveNote">
 			</div>
 			<div v-else id="emptycontent">
 				<div class="icon-file" />
 				<h2>
 					{{
-						t('templateapp', 'Create a note to get started') }}
+						'Create a note to get started' }}
 				</h2>
 			</div>
 		</NcAppContent>
 	</NcContent>
 </template>
 
-<script>
+<script lang="ts">
 import { NcContent, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNew, NcAppContent, NcActionButton } from '@nextcloud/vue'
 
 import '@nextcloud/dialogs/styles/toast.scss'
 import { generateUrl } from '@nextcloud/router'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import Vue from 'vue'
 
-export default {
+
+
+
+export default Vue.extend({
 	name: 'App',
 	components: {
 		NcContent,
@@ -77,9 +81,9 @@ export default {
 		NcAppNavigationItem,
 		NcAppNavigationNew,
 	},
-	data() {
+	data() :App{
 		return {
-			notes: [],
+			notes:  new Array<Note>(),
 			currentNoteId: null,
 			updating: false,
 			loading: true,
@@ -90,19 +94,19 @@ export default {
 		 * Return the currently selected note object
 		 * @return {object|null}
 		 */
-		currentNote() {
+		currentNote():Note|null {
 			if (this.currentNoteId === null) {
 				return null
 			}
-			return this.notes.find((note) => note.id === this.currentNoteId)
+			return this.notes.find((note) => note.id === this.currentNoteId) || null
 		},
 
 		/**
 		 * Returns true if a note is selected and its title is not empty
 		 * @return {boolean}
 		 */
-		savePossible() {
-			return this.currentNote && this.currentNote.title !== ''
+		savePossible():boolean {
+			return this.currentNote != null && this.currentNote.title !== ''
 		},
 	},
 	/**
@@ -114,7 +118,7 @@ export default {
 			this.notes = response.data
 		} catch (e) {
 			console.error(e)
-			showError(t('notestutorial', 'Could not fetch notes'))
+			showError('Could not fetch notes')
 		}
 		this.loading = false
 	},
@@ -124,32 +128,32 @@ export default {
 		 * Create a new note and focus the note content field automatically
 		 * @param {object} note Note object
 		 */
-		openNote(note) {
+		openNote(note:Note):void {
 			if (this.updating) {
 				return
 			}
 			this.currentNoteId = note.id
 			this.$nextTick(() => {
-				this.$refs.content.focus()
+				(this.$refs.title as any).focus()
 			})
 		},
 		/**
 		 * Action triggered when clicking the save button
 		 * create a new note or save
 		 */
-		saveNote() {
+		saveNote():void {
 			if (this.currentNoteId === -1) {
-				this.createNote(this.currentNote)
+				this.createNote(this.currentNote as Note)
 			} else {
-				this.updateNote(this.currentNote)
+				this.updateNote(this.currentNote as Note)
 			}
 		},
 		/**
 		 * Create a new note and focus the note content field automatically
 		 * The note is not yet saved, therefore an id of -1 is used until it
 		 * has been persisted in the backend
 		 */
-		newNote() {
+		newNote():void {
 			if (this.currentNoteId !== -1) {
 				this.currentNoteId = -1
 				this.notes.push({
@@ -158,45 +162,45 @@ export default {
 					content: '',
 				})
 				this.$nextTick(() => {
-					this.$refs.title.focus()
+					(this.$refs.title as any).focus()
 				})
 			}
 		},
 		/**
 		 * Abort creating a new note
 		 */
-		cancelNewNote() {
+		cancelNewNote() :void{
 			this.notes.splice(this.notes.findIndex((note) => note.id === -1), 1)
 			this.currentNoteId = null
 		},
 		/**
 		 * Create a new note by sending the information to the server
 		 * @param {object} note Note object
 		 */
-		async createNote(note) {
+		async createNote(note:Note):Promise<void> {
 			this.updating = true
 			try {
 				const response = await axios.post(generateUrl('/apps/templateapp/notes'), note)
-				const index = this.notes.findIndex((match) => match.id === this.currentNoteId)
+				const index:number = this.notes.findIndex((match) => match.id === this.currentNoteId)
 				this.$set(this.notes, index, response.data)
 				this.currentNoteId = response.data.id
 			} catch (e) {
 				console.error(e)
-				showError(t('notestutorial', 'Could not create the note'))
+				showError('Could not create the note')
 			}
 			this.updating = false
 		},
 		/**
 		 * Update an existing note on the server
-		 * @param {object} note Note object
+		 * @param {Note} note Note object
 		 */
-		async updateNote(note) {
+		async updateNote(note:Note):Promise<void> {
 			this.updating = true
 			try {
 				await axios.put(generateUrl(`/apps/templateapp/notes/${note.id}`), note)
 			} catch (e) {
 				console.error(e)
-				showError(t('notestutorial', 'Could not update the note'))
+				showError('Could not update the note')
 			}
 
 			this.updating = false
@@ -205,21 +209,21 @@ export default {
 		 * Delete a note, remove it from the frontend and show a hint
 		 * @param {object} note Note object
 		 */
-		async deleteNote(note) {
+		async deleteNote(note: Note):Promise<void> {
 			try {
 				await axios.delete(generateUrl(`/apps/templateapp/notes/${note.id}`))
 				this.notes.splice(this.notes.indexOf(note), 1)
 				if (this.currentNoteId === note.id) {
 					this.currentNoteId = null
 				}
-				showSuccess(t('templateapp', 'Note deleted'))
+				showSuccess('Note deleted')
 			} catch (e) {
 				console.error(e)
-				showError(t('templateapp', 'Could not delete the note'))
+				showError('Could not delete the note')
 			}
 		},
-	},
-}
+	}})
+
 </script>
 <style scoped>
 	#app-content > div {

src/test.ts

@@ -0,0 +1,11 @@
+interface App {
+    notes: Array<Note>
+    currentNoteId: number | null
+    updating: boolean
+    loading: boolean
+}
+interface Note {
+    id: number
+    title: string
+    content: string
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "include": ["./src/**/*.ts", "./src/**/*.vue", "./*.d.ts"],
+  "compilerOptions": {
+    "types": ["jest", "node", "vue", "vue-router"],
+    "target": "ESNext",
+    "module": "esnext",
+    // 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,
+    "declaration": false,
+    "noImplicitAny": false,
+    "resolveJsonModule": true,
+    "strict": true,
+    "sourceMap": true,
+    "noEmit": false
+    // "paths": {
+    //   "vue$*": ["./node_modules/vue/*"]
+    // }
+  },
+  "files": ["./vue-shims.d.ts"]
+}

vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from "vue"
+    export default Vue
+}

webpack.config.js

@@ -4,4 +4,19 @@ const webpackConfig = require('@nextcloud/webpack-vue-config')
 
 webpackConfig.devtool = 'source-map'
 
+// // TODO necessary?
+webpackConfig.module.rules = [...Object.values(webpackConfig.module.rules), {
+    test: /\.tsx?$/,
+    loader: 'ts-loader',
+    options: {
+        appendTsSuffixTo: [/\.vue$/],
+        // transpileOnly: true,
+    },
+    exclude: /node_modules/,
+}]
+
+
+console.log(webpackConfig.module.rules)
+
 module.exports = webpackConfig
+