Can you enforce function signatures on an existing library like rxjs using TypeScript?

Question

Can you enforce function signatures on an existing library like rxjs using TypeScript?

My goal is to always include an error function when using rxjs's subscribe method. To achieve this, I am thinking of creating an interface by adding the following code snippet:

Observable.prototype.sub = Observable.prototype.subscribe;

By assigning a copy of subscribe to sub, I aim to enforce the usage of TypeScript to ensure that sub always requires specific functions to be provided.

var subscription = source.subscribe(
  x => console.log('onNext: %s', x),
  e => console.log('onError: %s', e),
  () => console.log('onCompleted')
);

This approach will help me avoid forgetting to pass an error function (and potentially a completion function) when utilizing my custom sub operator.

Best regards,

Sean

typescript rxjs observable

Answer 1

Answer №1

A great way to enhance the TypeScript interface for Observable is by adding your own sub method.

Create a new file called sub.ts and include the following code:

import { Observable } from "rxjs/Observable";
import { PartialObserver } from "rxjs/Observer";
import { AnonymousSubscription } from "rxjs/Subscription";

Observable.prototype.sub = Observable.prototype.subscribe;

declare module "rxjs/Observable" {
  interface Observable<T> {
    sub: (
      observerOrNext: PartialObserver<T> | ((value: T) => void),
      error: (error: any) => void,
      complete?: () => void
    ) => AnonymousSubscription;
  }
}

To use this, follow these steps:

import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/of";
import "./sub";

Observable
  .of(1)
  .sub(value => console.log(value));

Note that the example above does not handle errors, which may result in a "Supplied parameters do not match any signature of call target" error.

The structure of the sub method is based on the subscribe method signature.

Answer 2

A great way to enhance the TypeScript interface for Observable is by adding your own sub method.

Create a new file called sub.ts and include the following code:

import { Observable } from "rxjs/Observable";
import { PartialObserver } from "rxjs/Observer";
import { AnonymousSubscription } from "rxjs/Subscription";

Observable.prototype.sub = Observable.prototype.subscribe;

declare module "rxjs/Observable" {
  interface Observable<T> {
    sub: (
      observerOrNext: PartialObserver<T> | ((value: T) => void),
      error: (error: any) => void,
      complete?: () => void
    ) => AnonymousSubscription;
  }
}

To use this, follow these steps:

import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/of";
import "./sub";

Observable
  .of(1)
  .sub(value => console.log(value));

Note that the example above does not handle errors, which may result in a "Supplied parameters do not match any signature of call target" error.

The structure of the sub method is based on the subscribe method signature.

Can you enforce function signatures on an existing library like rxjs using TypeScript?

Answer №1

Similar questions

JavaScript: Organizing values based on their case sensitivity

The error message "indexOf of undefined" appears when trying to read a property that does not exist within a new

CORS problem arises specifically in NestJS and Vercel when sending POST requests

Why is the ionChange/ngModelChange function being triggered from an ion-checkbox even though I did not specifically call it?

What is the process of using observables in Angular to retrieve a number or variable?

Utilizing Omit for the exclusion of nested properties within a TypeScript interface

Exploring the concept of class type definition in Typescript can lead to an

Typescript Support in Goland IDE for HTML Documents

Is there a workaround in TypeScript to add extra details to a route?

RxJS pipe operation ignoring observable

@ViewChild not getting initialized in ngOnInit lifecycle hook

How can you loop through an array of objects in TypeScript without relying on the traditional forEach

Encountering an error while receiving a response for the Update API request

Launch a TypeScript Node.js server on Heroku deployment platform

Issues with user-generated input not properly functioning within a react form hook

Creating interactive carousel slides effortlessly with the power of Angular and the ngu-carousel module

Discovering the ASP.NET Core HTTP response header in an Angular application using an HTTP interceptor

The argument of type 'NextRouter' cannot be assigned to the parameter of type 'Props' in this scenario

Using TypeScript to import npm modules that are scoped but do not have the scope name included

What are the TypeScript type definitions for the "package.json" configuration file?