typescript 如何解决类型'HTMLCanvasElement'没有React的调用签名.ts(2349)？

gmxoilav 于 2022-11-18 发布在 TypeScript

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

我在react-canvas-confetti包中使用的代码中有TS错误。当我试图为我的函数定义类型时，我不断得到以下错误，你会在下面看到。
（属性）React可变引用对象〈HTMLCanvasElement|当前：HTMLCanvasElement此表达式不可调用。类型“HTMLCanvasElement”没有调用签名。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

typescript

来源：https://stackoverflow.com/questions/74478737/how-to-solve-type-htmlcanvaselement-has-no-call-signatures-ts2349-for-react

1条答案

按热度按时间

63lcw9qa1#

这个库不导出它们的类型，这很烦人，但是通过使用内置类型的冗长而复杂的用法，您仍然可以得到它：

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),
})

赞(0）回复(0）举报 2022-11-18

我来回答

typescript 如何解决类型'HTMLCanvasElement'没有React的调用签名.ts(2349)？

1条答案

相关问题

热门标签

最新问答