如何解决'HTMLCanvasElement‘没有调用signatures.ts(2349)作出反应？

Question

我有TS错误的代码，我正在使用的反应-帆布-纸屑包。当我试图为我的函数定义类型时，我继续得到以下错误，您将在下面看到。

(property) React.MutableRefObject.current: HTMLCanvasElement此表达式不可调用。类型'HTMLCanvasElement‘没有调用signatures.ts(2349)

const refAnimationInstance = useRef<HTMLCanvasElement | null>(null)
  
  const getInstance = useCallback((instance: any) => {
    refAnimationInstance.current = instance
  }, [])

  const makeShot = useCallback((particleRatio: number, opts: any) => {
    refAnimationInstance.current &&
      refAnimationInstance.current({
        ...opts,
        particleCount: Math.floor(200 * particleRatio),
      })
  }, [])

我不知道如何定义它，这样refAnimationInstance就不会在这里为.current抛出错误：

refAnimationInstance.current({
        ...opts,
        particleCount: Math.floor(200 * particleRatio),
      })

您可以在下面的链接中看到五彩纸屑的工作示例：https://codesandbox.io/s/realistic-fn-react-canvas-confetti-forked-sixvv1?file=/src/App.js:904-975

Answer 1

这个库不导出它们的类型是非常令人讨厌的，但是您仍然可以通过这种长期复杂的内置类型的使用来获得它：

import { type IProps } from "react-canvas-confetti";

type CreateConfetti = NonNullable<Parameters<NonNullable<IProps["refConfetti"]>>[0]>;

然后在需要它的地方使用类型：

const refAnimationInstance = useRef<CreateConfetti | null>(null)
  
const getInstance = useCallback((instance: CreateConfetti) => {
    refAnimationInstance.current = instance
}, []);

此外，您还可以使用可选链接来避免使用&&短路：

refAnimationInstance.current?.({
    ...opts,
    particleCount: Math.floor(200 * particleRatio),
})