From 0d1cd991666b62473d77df3d0b4a69ca08ba9f62 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:32:40 +0800
Subject: [PATCH] [#1936] Migrate c-resizer.vue to typescript (#2038)

Currently, there is still some JavaScript code which remains unmigrated.
This allows for type unsafe code to be written, potentially resulting in
unintended behavior.

Let's migrate the rest of the JavaScript code to TypeScript code to
facilitate future changes to the code.
---
 frontend/src/components/c-resizer.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/c-resizer.vue b/frontend/src/components/c-resizer.vue
index 4b510029c3..a315140e78 100644
--- a/frontend/src/components/c-resizer.vue
+++ b/frontend/src/components/c-resizer.vue
@@ -21,24 +21,30 @@
     slot(name="right")
 </template>
 
-<script>
+<script lang='ts'>
 import { mapState } from 'vuex';
+import { defineComponent } from 'vue';
 
 const DRAG_BAR_WIDTH = 13.25;
 const SCROLL_BAR_WIDTH = 17;
 const GUIDE_BAR_WIDTH = 2;
 
-const throttledEvent = (delay, handler) => {
+/** The following eslint suppression suppresses a rare false positive case where event cannot be accessed due to
+ *  handler being a lambda function parameter. The explicit lambda function here allows us to easily discern handler's
+ *  parameters, i.e. an event of type MouseEvent.
+ */
+// eslint-disable-next-line no-unused-vars
+const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown) => {
   let lastCalled = 0;
-  return (...args) => {
+  return (event: MouseEvent) => {
     if (Date.now() - lastCalled > delay) {
       lastCalled = Date.now();
-      handler(...args);
+      handler(event);
     }
   };
 };
 
-export default {
+export default defineComponent({
   name: 'c-resizer',
 
   data() {
@@ -68,7 +74,7 @@ export default {
 
     mouseMove() {
       if (this.isResizing) {
-        return throttledEvent(25, (event) => {
+        return throttledEvent(25, (event: MouseEvent) => {
           this.guideWidth = (
             Math.min(
               Math.max(
@@ -102,5 +108,5 @@ export default {
       this.$store.commit('updateTabState', false);
     },
   },
-};
+});
 </script>