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?

Raniel César · Accepted Answer · 2022-12-27 18:43:42Z

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?

edited Dec 27, 2022 at 18:43

answered Dec 27, 2022 at 18:43

Raniel César

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jesser Over a year ago

That actually lead me to the answer: interface RefProps { audio: MutableRefObject<HTMLAudioElement> } then const playerRef = useRef<RefProps>(null); The error message went away with that

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related