convert codebase to typescript

src/components/Main.vue

@@ -8,53 +8,42 @@
     <router-view></router-view>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
 import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
-export default {
-  components: {
-    NavBar,
-    TimeWindows,
-    Chart
-  },
-  setup() {
-    const type = ref(null)
-    const window = ref({})
-    const router = useRouter()
-    const currentRoute = router.currentRoute
-    if (currentRoute.value.params.type) type.value = currentRoute.value.params.type
-    if (currentRoute.value.params.window) window.value = { label: currentRoute.value.params.window }
-    const updateRoute = () => {
-      if (type.value) {
-        const route = {
-          name: 'view',
-          params: {
-            type: type.value,
-            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
-          }
-        }
-        router.push(route)
+import { windows } from '@/utils/helpers'
+import type { Window } from '@/utils/types'
+
+const type = ref<string>('')
+const window = ref<Window | undefined>(undefined)
+const router = useRouter()
+const currentRoute = useRoute()
+if (currentRoute.params.type) type.value = currentRoute.params.type as string
+if (currentRoute.params.window) window.value = windows.find((w) => w.label === currentRoute.params.window)
+
+const updateRoute = () => {
+  if (type.value) {
+    const route = {
+      name: 'view',
+      params: {
+        type: type.value,
+        window: window.value?.label.replace(' ', '-')
       }
     }
-    const setType = (newType) => {
-      type.value = newType
-      updateRoute()
-    }
-    const setWindow = (newWindow) => {
-      window.value = newWindow
-      updateRoute()
-    }
-    return {
-      type,
-      window,
-      setType,
-      setWindow
-    }
+    router.push(route)
   }
 }
+const setType = (newType: string) => {
+  type.value = newType
+  updateRoute()
+}
+const setWindow = (newWindow: Window) => {
+  window.value = newWindow
+  updateRoute()
+}
 </script>
 <style scoped>
 #app {