CODEWITHSUNDEEP
reactjstypescriptreduxrxjsredux-observable
user2686744
user2686744

Reputation:

Redux-Observable - Typescript error : "Property 'type' is missing in type '{}' but required in type"

I am using redux-observable and I have a Typescript error that I can't understand, and it seems to appear randomly if I have too many lines of code in the rxjs pipeline : 

Type 'Observable<{}>' is not assignable to type 'Observable<{ type: "feed/PUSH"; payload: Profile; } | { type: "feed/POP"; } | { type: "feed/SWIPE"; payload: Swipe; } | { type: "feed/FETCH_NEXT_IDS"; } | { type: "feed/PUSH_NEXT_IDS"; payload: { nextIds: string[]; nextPage: number; }; } | { ...; } | { ...; } | { ...; }>'.
  Type '{}' is not assignable to type '{ type: "feed/PUSH"; payload: Profile; } | { type: "feed/POP"; } | { type: "feed/SWIPE"; payload: Swipe; } | { type: "feed/FETCH_NEXT_IDS"; } | { type: "feed/PUSH_NEXT_IDS"; payload: { nextIds: string[]; nextPage: number; }; } | { ...; } | { ...; } | { ...; }'.
    Property 'type' is missing in type '{}' but required in type '{ type: "feed/FETCH_NEXT_PROFILE"; }'.ts(2322)
action.d.ts(36, 5): 'type' is declared here.
index.d.ts(36, 26): The expected type comes from the return type of this signature.

Here is the code that has the error. I added many tap functions in the pipeline to show the fact that the error appears only when I have too many tap. If I remove a defined number of tap the error seems to disappear. 

export const swipeEpic: Epic<RootAction, RootAction, RootState> = action$ =>
  action$.pipe(
    filter(isOfType(SWIPE)),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    tap(nextIds => {
      console.log('fetch new ids result :');
      console.log(nextIds);
    }),
    map(pop)
    // map(fetchNextProfile)
  );

Upvotes: 0

Views: 1289

Answers (1)

jayphelps
jayphelps

Reputation: 15401

I suspect what you're seeing is somehow related to the fact that RxJS's pipe() utility only has type-safe support for you to pass in 9 operations.

Once you exceed that number, it falls back to a less-type-safe signature, that might be causing your issue. Whether or not it is revealing an actual bug in some type signature of RxJS, Redux Observable, or a bug in your code, or if it's "just how it has to practically be", or something else, I'm not immediately sure--sorry! Just wanted to drop by to at least let you know it's very very likely to be related.

You can avoid this by breaking your operations into sub streams, i.e. not piping as many operators. Of course that's not necessarily great to have to give that as a recommendation, it often is helpful to do this anyway to give your code some breathing room and provide context for other devs maintaining this code later.

The reason for this in RxJS is because TypeScript (as of this writing) does not support variadic generics aka variadic kinds, although there has been discussions around this for many many years.

Upvotes: 1

Related Questions