用typescript正确定义RefObject

Question

大家好，我是typescript的新手，我正在尝试为类型HTMLAudioElement的RefObject定义类型，但我得到这个错误。

Type 'MutableRefObject<HTMLAudioElement>' is missing the following properties from type 'HTMLAudioElement': addEventListener, removeEventListener, autoplay, buffered, and 320 more.

我把类型定义为

export interface AudioState {
audioRef: RefObject<HTMLAudioElement | undefined>;
playing: boolean;
progress: number;
duration: number;
volume: number;
}

我正试着这样使用它;

dispatch({
name: 'SET_AUDIO',
audioRef: useRef<HTMLAudioElement | undefined>(new Audio(url)),
});

如何防止这里的类型错误?TIA

Answer 1

您的错误消息说您正在将HTMLAudioElement(具有.current属性的对象，即HTMLAudioElement)的RefObject分配给期望接收HTMLAudioElement本身的东西。你应该使用myRef.current而不是myRef。

我对你的代码有一些主要的担忧。在dispatch内部调用useRef违反了钩子规则。如果这是Redux，那么您不会希望存储像HTML元素那样的不可序列化对象。

但是你可能想要的是直接使用HTMLAudioElement而忽略ref.

export interface AudioState {
audioElement: HTMLAudioElement | undefined;
playing: boolean;
progress: number;
duration: number;
volume: number;
}
dispatch({
name: 'SET_AUDIO',
audioElement: new Audio(url),
});