在带有类型化参数的 RxJS 订阅调用中 IDE (VScode) 出错

Question

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

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

我的假设是：

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

我的问题：

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

Answer 1

你可以这样做：

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(...);