В typescript, если вы хотите работать с элементом DOM, как вы должны объявить эти свойства, чтобы указать, что Typescript должен их разрешать?

ВОПРОС Если вы хотите работать с элементом DOM, который уже имеет свойства DOM, в машинописном тексте, как вы должны объявить эти свойства, чтобы указать, что Typescript должен их разрешать?

ПРИМЕР, как ondragstart и draggable, которые определены DOM

ФОН

У меня есть кое-что с перетаскиванием, используя Stimulus, написанное на Typescript. Моя реализация работает в браузере, и кажется, что веб-упаковщик Rails не жалуется (Rails 6.0.3), когда он находится в режиме разработки, но когда он переходит к компиляции ресурсов (be rake assets:precompile), я получаю эти ошибки машинописного текста.

Пожалуйста, имейте в виду, что я новичок в Typescript.

Я думаю, проблема в том, что Typescript не знает, что некоторые вещи являются родными для реализации DOM для перетаскивания HTML5 (например, свойства draggable, ondragstart и т. д.). А по моему event не любит dropEffect. Возможно, тип для event (то есть Event) должен быть еще одним подклассом Event.

что я здесь делаю не так? любая помощь будет оценена.

ОШИБКИ

[tsl] ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts(31,18)
      TS2339: Property 'draggable' does not exist on type 'Element'.

ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts
./app/javascript/controllers/audience/movable_pip_controller.ts
[tsl] ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts(32,18)
      TS2339: Property 'ondragstart' does not exist on type 'Element'.

Оба они существуют как собственные свойства HTML5, но я полагаю, только в браузерах с поддержкой HTML5? Может быть, мои настройки Babel здесь слишком строгие?

«элемент» происходит от стимула

Я хочу сообщить Typescript, что знаю, что это оба атрибута нативных элементов DOM, и разрешить их

ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts
./app/javascript/controllers/audience/movable_pip_controller.ts
[tsl] ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts(40,5)
      TS2322: Type 'void' is not assignable to type '(this: GlobalEventHandlers, ev: DragEvent) => any'.

ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts
./app/javascript/controllers/audience/movable_pip_controller.ts
[tsl] ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts(41,5)
      TS2322: Type 'void' is not assignable to type '(this: GlobalEventHandlers, ev: DragEvent) => any'.

не уверен, почему я получаю это.

ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts
./app/javascript/controllers/audience/movable_pip_controller.ts
[tsl] ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts(42,5)
      TS2322: Type 'void' is not assignable to type '(this: GlobalEventHandlers, ev: DragEvent) => any'.

ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts
./app/javascript/controllers/audience/movable_pip_controller.ts
[tsl] ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts(43,5)
      TS2322: Type 'void' is not assignable to type '(this: GlobalEventHandlers, ev: DragEvent) => any'.

дропЭффект

ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts
./app/javascript/controllers/audience/movable_pip_controller.ts
[tsl] ERROR in /Users/jason/Work/xyz/app/javascript/controllers/audience/movable_pip_controller.ts(50,11)
      TS2339: Property 'dropEffect' does not exist on type 'Event'.

МОЙ КОД (написан в stimulus, скомпилирован через webpacker в Rails 6)

import { Controller } from "stimulus";
import { polyfill } from "mobile-drag-drop";

// optional import of scroll behaviour
import { scrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";

// options are optional ;)
polyfill({
  // use this to make use of the scroll behaviour
  dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride,
});

export default class MovablePipController extends Controller {
  static targets = [
    "pipComponent",
    "topLeft",
    "topRight",
    "bottomLeft",
    "bottomRight",
  ];

  private pipComponentTarget!: HTMLCanvasElement;
  private topLeftTarget!: HTMLElement;


  connect(): void {
    this.element.classList.add("bottom-right");

    this.element.draggable = true;
    this.element.ondragstart = this.onDragStart.bind(this);

    this.topLeftTarget.ondragenter = () => this.movePipTo("top-left");

    // prevent default is need to avoid interface glitches in touch envs
    this.topLeftTarget.ondragover = event.preventDefault();
    this.topRightTarget.ondragover = event.preventDefault();
    this.bottomLeftTarget.ondragover = event.preventDefault();
    this.bottomRightTarget.ondragover = event.preventDefault();

    // move pip to bottom-right upon load
    this.pipComponentTarget.dataset.corner = "bottom-right";
  }

  onDragStart(event: Event): void {
    event.dropEffect = "none";
  }

  movePipTo(corner: string): void {
    this.pipComponentTarget.dataset.corner = corner;
  }
}