'Element | 类型的 rxjs 参数null' 不可分配给 JQueryStyleEventEmitter 类型的参数答案

【问题标题】：rxjs argument of type 'Element | null' is not assignable to parameter of type JQueryStyleEventEmitter'Element | 类型的 rxjs 参数null' 不可分配给 JQueryStyleEventEmitter 类型的参数
【发布时间】：2021-09-24 03:05:54
【问题描述】：

我是 rxjs 新手，当尝试为 incrementButton 创建事件时，它会抛出错误

No overload matches this call.
The last overload gave the following error.
Argument of type 'Element | null' is not assignable to parameter of type 'JQueryStyleEventEmitter<any, unknown> | ArrayLike<JQueryStyleEventEmitter<any, unknown>>'.
Type 'null' is not assignable to type 'JQueryStyleEventEmitter<any, unknown> | ArrayLike<JQueryStyleEventEmitter<any, unknown>>'.  TS2769

在下面的 sn-p Line:8 Col:35 incrementButton 中抛出错误

import { Fragment, useState } from "react";
import { fromEvent } from "rxjs";

const SimpleCounter = () => {
  const [result, setResult] = useState(0);

  const incrementButton = document.querySelector("incBtn");
  const increaseCount = fromEvent(incrementButton, "click");

  return (
    <Fragment>
      <h1>{result}</h1>
      <button id="incBtn">Increase</button>
    </Fragment>
  );
};

我尝试了像下面这样的类型转换，但它失败了

const increaseCount = fromEvent(<JqueryStyleEventEmitter> <unknow> incrementButton, "click");

const increaseCount = fromEvent(incrementButton as JqueryStyleEventEmitter as unknown, "click");

【问题讨论】：

标签： javascript reactjs rxjs

【解决方案1】：

我对代码做了 2 处更改。现在它正在工作。

使用 HTMLButtonElement 将类型转换为 querySelector

const incrementButton = document.querySelector(
  "#incBtn"
) as HTMLButtonElement;

将按钮选择代码移到 useEffect 挂钩中。

useEffect(() => {
  const incrementButton = document.querySelector(
    "#incBtn"
  ) as HTMLButtonElement;
  const increaseCount = fromEvent(incrementButton, "click");
  increaseCount.subscribe(() => {setResult(result++)});
});

【讨论】：