Recompose mapPropsToStream typescript

Question

I'm trying to write component on typescript that will replace onChange from props with rxjs implementation onChange, like this

        this.onChangeSubscription = this.onChange$
        .debounceTime(200)
        .filter(value => value.length !== 1)
        .distinctUntilChanged()
        .subscribe(value => this.props.onChange(value))

There is an error, when I try to use pluck function:

Property 'pluck' does not exist on type Subscribable<'Props'>

     const Filter = mapPropsStream<Props,Props>((props$) => {    
            const a = props$.pluck('onChange');
            // newProps created
            return newProps$;
        })(Component);

Import contains

import 'rxjs/add/operator/pluck';

Answer 1

You are using RxJS, but recompose is not opinionated regarding an observable implementation and can be configured to work with numerous other libraries.

Even with that configuration in place, TypeScript will see props$ as a non-RxJS type. To solve the problem, you can could use a specific type assertion or you could use the RxJS from function:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';

const Filter = mapPropsStream<Props,Props>((props$) => {    
    const a = Observable.from(props$).pluck('onChange');
    // newProps created
    return newProps$;
})(Component);