带有类型参数的 RxJS 订阅调用上的 IDE (VScode) 错误

问题描述

我正在 Angular 中尝试一些 RxJS 函数，并从教程 (link) 中复制了一些代码。我的项目配置为“严格”模式。 该应用程序只是在控制台中记录点击的坐标（我做了一个 Stackblitz：link）

在本地和 Stackblitz 上都应用程序在本地运行，但我的 IDE 在本地显示错误。在 AppComponent 的第 25 行，在 subscribe 中，onClick 带有下划线，我得到“No overload matches this call”。问题似乎与第 12 行的类型定义 MouseEvent 有关。如果我将其更改为 any，错误就会消失。

我的假设是：

1. 代码有效，因为在将 TS 转换为 JS 时，类型化丢失了（如此有效，就像我在最终调用中确实有 any 一样）
2. Stackblitz 没有显示错误，因为它的约束检查不如 VScode 中的有效

我的问题：

• 我的假设是否正确？
• 我应该如何编写代码才能避免出现 IDE 错误？我应该对“任何”使用某种类型的转换吗？会不会违背使用“严格”模式的目的？

解决方法

你可以这样做：

const eventListener = <K extends keyof DocumentEventMap>(type: K) => 
  bindCallback<K,DocumentEventMap[K]>(document.addEventListener)(type);

Stackblitz：https://stackblitz.com/edit/angular-ivy-pzxguu?file=src/app/app.component.ts

您也可以改用 rxjs 中的 fromEvent：

import { fromEvent } from 'rxjs';

...

fromEvent(document,'click').subscribe(...);