如何解决 Type \'HTMLCanvasElement\' has no call signatures.ts(2349) for React？答案

【问题标题】：How to solve Type 'HTMLCanvasElement' has no call signatures.ts(2349) for React?如何解决 Type \'HTMLCanvasElement\' has no call signatures.ts(2349) for React？
【发布时间】：2022-11-18 00:21:53
【问题描述】：

我在用于 react-canvas-confetti 包的代码中有 TS 错误。当我尝试为我的函数定义类型时，我不断收到以下错误，您将在下面看到。

（属性）React.MutableRefObject<HTMLCanvasElement |空>.当前： 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

【问题讨论】：

您为什么要将其称为函数？你想做什么？

标签： reactjs typescript canvas

【解决方案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),
})

【讨论】：