type 'MonoTypeOperatorFunction<any[]>' is not assignable to parameter of type 'OperatorFunction<Message, any[]>

Question

Im trying to do a kendo chat example: https://www.telerik.com/kendo-angular-ui/components/conversationalui/ Im using visual studio code and angular 6 and I was searching in google but cant find a solution But I got this error:

ERROR in src/app/app.component.ts(68,7): error TS2345: Argument of type 'MonoTypeOperatorFunction' is not assignable to parameter of type 'OperatorFunction'. Types of parameters 'source' and 'source' are incompatible. Type 'Observable' is not assignable to type 'Observable'. Type 'Message' is not assignable to type 'any[]'. Property 'length' is missing in type 'Message'.

My component is it:

import { Component } from '@angular/core';    
import { Subject } from 'rxjs/Subject';
import { switchMap } from 'rxjs/operators/switchMap';
import { map } from 'rxjs/operators/map';
import { windowCount } from 'rxjs/operators/windowCount';
import { scan } from 'rxjs/operators/scan';
import { take } from 'rxjs/operators/take';
import { tap } from 'rxjs/operators/tap';
import { from } from 'rxjs/observable/from';
import { merge } from 'rxjs/observable/merge';

import { ChatModule, Message, User, Action, ExecuteActionEvent, SendMessageEvent } from '@progress/kendo-angular-conversational-ui';
import { Observable } from 'rxjs/Observable';
import { ChatService } from './chat.service';

@Component({
  providers: [ ChatService ],
  selector: 'my-app',
  template: `
      <kendo-chat
        [messages]="feed | async"
        [user]="user"
        (sendMessage)="sendMessage($event)"
      >
      </kendo-chat>
    `
})
export class AppComponent {
  public feed: Observable<Message[]>;

  public readonly user: User = {
    id: 1
  };

  public readonly bot: User = {
    id: 0
  };

  private local: Subject<Message> = new Subject<Message>();

  constructor(private svc: ChatService) {
    const hello: Message = {
      author: this.bot,
      suggestedActions: [{
        type: 'reply',
        value: 'Neat!'
      }, {
        type: 'reply',
        value: 'Thanks, but this is boring.'
      }],
      timestamp: new Date(),
      text: 'Hello, this is a demo bot. I don\t do much, but I can count symbols!'
    };

    // Merge local and remote messages into a single stream
    this.feed = merge(
      from([ hello ]),
      this.local,
      this.svc.responses.pipe(
        map((response): Message => ({
          author: this.bot,
          text: response
        })
      ))
    ).pipe(
      // ... and emit an array of all messages
      scan((acc, x) => [...acc, x], [])
    );
  }

  public sendMessage(e: SendMessageEvent): void {
    this.local.next(e.message);

    this.local.next({
      author: this.bot,
      typing: true
    });

    this.svc.submit(e.message.text);
  }
}

The line code where Im getting error is it:

scan((acc, x) => [...acc, x], [])

I am getting similar issue using rxjs@^5.5 w/ typescript@^3.1.1. Getting error on same line: Argument of type 'UnaryFunction<Observable<any[]>, Observable<any[]>>' is not assignable to parameter of type 'UnaryFunction<Observable<Message>, Observable<any[]>>' — Milo
I fixed mine by changing private local: Subject<Message> = new Subject<Message>(); to private local: Subject<any> = new Subject<any>(); — Milo

Matthew Pitts Matthew Pitts · Accepted Answer · 2019-02-05T00:13:56

I ran into the specific issue as well. Try the below fix:

scan((acc:any, x) => acc.concat(x), [])

See also: https://github.com/ReactiveX/rxjs/pull/2897#issuecomment-334654459

type 'MonoTypeOperatorFunction<any[]>' is not assignable to parameter of type 'OperatorFunction<Message, any[]>

1 Answers