TypeScript 错误 TS2339：“EventTarget”类型上不存在属性“matches”

我收到一个我无法从 TypeScript 中理解的错误。我正在使用一段完全有效的 JavaScript，但它在我的 IDE 中以及通过 Gulp 进行预处理期间都标记了错误。

我已将其剥离回其核心，但仍然收到错误（即使这是完全有效的 JS).

document.addEventListener('click', function (event) {
    console.log(event.target.matches('.click-me'));
}, false);

TypeScript 编译失败并出现以下错误：

error TS2339: Property 'matches' does not exist on type 'EventTarget'.

我已经检查了我的 TypeScript 选项，它们应该允许我毫无问题地使用“匹配”。

let tscOptions = {
    allowSyntheticDefaultImports: true,
    target: "es5",
    lib: [
        "dom",
        "es7",
        "scripthost",
        "es2017"
    ],
    module: "commonjs"
};

我使用的是 TypeScript 4.1.2 版本和 Gulp Typescript v6.0.0-alpha.1。

显然是某个地方的配置问题，但我不知道在哪里。

首先 - 这取决于你如何定义有效的 JS！是的 - 你的 JS 会（几乎所有？）一直工作，但这并不意味着它能保证 100% 的时间。

这里的问题是 .matches 是 Element 类型的对象的属性。 event 可以为 null - 并且 event.target 可以为 null 或 EventTarget。

Element（您想要的类型）扩展了 Node 类型，而 Node 类型又扩展了 EventTarget 类型。因此，不能保证您得到您期望的类型，因此 TS 警告您是正确的。

然而，忽略这些警告可能非常适合您的用例 - 在这种情况下您可以直接转换它：

document.addEventListener('click', function (event) {
    if (event !== null && event.target !== null) {
       const element = event.target as Element;

       const isMatch = element.matches('foo');
    }
}, false);

在我看来，编写大量逻辑来验证每个边缘情况并没有多大意义 - 但您可以在此处了解有关该问题的更多信息：https://github.com/Microsoft/TypeScript/issues/29540