How to set target in typescript to fromEvent() in rxjs

Question

I'm using 'rxjs' library alongside typescript. Issue is, I can't figure out how to pass a simple button to fromEvent() from rxjs

Trying this makes the compiler complain:

import React from 'react';
import * as rx from 'rxjs';

const RXComponent: React.FC = () => {

    rx.fromEvent(document.getElementById('dblbutton'), 'click')

    return (
        <form>
            <input type='button' id='dblbutton' value='Click me!'>
            </input>
        </form>
    )
}

export default RXComponent;

This throws the following exception:

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'FromEventTarget'. Type 'null' is not assignable to type 'FromEventTarget'. TS2345

I tried to change the definition to a node-list as per documentation:

List of DOM Nodes, returned for example by document.querySelectorAll or Node.childNodes.

Although this collection is not event target in itself, fromEvent will iterate over all Nodes it contains and install event handler function in every of them. When returned Observable is unsubscribed, function will be removed from all Nodes.

const btn = document.querySelectorAll('#dblbutton')
const obs = rx.fromEvent(btn, 'click')
obs.subscribe(x => console.log(x))

Which technically works and stops the compiler from complaining, but if I open the actual website on localhost I just get bunch of errors referencing the library.

Any idea what am I doing wrong?

Answer 1

I encountered the same problem, you just need to coerce (or cast) type explicitly, so I made a little helper for this

import * as Rx from 'rxjs'
import { FromEventTarget } from 'rxjs/internal/observable/fromEvent'

const
    mkEventTarget = (qs: string): FromEventTarget<Event> =>
        document.querySelector (qs) as FromEventTarget<Event>

  , evClicks: Rx.Observable<Event> = Rx.fromEvent (mkEventTarget ("#btn"), "click")

evClicks.subscribe (() => console.log ("Test"))