Convert all Vue files to TypeScript

Author: bblanchon

src/App.vue

@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, computed } from "vue"
 
 import AssistanceModal from "./components/AssistanceModal.vue"
 import TroubleshooterStep from "./components/TroubleshooterStep.vue"
-import { getSteps, generateReport } from "./troubleshooter"
+import { getSteps, generateReport, type Option } from "./troubleshooter"
 
-const sleep = (m) => new Promise((r) => setTimeout(r, m))
+const sleep = (m: number) => new Promise((r) => setTimeout(r, m))
 
 const reportCopied = ref(false)
 const hash = ref("")
@@ -24,7 +24,7 @@ const needsAssistance = computed(() => {
 
 const report = computed(() => generateReport(steps.value))
 
-function choose(option) {
+function choose(option: Option) {
   document.location.assign(option.hash)
   window.plausible("ArduinoJson Troubleshooter", {
     props: {

src/components/AssistanceModal.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useTemplateRef } from "vue"
 
 const { report } = defineProps({
@@ -8,12 +8,13 @@ const { report } = defineProps({
   },
 })
 
-const formRef = useTemplateRef("issueForm")
+const formRef = useTemplateRef<HTMLFormElement>("issueForm")
+const modalRef = useTemplateRef<HTMLDivElement>("modal")
 
 function createIssue() {
-  const formData = new FormData(formRef.value)
+  const formData = new FormData(formRef.value!)
 
-  const title = formData.get("title")
+  const title = formData.get("title") as string
   let body = ""
 
   const description = formData.get("description")
@@ -48,12 +49,12 @@ function createIssue() {
   console.log("URL", url)
   window.open(url, "_blank")
 
-  bootstrap.Modal.getInstance(this.$el).hide()
+  bootstrap.Modal.getInstance(modalRef.value!).hide()
 }
 </script>
 
 <template>
-  <div class="modal fade">
+  <div class="modal fade" ref="modal">
     <div class="modal-dialog modal-dialog-scrollable modal-lg">
       <form class="modal-content" ref="issueForm" @submit.prevent="createIssue">
         <div class="modal-header bg-primary text-white">

src/components/TroubleshooterStep.vue

@@ -1,30 +1,27 @@
-<script setup>
+<script setup lang="ts">
 import { inject, onMounted, useTemplateRef } from "vue"
 
 import TroubleshooterStepOption from "./TroubleshooterStepOption.vue"
+import type { Option, Step } from "@/troubleshooter"
 
-const debug = inject("debug")
+const debug = inject<boolean>("debug")
 
-const emit = defineEmits(["choose"])
+const emit = defineEmits<{
+  choose: [Option]
+}>()
 
-const props = defineProps({
-  step: {
-    type: Object,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-})
+defineProps<{
+  step: Step
+  active?: boolean
+}>()
 
 const containerRef = useTemplateRef("container")
 
 onMounted(() => {
-  const { top, bottom } = containerRef.value.getBoundingClientRect()
+  const { top } = containerRef.value!.getBoundingClientRect()
   const minVisibleHeight = 50
   const isVisible = top + minVisibleHeight < window.innerHeight
-  if (!isVisible) containerRef.value.scrollIntoView({ behavior: "smooth" })
+  if (!isVisible) containerRef.value!.scrollIntoView({ behavior: "smooth" })
 })
 </script>
 
@@ -46,12 +43,12 @@ onMounted(() => {
         v-for="option in step.options"
         :key="option.hash"
         :option="option"
-        @click="$emit('choose', option)"
+        @click="emit('choose', option)"
       />
     </div>
     <p v-if="debug" class="small">
-      <a :href="'vscode://file/' + step.fullPath.replaceAll('\\', '/')">
-        {{ step.filename }}
+      <a :href="'vscode://file/' + step.fullPath!.replaceAll('\\', '/')">
+        {{ step.filename! }}
       </a>
     </p>
   </div>

src/components/TroubleshooterStepOption.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { inject } from "vue"
 
 defineProps({

src/globals.d.ts

@@ -0,0 +1,16 @@
+declare namespace bootstrap {
+  interface Modal {
+    hide()
+  }
+
+  const Modal: {
+    getInstance(el: HTMLElement): Modal
+  }
+}
+
+function plausible(
+  eventName: string,
+  options?: {
+    props?: { [propName: string]: string | number | boolean }
+  },
+): void

src/troubleshooter.ts

@@ -1,7 +1,7 @@
 /// <reference path="../plugins/troubleshooter/client.d.ts" />
 import pages from "virtual:troubleshooter"
 
-interface Option {
+export interface Option {
   id: string
   label: string
   summary: string
@@ -12,13 +12,15 @@ interface Option {
   selected: boolean
 }
 
-interface Step {
+export interface Step {
   content: string
   number: number
   hash: string
   options?: Option[]
   selectedOption?: Option
   tags?: string[]
+  filename?: string // only in dev
+  fullPath?: string // only in dev
 }
 
 function makeStep(pageId: number, hash?: string, number?: number): Step {

tsconfig.app.json

@@ -14,6 +14,10 @@
       "@/*": [
         "./src/*"
       ]
-    }
-  }
+    },
+    "lib": [
+      "ES2021",
+      "DOM",
+    ],
+  },
 }