Новое окно.Image() не работает с машинопись

Question

Я использую библиотеку KonvasJs для React. ( https://github.com/lavrton/react-konva)

Чтобы загрузить изображение в JavaScript/React, это

  componentDidMount() {
    const image = new window.Image();
    image.src = "http://konvajs.github.io/assets/yoda.jpg";
    image.onload = () => {
      // setState will redraw layer
      // because "image" property is changed
      this.setState({
        image: image
      });
    };
  }

Работает нормально. Когда я переключаю Typescript, у меня появляется эта ошибка:

Я попытался также добавить:

interface Window {
    Image: typeof Image;
}

или же

  interface Windows extends Window {
      Image: typeof Image;
  }

или же

declare global {
  interface Window {
      Image: typeof Image;
  }
}

Безуспешно

или же Есть идеи?

Связанные вопросы:

https://github.com/Microsoft/TypeScript/issues/10241

TypeScript - новое изображение () из глобальной области видимости

https://ourcodeworld.com/articles/read/337/how-to-declare-a-new-property-on-the-window-object-with-typescript

https://www.reddit.com/r/typescript/comments/5fieja/how_do_i_add_a_property_to_window_in_typescript_2/

Answer 1

Решение:

const image = new (window as any).Image()
image.src = './dragFile.png'
image.onload = () => {
  this.setState({
    image: image
  })
}

источник: https://github.com/Microsoft/reactxp/blob/master/src/web/Image.tsx#L139

Answer 2

Я нашел решение, используя следующий вопрос Stackru

Поскольку вы используете KonvajS, они переопределяют глобальные Image определение с их собственным типом, который нарушает тип DOM Image HTMLImageElement по умолчанию

Если вы используете более строгие правила tslint, которые не позволяют any ключевое слово, то это решение будет работать:

interface IHTMLImageElement {
  prototype: HTMLImageElement
  new(): HTMLImageElement
}

declare global {
  // tslint:disable-next-line
  interface Window {
    Image: IHTMLImageElement
  }
}

Answer 3

Вы, вероятно, не включая DOM библиотека.

Если вы используете tsconfig.json, включите следующее:

{
    "compilerOptions": {
        "lib": [
            "dom"
        ]
    }
}

Или, если вы используете CLI:

tsc --lib dom ...

См. https://www.typescriptlang.org/docs/handbook/compiler-options.html для получения дополнительной информации.