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

Question

我收到一个我无法从 TypeScript 理解的错误。我正在使用完全有效的 JavaScript 片段，但它在我的 IDE 中和通过 Gulp.

进行预处理期间都标记了一个错误

我已将其剥离回其核心，但我仍然遇到错误（即使这是 perfectly valid 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。

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

Answer 1

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

这里的问题是 .matches 是一个属性元素类型的对象。 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);

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

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

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

typescript

gulp

gulp-typescript