Migrando subscribe Callbacks para subscribe arguments no RxJS

Você, pessoa que usa rxjs no seu dia a dia, já deve ter reparado que desde a versão 6.4. o RxJS colocou uma anotação de deprecated no método subscribe:

@deprecated — Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments

A justificativa é que usar callbacks separadas gera uma pior leitura do método, e então é preferível usar argumentos subscribe fazendo a desestruturação das propriedades que o método retorna.

Para entendermos melhor como isso fica na prática, vamos a um exemplo rápido:

data.js

import { Observable } from "rxjs";

/**
 * Cria um observable que emite valores numéricos de 1 até 5, e então se finaliza.
 *
 * @returns {Observable<number>} Um observable que emite números de 1 até 5 em sequência.
 */
export const data = () => {
  return new Observable((observer) => {
    for (let i = 1; i <= 5; i++) {
      observer.next(i);
    }

    observer.complete();
  });
};

/**
 * Cria um observable que emite um error imediatamente
 *
 * @returns {Observable<never>} Um observable que emite um erro.
 */
export const dataWithError = () => {
  return new Observable((observer) => {
    observer.error("Aconteceu um erro!");
  });
};

Este será o nosso arquivo base. O primeiro método emite números de 1 até 5 em sequência com o método .next();, e assim que o loop é finalizado, o observable é completado com o método .complete();.

O segundo método cria um observable que emite um erro imediatamente

PS: quando o método .error() é chamado, o observable para de emitir valores e não pode continuar emitindo valores via .next() ou ser completado com o .complete().

E vamos ao que interessa.

Iremos usar como primeiro exemplo a maneira que atualmente está depreciada, e logo em seguida, irei mostrar como utilizarmos o argument observable.

import { data, dataWithError } from "./data.js";

data().subscribe(
  (value) => console.log(value),
  (error) => {},
  () => {
    console.log("completou");
  }
);

dataWithError().subscribe(
  () => {},
  (error) => {
    console.error({ error });
  }
);

Perceba que por ser um exemplo é algo mais visível, mas que ao mesmo tempo, precisamos saber qual a ordem de cada callback (next, error e complete).

Dito isso, vamos ao como usar os argument observables:

import { data, dataWithError } from "./data.js";

data().subscribe({
  next: (data) => console.log(data),
  complete: () => console.log("completou"),
});

dataWithError()
    .subscribe({ error: (error) => console.error({ error })
    });

A partir deste ponto com os argument observables, temos uma leitura mais limpa do que estamos usando dentro do método subscribe, não precisando declarar callbacks ou argumentos que não utilizaremos.

É uma migração fácil de ser realizada, e deixará seu código sem mensagens de depreciação dessa API.