The type 'argument with {error: null, complete: null, next: (data: Object) => void}' cannot be assigned

Question

The type 'argument with {error: null, complete: null, next: (data: Object) => void}' cannot be assigned

Having trouble with setting up web sockets. The code I have below is not compiling in TypeScript:

let observer = {
    error: null,
    complete: null,
    next: (data: Object) => {
        console.log('Message sent to websocket: ', data);
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify(data));
        }
    }
};
return new AnonymousSubject<MessageEvent>(observer, observable);

The red underlined observer variable shows this message:

Argument of type '{ error: null; complete: null; next: (data: Object) => void; }' is not assignable to parameter of type 'Observer<MessageEvent<any>>'.
  Types of property 'error' are incompatible.
    Type 'null' is not assignable to type '(err: any) => void'.ts(2345)

Any suggestions on how to fix the compilation issue?

angular typescript websocket

Answer 1

Answer №1

According to the documentation on RxJS:

interface Observer<T> {
  next: (value: T) => void
  error: (err: any) => void
  complete: () => void
}

The issue at hand is that you've set the error callback to null, which is not a valid value. It's recommended to instead log the error to the console during development:

let observer = {
  error: (err: any) => console.error(err),
  complete: () => undefined,
  next: (data: Object) => {
      console.log('Message sent to websocket: ', data);
      if (ws.readyState === WebSocket.OPEN) {
          ws.send(JSON.stringify(data));
      }
  }
  };

Answer 2

According to the documentation on RxJS:

interface Observer<T> {
  next: (value: T) => void
  error: (err: any) => void
  complete: () => void
}

The issue at hand is that you've set the error callback to null, which is not a valid value. It's recommended to instead log the error to the console during development:

let observer = {
  error: (err: any) => console.error(err),
  complete: () => undefined,
  next: (data: Object) => {
      console.log('Message sent to websocket: ', data);
      if (ws.readyState === WebSocket.OPEN) {
          ws.send(JSON.stringify(data));
      }
  }
  };

The type 'argument with {error: null, complete: null, next: (data: Object) => void}' cannot be assigned

Answer №1

Similar questions

Updating webdriver-manager can sometimes result in a "spawn Unknown system error -86" message. This error

Ways to trigger the keyup function on a textbox for each dynamically generated form in Angular8

Filtering multiple values from a JSON array in Angular 15, separated by commas

What is the reason behind TypeScript treating numbers as strings when adding them together?

Generating a new object from a TypeScript class using JavaScript

Resetting the forms as users navigate between different tabs on the mat

Insert placeholder text without access to the input field

The absence of essential DOM types in a TypeScript project is causing issues

Tips for correctly annotating objects to address the issue of potentially being 'null'

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

What is the best way to implement lazy loading for child components in React's Next.js?

The metadata for [object Module] does not contain any ngModule information

Error: PrimeNG Treenode Component is having difficulty rendering the data

What is the best way to add prefixes to my SCSS style sheets?

Transformation of Python code into Blockly blocks

Encountering an error with dynamic routing in Angular 4 when using dynamic components

Ways to manage an interactive pricing structure chart in Angular?

Utilizing Mongoose RefPath in NestJS to execute populate() operation

After calling sequelize.addModels, a Typescript simple application abruptly halts without providing any error messages

Adding Dynamic Checkboxes to Angular Forms in Angular 4