types: fix all type errors

Author: serhalp

app/app.vue

@@ -1,8 +1,19 @@
 <script setup lang="ts">
-const runs = ref([]);
-const error = ref(null);
+interface Run {
+  url: string;
+  status: number;
+  cacheHeaders: Record<string, string>;
+  durationInMs: number;
+}
+
+const runs = ref<Run[]>([]);
+const error = ref<string | null>(null);
 
-const handleRequestFormSubmit = async ({ url }): void => {
+const handleRequestFormSubmit = async ({
+  url,
+}: {
+  url: string;
+}): Promise<void> => {
   try {
     // Destructuring would be confusing, since the response body contains fields named `status` and
     // `headers` (it's a request about a request...)
@@ -18,7 +29,9 @@ const handleRequestFormSubmit = async ({ url }): void => {
     });
 
     error.value = null;
-  } catch (err) {
+    // TODO(serhalp) nuxt doesn't appear to re-export the `FetchError` types from ofetch. Look into
+    // this.
+  } catch (err: any) {
     error.value =
       err?.data?.message ??
       err?.toString?.() ??

app/components/CacheAnalysis.vue

@@ -30,7 +30,7 @@ const cacheAnalysis = computed(() =>
   getCacheAnalysis(props.cacheHeaders, now.value),
 );
 
-let timerId;
+let timerId: NodeJS.Timeout | null = null;
 
 onMounted(() => {
   timerId = setInterval(() => {

app/components/RawCacheHeaders.vue

@@ -3,18 +3,19 @@ const props = defineProps<{
   cacheHeaders: Record<string, string>;
 }>();
 
-const id = useId();
-const el = useTemplateRef(id);
+const el = useTemplateRef("code-block");
 const highlightJson = () => {
-  hljs.highlightElement(el.value);
+  if (el.value != null) {
+    hljs.highlightElement(el.value);
+  }
 };
 onMounted(highlightJson);
 onUpdated(highlightJson);
 </script>
 
 <template>
   <pre>
-    <code :ref="id" class="hljs language-json">{{ JSON.stringify(props.cacheHeaders, null, 2) }}</code>
+    <code ref="code-block" class="hljs language-json">{{ JSON.stringify(props.cacheHeaders, null, 2) }}</code>
   </pre>
 </template>
 

global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  const hljs: {
+    highlightElement: (element: HTMLElement) => void;
+  };
+}
+
+export { };