Convert app.vue to TypeScript

reposense · Mar 11, 2023 · 4bfc3aa · 4bfc3aa
1 parent dfbb06f
commit 4bfc3aa
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
@@ -75,24 +75,26 @@
       input(type="file", accept=".zip", v-on:change="updateReportZip")
 </template>
 
-<script>
+<script lang='ts'>
 import JSZip from 'jszip';
 import LoadingOverlay from 'vue-loading-overlay';
 import { mapState } from 'vuex';
+import { defineComponent } from 'vue';
 
 import cResizer from './components/c-resizer.vue';
 import cZoom from './views/c-zoom.vue';
 import cSummary from './views/c-summary.vue';
 import cAuthorship from './views/c-authorship.vue';
+import { Repo } from './types/types';
 
 const loadingResourcesMessage = 'Loading resources...';
 
-const app = {
+const app = defineComponent({
   name: 'app',
   data() {
     return {
-      repos: {},
-      users: [],
+      repos: {} as { [key: string]: Repo },
+      users: [] as Repo[],
       userUpdated: false,
 
       loadingOverlayOpacity: 1,
@@ -116,10 +118,13 @@ const app = {
   },
   methods: {
     // model functions //
-    updateReportZip(evt) {
+    updateReportZip(evt: Event) {
       this.users = [];
-
-      JSZip.loadAsync(evt.target.files[0])
+      const target = evt.target as HTMLInputElement;
+      if (target.files === null) {
+        return;
+      }
+      JSZip.loadAsync(target.files[0])
         .then((zip) => {
           window.REPORT_ZIP = zip;
         }, () => {
@@ -141,15 +146,16 @@ const app = {
       this.userUpdated = false;
       await this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1);
       try {
+        const summary = await window.api.loadSummary();
+        if (summary === null) {
+          return;
+        }
         const {
           creationDate,
           reportGenerationTime,
           errorMessages,
           names,
-        } = await window.api.loadSummary();
-        if (names === null) {
-          return;
-        }
+        } = summary;
         this.creationDate = creationDate;
         this.reportGenerationTime = reportGenerationTime;
         this.errorMessages = errorMessages;
@@ -168,7 +174,7 @@ const app = {
       }
     },
     getUsers() {
-      const full = [];
+      const full: Repo[] = [];
       Object.keys(this.repos).forEach((repo) => {
         if (this.repos[repo].users) {
           full.push(this.repos[repo]);
@@ -178,9 +184,9 @@ const app = {
     },
 
     // handle opening of sidebar //
-    activateTab(tabName) {
+    activateTab(tabName: string) {
       if (this.$refs.tabWrapper) {
-        this.$refs.tabWrapper.scrollTop = 0;
+        (this.$refs.tabWrapper as HTMLElement).scrollTop = 0;
       }
 
       this.tabType = tabName;
@@ -189,7 +195,7 @@ const app = {
       window.encodeHash();
     },
 
-    renderAuthorShipTabHash(minDate, maxDate) {
+    renderAuthorShipTabHash(minDate: string, maxDate: string) {
       const hash = window.hashParams;
       const info = {
         author: hash.tabAuthor,
@@ -318,7 +324,7 @@ const app = {
     }
     this.updateReportDir();
   },
-};
+});
 
 window.app = app;