refactor: fixed all TS errors

Author: technikhil314

components/buttons/stickyCopy.vue

@@ -49,7 +49,7 @@ export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
-      default: () => {},
+      required: true,
     },
     ariaLabel: {
       type: String,
@@ -62,7 +62,7 @@ export default Vue.extend({
     }
   },
   methods: {
-    handleClick(e) {
+    handleClick(e: MouseEvent) {
       this.copied = true
       this.clickHandler(e)
       setTimeout(() => {

components/diffActionBar.vue

@@ -37,16 +37,22 @@ import ToggleInSync from './buttons/toggleInSync.vue'
 import NextDiff from './buttons/nextDiff.vue'
 import CopyLink from './buttons/copyLink.vue'
 import { putToClipboard } from '~/helpers/utils'
+interface Data {
+  comparator: HTMLElement | null
+  comparer: HTMLElement | null
+  copied: Boolean
+  treeWalker: TreeWalker | null
+}
 export default Vue.extend({
   components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
-  data() {
+  data(): Data {
     return {
-      copied: this.copied,
+      copied: false,
+      comparator: null,
+      comparer: null,
+      treeWalker: null,
     }
   },
-  beforeCreate() {
-    this.copied = false
-  },
   mounted() {
     const lhsDiffNode = document.getElementById('lhsDiff')
     const rhsDiffNode = document.getElementById('rhsDiff')
@@ -66,11 +72,14 @@ export default Vue.extend({
         comparer,
         NodeFilter.SHOW_ELEMENT,
         {
-          acceptNode: (node) => {
-            return (
-              node.classList.contains('bg-red-200') ||
-              node.classList.contains('bg-green-200')
-            )
+          acceptNode: (node: Node) => {
+            if (
+              (node as HTMLDivElement).classList.contains('bg-red-200') ||
+              (node as HTMLDivElement).classList.contains('bg-green-200')
+            ) {
+              return NodeFilter.FILTER_ACCEPT
+            }
+            return NodeFilter.FILTER_REJECT
           },
         }
       )
@@ -92,52 +101,63 @@ export default Vue.extend({
       this.$store.commit('scrollInSync/toggle')
     },
     goToNextDiff() {
-      const currentNode = this.treeWalker.currentNode
-      const nextNode = this.treeWalker.nextNode()
+      const currentNode = this.treeWalker?.currentNode
+      const nextNode = this.treeWalker?.nextNode()
       if (nextNode) {
         const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode.parentElement.children,
+          currentNode?.parentElement?.children,
           currentNode
         )
         const nextNodeIndex = Array.prototype.indexOf.call(
-          nextNode.parentElement.children,
+          nextNode.parentElement?.children,
           nextNode
         )
-        const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
-        const comparatorNextNode = this.comparator.children[nextNodeIndex]
+        const comparatorCurrentNode =
+          this.comparator?.children[currentNodeIndex]
+        const comparatorNextNode = this.comparator?.children[nextNodeIndex]
         this.toggleDiffHunkAndScrollIntoView(
-          [currentNode, comparatorCurrentNode],
-          [nextNode, comparatorNextNode]
+          [
+            currentNode as HTMLDivElement,
+            comparatorCurrentNode as HTMLDivElement,
+          ],
+          [nextNode as HTMLDivElement, comparatorNextNode as HTMLDivElement]
         )
       }
     },
     goToPreviousDiff() {
-      const currentNode = this.treeWalker.currentNode
-      const prevNode = this.treeWalker.previousNode()
+      const currentNode = this.treeWalker?.currentNode
+      const prevNode = this.treeWalker?.previousNode()
       if (prevNode) {
         const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode.parentElement.children,
+          currentNode?.parentElement?.children,
           currentNode
         )
         const prevNodeIndex = Array.prototype.indexOf.call(
-          prevNode.parentElement.children,
+          prevNode.parentElement?.children,
           prevNode
         )
-        const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
-        const comparatorPrevNode = this.comparator.children[prevNodeIndex]
+        const comparatorCurrentNode =
+          this.comparator?.children[currentNodeIndex]
+        const comparatorPrevNode = this.comparator?.children[prevNodeIndex]
         this.toggleDiffHunkAndScrollIntoView(
-          [currentNode, comparatorCurrentNode],
-          [prevNode, comparatorPrevNode]
+          [
+            currentNode as HTMLDivElement,
+            comparatorCurrentNode as HTMLDivElement,
+          ],
+          [prevNode as HTMLDivElement, comparatorPrevNode as HTMLDivElement]
         )
       }
     },
-    toggleDiffHunkAndScrollIntoView(unselectedNodes, selectedNodes) {
+    toggleDiffHunkAndScrollIntoView(
+      unselectedNodes: Array<HTMLDivElement | undefined> = [],
+      selectedNodes: Array<HTMLDivElement | undefined> = []
+    ) {
       unselectedNodes.forEach((element) => {
-        element.querySelector('p').classList.remove('selected')
+        element?.querySelector('p')?.classList.remove('selected')
       })
       selectedNodes.forEach((element) => {
-        element.querySelector('p').classList.add('selected')
-        element.scrollIntoView()
+        element?.querySelector('p')?.classList.add('selected')
+        element?.scrollIntoView()
       })
     },
   },

components/singleDiff.vue

@@ -58,9 +58,10 @@ export default Vue.extend({
     },
   },
   methods: {
-    copyTextToClipboard(e) {
+    copyTextToClipboard(e: Event) {
+      const copyTextButton = e.currentTarget as HTMLButtonElement
       putToClipboard(
-        e.currentTarget.parentNode.parentNode.innerText
+        (copyTextButton.parentNode?.parentNode as HTMLElement).innerText
           .split('\n\n')
           .join('\n'),
         'Text copied to your clipboard',

pages/diff.vue

@@ -93,8 +93,8 @@ export default Vue.extend({
   layout: 'main',
   data() {
     return {
-      lhsDiff: this.lhsDiff,
-      rhsDiff: this.rhsDiff,
+      lhsDiff: [],
+      rhsDiff: [],
       copied: false,
     }
   },
@@ -103,13 +103,13 @@ export default Vue.extend({
     const gunzip = pako.ungzip(Buffer.from(undoUrlSafeBase64(_diff), 'base64'))
     const diff = JSON.parse(Buffer.from(gunzip).toString('utf8'))
     this.lhsDiff = diff
-      .map((item) => {
+      .map((item: Array<string | number>) => {
         const hunkState = item[0]
         if (hunkState === -1 || hunkState === 0) {
           const className =
             hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
-            item[1]
+            item[1] as string
           )}</span>`
         }
         return false
@@ -118,13 +118,13 @@ export default Vue.extend({
       .join('')
       .split('\n')
     this.rhsDiff = diff
-      .map((item) => {
+      .map((item: Array<string | number>) => {
         const hunkState = item[0]
         if (hunkState === 1 || hunkState === 0) {
           const className =
             hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
-            item[1]
+            item[1] as string
           )}</span>`
         }
         return false
@@ -142,7 +142,7 @@ export default Vue.extend({
     )
   },
   methods: {
-    putToClipboard(textToPut, toastContent) {
+    putToClipboard(textToPut: string, toastContent: string) {
       navigator.clipboard.writeText(textToPut)
       this.$store.commit('toast/show', {
         show: true,
@@ -173,9 +173,10 @@ export default Vue.extend({
         this.copied = false
       }, 5000)
     },
-    copyTextToClipboard(e) {
+    copyTextToClipboard(e: Event) {
+      const copyTextButton = e.currentTarget as HTMLButtonElement
       this.putToClipboard(
-        e.currentTarget.parentNode.parentNode.innerText
+        (copyTextButton.parentNode?.parentNode as HTMLElement).innerText
           .split('\n\n')
           .join('\n'),
         'Text copied to your clipboard'