Convert beacon.js to TypeScript

src/components/BeaconController.vue

@@ -1,5 +1,5 @@
 <template>
-  <p v-if="beacon.name">
+  <p v-if="beacon.location">
     <button
       id="toggleBeacon"
       class="beacon-button"
@@ -8,7 +8,7 @@
     >
       {{ beacon.enabled ? '⏸' : '▶' }}
     </button>
-    <span id="currentBeacon">{{ beacon.name }}</span>
+    <span id="currentBeacon">{{ beacon.location.name }}</span>
     <button
       class="beacon-button"
       id="clearBeacon"
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 
 const toggleBeacon = () => {
   if (beacon.enabled) {

src/components/CalloutList.vue

@@ -28,18 +28,18 @@
 
 <script setup>
 import BeaconController from './BeaconController.vue'
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 
 const props = defineProps({
   callouts: Array,
 })
 
 const startBeacon = (e) => {
-  beacon.set(
-    e.target.getAttribute("data-name"),
-    e.target.getAttribute('data-latitude'),
-    e.target.getAttribute('data-longitude')
-  );
+  beacon.set({
+    name: e.target.getAttribute("data-name"),
+    latitude: e.target.getAttribute('data-latitude'),
+    longitude: e.target.getAttribute('data-longitude')
+  });
   beacon.start();
 };
 </script>

src/components/WelcomeScreen.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 import { useDeviceOrientation } from "../composables/compass.js";
 import { myLocation } from '../state/location';
 import { initializeAudioQueue, playSpatialSpeech } from '../state/audio';

src/state/audio.ts

@@ -252,9 +252,10 @@ export function createSpatialPlayer(): SpatialPlayer {
 // Create a WebAudio panner with the settings that will be used by both
 // beacons and callouts.
 // https://developer.mozilla.org/en-US/docs/Web/API/PannerNode
-export function createPanner(audioContext: AudioContext): PannerNode & {
+export type PannerNodeWithCoordinates = PannerNode & {
   setCoordinates: (x: number, y: number) => void;
-} {
+}
+export function createPanner(audioContext: AudioContext): PannerNodeWithCoordinates {
   const panner = audioContext.createPanner();
   panner.panningModel = "HRTF";
   // Keep a constant volume regardless of distance from source.