Specify signature of a custom RxJS operator in Typescript

Question

The following custom RxJS operator (actually just a .filter equivalent for demonstration) is currently declared in an Angular 4.0.0-rc.2 component.

declare module 'rxjs/Observable' {
  interface Observable<T> {
    restrictToCommand<U>(f: (x: T) => U): Observable<U>;
  }
}

Observable.prototype.restrictToCommand = function (cmd) {
  return new Observable((observer) => {
    const obs = {
      next: (x) => {
        if (x.command === cmd || cmd.indexOf(x.command) !== -1) {
          observer.next(x);
        }
      },
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    };
    return this.subscribe(obs);
  });
};

The function signature currently accepts cmd as implicit any type. I am attempting to restrict the allowed types like this:

restrictToCommand<U>(f: (x: T | T[]) => U): Observable<U>;

and

Observable.prototype.restrictToCommand = function (cmd: string | string[]) { ... }

However, it seems like I cannot overwrite the type definition supplied, as this causes the following compiler error:

ERROR in (...)/mycomponent.component.ts (11,1): Type '(cmd: string | string[]) => Observable<{}>' is not assignable to type '<U>(f: (x: any) => U) => Observable<U>'.
  Types of parameters 'cmd' and 'f' are incompatible.
    Type '(x: any) => any' is not assignable to type 'string | string[]'.
      Type '(x: any) => any' is not assignable to type 'string[]'.
        Property 'push' is missing in type '(x: any) => any'.)

What am I missing?

cartant · Accepted Answer · 2017-03-08 20:17:27Z

6

When I define custom RxJS operators, I usually do it something like this:

import { Observable } from 'rxjs/Observable';

function restrictToCommand<T>(
  this: Observable<T>,
  cmd: string | string[]
): Observable<T> {

  return new Observable((observer) => {
    const obs = {
      next: (x) => {
        if (x.command === cmd || cmd.indexOf(x.command) !== -1) {
          observer.next(x);
        }
      },
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    };
    return this.subscribe(obs);
  });
}

Observable.prototype.restrictToCommand = restrictToCommand;

declare module 'rxjs/Observable' {
  interface Observable<T> {
    restrictToCommand: typeof restrictToCommand;
  }
}

I find that using typeof in the declaration merging simplifies things.

answered Mar 8, 2017 at 20:17

cartant

58.6k17 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Specify signature of a custom RxJS operator in Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related