Typescript:如何找到事件变量的正确类型

pepwfjgg  于 2023-05-19  发布在  TypeScript
关注(0)|答案(2)|浏览(126)

我第一次使用Typescript来转换现有的JS项目。我有使用C#的经验,所以我认为我可以输入所有内容!
但是我有些地方出了问题。例如,我有一个CustomEvent处理程序:

document.addEventListener('beforeDrop', ((e: CustomEvent) => {
  if (testDrop(e.detail.from, e.detail.to) === false) {
    // stop the item being dropped by the library
    e.preventDefault();
  }
}) as EventListener);

testDrop我试过的是

export function testDrop(from: Object,to: Object) {
  const toRow = Number(to.dataset.keepRow) ;
  const toCol = Number(to.dataset.keepCol) ;
  const type = from.dataset.type;
  ....
  ....

当然是Property 'dataset' does not exist on type 'Object'.,那么我怎么找到正确的类型呢,比如说,customeevent.detail.from.dataset
我注意到我的项目(VSCode / VueJS)的脚手架包含了一个文件env.d.ts,这可能是相关的,但我不知道如何使用它。

mfuanj7w

mfuanj7w1#

使用Object类型和使用any类型一样好,这是一个非常糟糕的做法。您必须为数据集创建类型或接口

interface Dataset {
  keepRow: number;
  keepCol: number;
  type: string;
}

以及数据集上的其他任何 prop 。然后在testDrop函数中可以使用

export function testDrop(from: Dataset, to: Dataset) {
polhcujo

polhcujo2#

原来我的dataset是一个DOMStringMap。所以现在我有了

document.addEventListener('beforeDrop', ((e: CustomEvent) => {
  const fromData:DOMStringMap = e.detail.from.dataset;
  const toData:  DOMStringMap = e.detail.to.dataset;
  if (testDrop(fromData, toData) === false) {
  // stop the item being dropped by the library
     e.preventDefault();
  }
}) as EventListener);

export function testDrop(from: DOMStringMap,to: DOMStringMap) {
  const toRow = Number(to.keepRow) ;
  const toCol = Number(to.keepCol) ;
  const type = from.type;
  if (type===undefined) {
    throw 'trying to drop an undefined track type'
  }
  ....
  ....
}

我不需要为此创建自己的接口或类型。
我现在应该做的是修改事件的创建。

addEvent(name:string,fromEl:HTMLElement, toEl:HTMLElement | null) {
    const event = new CustomEvent(name, { cancelable: true, detail: {from:fromEl, to:toEl}});
    return document.dispatchEvent(event);
}

detail的类型为any,但我可以创建一个类型

type CustomEventDetail = {
  from: HMTLElement,
  to:   HMTLElement
}

但是事件的创建是在一个库模块中,所以我需要从库中导出新的类型--在使用TS仅48次之后,我还没有准备好进入那个阶段!

相关问题