Error trying to access the error property of AVPlaybackStatus

Question

I'm new to TypeScript and am trying to work with expo-av for audio playback.

The following code gives me an error: TS2339: Property 'error' does not exist on type 'AVPlaybackStatus'.

const { sound, status } = await Audio.Sound.createAsync(track.mp3);
if (status.isLoaded) {
  console.info(status.durationMillis);
}
else {
  console.error("track not loaded", status.error);
}

I looked at the definition of status and found:

export type AVPlaybackStatus =
  | {
      isLoaded: false;
      androidImplementation?: string;
      error?: string; // populated exactly once when an error forces the object to unload
    }
  | {
      isLoaded: true;
      androidImplementation?: string;

      uri: string;

      progressUpdateIntervalMillis: number;
      durationMillis?: number;
      positionMillis: number;
      playableDurationMillis?: number;
      seekMillisToleranceBefore?: number;
      seekMillisToleranceAfter?: number;

      shouldPlay: boolean;
      isPlaying: boolean;
      isBuffering: boolean;

      rate: number;
      shouldCorrectPitch: boolean;
      volume: number;
      isMuted: boolean;
      isLooping: boolean;

      didJustFinish: boolean; // true exactly once when the track plays to finish
    };

I have never seen this construct before but am guessing this is a union or intersection type (?).

How do I access status.error? And what is the typical idiom / construct to work with such types?

Make sure you have `strictNullChecks` enabled in your `tsconfig.json`. — Oblosys, Feb 18 '21 at 17:47
Hm ok, I just disabled that yesterday because of other problems. — Reto Höhener, Feb 18 '21 at 17:48
@Oblosys, can you provide more info on why this is supposed to work? I'm trying to access `positionMillis`, but even when I turn on `strictNullChecks`, it doesn't seem to work. It keeps trying to tell me that that's not a property of the first type. — Jason Masters, Apr 19 '22 at 22:28
@JasonMasters There's more information in the answer below, including a link to the documentation. — Oblosys, Apr 19 '22 at 23:08

score 4 · Accepted Answer · answered Feb 18 '21 at 17:55

4

The pattern is the discriminating union (docs), where TypeScript can exactly determine the type based on one field which is distinct for each of the alternatives. In this case it's the isLoaded boolean field, but for that to work, you do need to have strictNullChecks enabled. Other than that the way you're handling it is completely fine.

answered Feb 18 '21 at 17:55

Oblosys

14,468
3
30
38

2

Thank you for the background! – Reto Höhener Feb 18 '21 at 17:55
I was a little confused. To make it more explicit: adding a `if(isLoaded) { ...} else {...}` allows TS to determine which type the object is. – Jake Mar 16 '23 at 04:45

Error trying to access the error property of AVPlaybackStatus

1 Answers1