Typescript 另一个 Ref 的 Ref - 类型上不存在属性

Question

我正在使用https://github.com/lhz516/react-h5-audio-player并且我试图在不使用useRef<any>(null)的情况下正确声明我的useRef类型。

我可以使用以下方法访问和更新音频元素（功能是当您单击相应的文本转录时将录音移动到一个部分）。

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>
)

我试着这样做：

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

但我得到一个错误：

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

我试着玩弄并做一个界面，但我想我遗漏了一些东西，因为它不会改变错误信息：

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

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

有没有一种方法可以在不使用any类型的情况下处理此错误消息？

Answer 1

通过阅读这段代码： https://github.com/lhz516/react-h5-audio-player/blob/master/src/index.tsx

我发现他们将 ref 与 HTMLAudioElement 一起用于音频

audio = createRef<HTMLAudioElement>()

你试过这个吗？