Typescript Ref of another Ref - Property does not on exist on type

Question

I'm using https://github.com/lhz516/react-h5-audio-player and I am attempting to correctly declare my useRef type without just using useRef<any>(null) .

I can access and update the audio element by using the following (the functionality is to move the recording to a section when you click on the corresponding text transcription).

const playerRef = useRef<any>(null);

const updateCurrentTime = useCallback((aTime: number) => {
   if (playerRef.current !== null) {
      playerRef.current.audio.current.currentTime = aTime;
   }
}, [playerRef]);

return (
   <div>
      <div>
         <ReactAudioPlayer
            ref={playerRef}
            {...playerProps}
         />
      </div>
        <div>
           {props.text.map((aText, aIndex) => (
              <span 
                 key={aIndex} 
                 onClick={() => updateCurrentTime(aText.start)}>
                 {aText.value}
              </span>))}
        <div>
   </div>
)

I tried to do this:

const playerRef = useRef<MutableRefObject<ReactAudioPlayer>>(null);

But I get an error:

Property 'audio' does not exist on type 'MutableRefObject<H5AudioPlayer>'. ts(2329)

I tried playing around and doing an interface but I think I'm missing something as it doesn't change the error message:

interface ReactAudioPlayerRef {
   audio : RefObject<ReactAudioPlayer> | MutableRefObject<ReactAudioPlayer> | ReactAudioPlayer
}

const playerRef = useRef<MutableRefObject<ReactAudioPlayerRef>>(null); // Same error message

Is there a way I can handle this error message without just using the any type?

Answer 1

by reading this code: https://github.com/lhz516/react-h5-audio-player/blob/master/src/index.tsx

i found that they use a ref with HTMLAudioElement for audio

audio = createRef<HTMLAudioElement>()

did u try this?