using rxjs map function gives error property _isScalar missing

Question

I am new to angular and typescript, tring to learn it with this tutorial . There's a handler in the tutorial that looks like this:

removeChat(chat: Chat): void {
    this.chats = this.chats.map<Chat[]>(chatsArray => {
        const chatIndex = chatsArray.indexOf(chat);
        chatsArray.splice(chatIndex, 1);

        return chatsArray;
    });
}

However, the tutorial is somewhat outdated, since it thinks of and map are methods of Observable, when it is no longer the case. So I tried fixing it by importing them separately. of worked well (it's used to fetch mock data and set it to this.chats). map is giving me issues, probably because I'm not understanding the syntax well enough (I'm very well versed in Javascript, but typescript is still very new to me). So I tried something like this

import { map } from 'rxjs/operators';

// later...
removeChat(chat: Chat): void {
    this.chats = map<Chat[], {}>(chatsArray => {
        const chatIndex = chatsArray.indexOf(chat);
        chatsArray.splice(chatIndex, 1);

        return chatsArray;
    });
}   

But I'm getting this error:

Type 'OperatorFunction' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'OperatorFunction'.

What am I doing wrong?

Answer 1

At the moment, it doesn't know which Observable it should be operating on. Instead, you should use it in conjunction with pipe , like so:

  removeChat(chat: Chat): void {
    this.chats = this.chats.pipe(
      map(chatsArray => {
        const chatIndex = chatsArray.indexOf(chat);
        chatsArray.splice(chatIndex, 1);

        return chatsArray;
      }));
  }