Convert more components to TypeScript

src/components/BeaconController.vue

@@ -20,7 +20,7 @@
   </p>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { beacon } from '../state/beacon';
 
 const toggleBeacon = () => {

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();
 };

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>

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}

src/state/audio.ts

@@ -98,15 +98,15 @@ export async function playSpatialSpeech(text: string, voiceIndex: number, rate:
   });
 }
 
-type SpeechSynthesisVoiceWithIndex = SpeechSynthesisVoice & {
+export type SpeechSynthesisVoiceWithIndex = SpeechSynthesisVoice & {
   voiceIndex: number;
 }
 
 interface QueuedEffect {
   soundUrl: string;
   location?: Feature<Point>;
 }
-interface QueuedSpeech {
+export interface QueuedSpeech {
   text: string;
   location?: Feature<Point>;
   includeDistance?: boolean;