next.js 类型“WaveSurfer”不可分配给类型“null”-使用useRef时出现typescript错误

fzsnzjdm 于 2023-08-04 发布在 TypeScript

关注(0)|答案(1)|浏览(135)

我正在做一个音乐播放器项目，我需要使用WaveSurfer模块来创建歌曲波浪和控制器，我正在使用Next.js和typescript，我安装并导入了该模块，
但是当我尝试在它上面使用useRef时，typeScript显示这个错误：类型“WaveSurfer”不能分配给类型“null”
我查看了文档，但没有找到任何对next.js有用的东西，在youtube上看到了一个教程，我留下了链接，可能对你有帮助：[https：//www.youtube.com/watch？v=NH1II2tzGv8]下面是我的代码：

import WaveSurfer from "wavesurfer.js";
import { useEffect, useRef } from "react";

function Controlbar() {
  const waveFormRef = useRef(null);
  useEffect(() => {
    waveFormRef.current = WaveSurfer.create({
      container: "#waveform", //waveform is the id of a div tag
      waveColor: "#4F4A85",
      progressColor: "#383351",
      url: "assets/music.mp3",
    });
  });

return (
<div id="waveform"></div>
);
};

export default Controlbar;

字符串
我希望看到歌曲波没有任何错误的div标签与Id波形

next.js

来源：https://stackoverflow.com/questions/76737844/type-wavesurfer-is-not-assignable-to-type-null-typescript-error-when-using

1条答案

按热度按时间

nlejzf6q1#

初始化ref时：

const waveFormRef = useRef(null);

字符串
您隐式地将waveFormRef.current的类型设置为null（尝试将鼠标悬停在waveFormRef.current上以查看类型）。
当尝试给它赋值时，你会得到一个错误，你不能给类型'null'赋值另一个类型。

waveFormRef.current = WaveSurfer.create() // won't work because other type than null

型
您可以做的是将ref显式地键入为null | WaveSurfer（或您需要的任何类型）。

const waveFormRef = useRef<null | WaveSurfer>(null);

型
这样，您可以将其初始化为null，然后将该值设置为WaveSurfer类型的另一个值。
举例说明（使用不同类型）：

const waveFormRef = useRef<null | { name: string }>(null);
waveFormRef.current = { name: 'Tester' };

型

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 类型“WaveSurfer”不可分配给类型“null”-使用useRef时出现typescript错误

1条答案

相关问题

热门标签

最新问答