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

你試過這個嗎？