0

问题在打字稿中，如果您想使用已经具有 DOM 属性的 DOM 元素，您应该如何声明这些属性以指定打字稿应该允许它们？

由 DOM 定义ondragstart的示例draggable

背景

我使用 Typescript 编写的 Stimulus 进行了一些拖放操作。我的实现在浏览器中工作，看起来 Rails webpacker6.0.3在开发模式下没有抱怨（Rails），但是当它编译资产（be rake assets:precompile）时，我得到了这些打字稿错误。

请记住，我是 Typescript 的新手。

我认为问题在于 Typescript 不知道 HTML5 拖放的 DOM 实现中有些东西是原生的（如 properties 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 设置在这里太严格了？

'elemenet' 来自 Stimulus

我想告诉 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'.

我的代码（用刺激编写，通过 Rails 6 中的 webpacker 编译）

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;
  }
}
4

1 回答 1

0

解答：使用刺激目标明确定义父对象的类型。

  connect(): void {
    this.element.draggable = true;
...

变成

static targets = [
    "pipComponent",
  ];

  connect(): void {
    this.pipComponentTarget.draggable = true;
于 2020-12-21T15:48:03.150 回答