From 237f64ff34bed7ee45af42156879ec745dd693e1 Mon Sep 17 00:00:00 2001
From: "Daniel W. Steinbrook" <dsteinbrook@gmail.com>
Date: Thu, 21 Nov 2024 23:25:37 -0500
Subject: [PATCH] Convert more components to TypeScript

---
 src/components/BeaconController.vue |  2 +-
 src/components/CalloutList.vue      | 27 +++++++++++++++------------
 src/components/VoiceSelector.vue    | 14 ++++++++------
 src/shims-vue.d.ts                  |  5 +++++
 src/state/audio.ts                  |  4 ++--
 5 files changed, 31 insertions(+), 21 deletions(-)
 create mode 100644 src/shims-vue.d.ts

diff --git a/src/components/BeaconController.vue b/src/components/BeaconController.vue
index e8d91f5..521c8ac 100644
--- a/src/components/BeaconController.vue
+++ b/src/components/BeaconController.vue
@@ -20,7 +20,7 @@
   </p>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { beacon } from '../state/beacon';
 
 const toggleBeacon = () => {
diff --git a/src/components/CalloutList.vue b/src/components/CalloutList.vue
index af57b2f..b11daa4 100644
--- a/src/components/CalloutList.vue
+++ b/src/components/CalloutList.vue
@@ -9,15 +9,15 @@
           class="beacon-button"
           @click="startBeacon"
           :data-name="callout.text"
-          :data-latitude="callout.location.geometry.coordinates[1]"
-          :data-longitude="callout.location.geometry.coordinates[0]"
+          :data-latitude="callout.location!.geometry.coordinates[1]"
+          :data-longitude="callout.location!.geometry.coordinates[0]"
         >
           🔊
         </button>
         <RouterLink :to="{ name: 'Detail', params: {
           name: callout.text,
-          lat: callout.location.geometry.coordinates[1],
-          lon: callout.location.geometry.coordinates[0],
+          lat: callout.location!.geometry.coordinates[1],
+          lon: callout.location!.geometry.coordinates[0],
          } }">
           {{ callout.text }}
         </RouterLink>
@@ -26,19 +26,22 @@
   </section>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import BeaconController from './BeaconController.vue'
+import { QueuedSpeech } from '../state/audio';
 import { beacon } from '../state/beacon';
 
-const props = defineProps({
-  callouts: Array,
-})
+interface CalloutListProps {
+  callouts: QueuedSpeech[];
+}
+const props = defineProps<CalloutListProps>();
 
-const startBeacon = (e) => {
+const startBeacon = (e: MouseEvent) => {
+  let target = e.target as HTMLButtonElement;
   beacon.set({
-    name: e.target.getAttribute("data-name"),
-    latitude: e.target.getAttribute('data-latitude'),
-    longitude: e.target.getAttribute('data-longitude')
+    name: target.getAttribute("data-name")!,
+    latitude: +target.getAttribute('data-latitude')!,
+    longitude: +target.getAttribute('data-longitude')!
   });
   beacon.start();
 };
diff --git a/src/components/VoiceSelector.vue b/src/components/VoiceSelector.vue
index d234694..41a80d9 100644
--- a/src/components/VoiceSelector.vue
+++ b/src/components/VoiceSelector.vue
@@ -17,12 +17,12 @@
   </select>
 </template>
 
-<script setup>
-import { audioQueue } from '../state/audio';
+<script setup lang="ts">
+import { audioQueue, SpeechSynthesisVoiceWithIndex } from '../state/audio';
 import { ref, onMounted, watch } from 'vue';
 
-const voices = ref([]);
-const selectedVoice = ref(null);
+const voices = ref<SpeechSynthesisVoiceWithIndex[]>([]);
+const selectedVoice = ref<number | null>(null);
 
 onMounted(async () => {
   if (window.speechSynthesis) {
@@ -34,12 +34,14 @@ onMounted(async () => {
 
 const reloadVoices = async () => {
   voices.value = await audioQueue.loadVoices();
-  selectedVoice.value = audioQueue.voice.voiceIndex;
+  if (audioQueue.voice) {
+    selectedVoice.value = audioQueue.voice.voiceIndex;
+  }
 };
 
 watch(selectedVoice, (newValue, oldValue) => {
   if (newValue !== null) {
-    audioQueue.setVoice(selectedVoice.value);
+    audioQueue.setVoice(newValue);
   }
 });
 </script>
\ No newline at end of file
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..e98bce1
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
\ No newline at end of file
diff --git a/src/state/audio.ts b/src/state/audio.ts
index 1a5d260..705f6c7 100644
--- a/src/state/audio.ts
+++ b/src/state/audio.ts
@@ -98,7 +98,7 @@ export async function playSpatialSpeech(text: string, voiceIndex: number, rate:
   });
 }
 
-type SpeechSynthesisVoiceWithIndex = SpeechSynthesisVoice & {
+export type SpeechSynthesisVoiceWithIndex = SpeechSynthesisVoice & {
   voiceIndex: number;
 }
 
@@ -106,7 +106,7 @@ interface QueuedEffect {
   soundUrl: string;
   location?: Feature<Point>;
 }
-interface QueuedSpeech {
+export interface QueuedSpeech {
   text: string;
   location?: Feature<Point>;
   includeDistance?: boolean;