TypeScript：在EventTarget对象中找不到click事件的.target属性

Question

在下面的代码中，TypeScript似乎正在检查我认为是基类EventTarget的东西，但找不到target属性。

在我最近将该项目转换为TS之前，它已经在常规JS中工作，因此显然target属性必须存在。替代方法是我输入了错误的变量。

是这样吗？

也尝试过

将其键入为Event, MouseEvent, HTMLDivElement, HTMLAnchorElement。这些都没有清除红色的棉绒（我认为它确实移到了id上，为MouseEvent）。

const findClickedTab = (tabArray: object[], event: EventTarget) => {
  const clickedTabArray = tabArray.filter(tabId => tabId === event.target.id); // property 'target' doesn't exist on EventTarget

 // irrelevant stuff removed
};

// caller of above function, which attaches to the event listener
const switchSection = event => {  
  const tabIdsArrayOfStrings = getTabIds();

  const clickedTabIdString = findClickedTab(tabIdsArrayOfStrings, event);

};

document.addEventListener('click', switchSection);

更新1

下面是我的tsconfig.json。我知道至少部分不正确，因为其中包括./templates之外的文件/文件夹（例如./semantic，它是并行的/ ./templates的同级兄弟）

{
  "compilerOptions" : {
    "outDir" : "./compiledJs",
    "allowJs" : true,
    "module" : "commonjs",
    "target" : "es5",
    "sourceMap" : true
  },
  "include" : ["./templates/**/*"],
  "exclude" : [
    "node_modules"
  ]
}

更新2

我已将"lib" : ["dom"]添加到我的tsconfig.json并将其输入方式从EventTarget更改为Event。 target不再掉毛，但id（降低一级）变成红色。 Phpstorm 2019.2中的错误提示指出id不是EventTarget的属性。

更新了tsconfig.json：

{
  "compilerOptions" : {
    "outDir" : "./compiledJs",
    "allowJs" : true,
    "module" : "commonjs",
    "target" : "es5",
    "sourceMap" : true
  },
  "include" : ["./templates/**/*"],
  "exclude" : [
    "node_modules"
  ]
  , "lib" : ["dom"]
}

Answer 1

使用(variable as objectType)语法从target到EventTarget对象声明HTMLAnchorElement属性可以清除编译时错误：

const clickedTab: string[] = tabArray.filter(tabId => tabId === (event.target as HTMLAnchorElement).id); 

我还必须记录event.target.constructor.name的值以找到正确的对象类型（HTMLAnchorElement）。

Answer 2

因此，您要将事件附加到文档。这意味着您正在监听对任何文档元素的单击，然后这些气泡会上升到文档。显然，这意味着目标（事件起源于此）可以是任何东西，甚至是文档本身[ citation needed ]。

如果您要严格查找具有指定ID的元素，则可以使用类型保护。

const isElementWithId = (t: EventTarget) : t is Element => 
   (t as Element).id !== undefined;

const findClickedTab = (tabArray: string[], event: Event) => {
    if (event.target && isElementWithId(event.target)) {
        const target: Element = event.target;
     // in here we know that event.target is of type Element and elements do have an optional id property
     const clickedTabArray = tabArray.filter(tabId => tabId === target.id); 
  }

 // irrelevant stuff removed
};

// caller of above function, which attaches to the event listener
const switchSection = (event: Event) => {  
  const tabIdsArrayOfStrings = getTabIds();
  const clickedTabIdString = findClickedTab(tabIdsArrayOfStrings, event);

};

document.addEventListener('click', switchSection);

此外，您的tabArray参数必须为string[]，才能与id属性相当。

注意：如果您知道要查找特定的元素类型（例如锚点），则有更好的方法来确定元素是否属于该类型：

export const isAnchor = (e: EventTarget) : e is HTMLAnchorElement =>
    (e as Element).tagName && (e as Element).tagName == 'A'

tagName is the HTML-uppercased qualified name（在HTML 5中）