React Konva 的 `use-image` 库引发 TypeScript 错误答案

【问题标题】：React Konva's `use-image` library throws TypeScript errorReact Konva 的 `use-image` 库引发 TypeScript 错误
【发布时间】：2020-12-20 06:47:59
【问题描述】：

完整的错误是：

TS2322：输入 '[HTMLImageElement |未定义，“加载” | "加载" | “失败”]' 不能分配给类型 'HTMLImageElement | SVGImageElement | HTML视频元素 | HTMLCanvasElement |图像位图 |离屏画布 |不明确的'。输入'[HTMLImageElement |未定义，“加载” | "加载" | "failed"]' 不能分配给类型 'OffscreenCanvas'。

我正在尝试使用https://github.com/konvajs/use-image 喜欢：

const win = {
  width: window.innerWidth,
  height: window.innerHeight,
}

const App = () => {
  const image = useImage('https://konvajs.org/assets/lion.png')

  return (
    <Stage width={win.width} height={win.height}>
      <Layer>
        <Image image={image} />
      </Layer>
    </Stage>
  )
}

我尝试制作一个declaration.d.ts 文件，例如：

declare module 'use-image' {
  function useImage(
    url: string,
    crossOrigin?: string
  ): [
    (
      | HTMLImageElement
      | SVGImageElement
      | HTMLVideoElement
      | HTMLCanvasElement
      | ImageBitmap
      | OffscreenCanvas
      | undefined
    ),
    'loaded' | 'loading' | 'failed'
  ]

  export default useImage
}

但它也不起作用。我该如何解决这个问题？

【问题讨论】：

标签： typescript konvajs react-konva

【解决方案1】：

你没有使用正确的语法应该是const [image]而不是const image

【讨论】：

哈哈我已经在你之前一分钟发布了答案，但仍然感谢:)
是的，我刚刚看到了！很高兴你排序

【解决方案2】：

这对我来说是一个愚蠢的错误。应该是[image] 而不是image：

const [image] = useImage('https://konvajs.org/assets/lion.png')

【讨论】：

@JoshStevens 绝对不是我自己。有人回复Reddit哈哈