Generic types mismatch when dependencies passed as params within Angular functional guard

Question

I am in the process of converting class-based guards to functional ones. I use some of the guards to fetch data from api in case data is not in store or is stale, so I have Store and Actions dependency involved.

Below is the new guard "wireframe":

export function dataReadyGuard(): CanActivateFn {
  return () => {
    const store = inject(Store);
    const actions = inject(Actions);

    return waitForData(store, actions);
                       ~~~~~  ~~~~~~~ 
  }
}

function waitForData(store: Store, actions$: Actions): Observable<boolean> {
    // the wait logic here
    // (selectors, observing success/fail actions, dispatching actions)
    // irrelevant for this question
}

My concern is that now my store and actions are violating the @typescript-eslint/no-unsafe-argument rule: Store<any> assigned to Store<object> , and Actions<any> to Actions<Action> - as indicated above by the squiggles. I tried providing generics to the waitForData fn signature, but it did not make eslint happy. Basically I would like to avoid passing generics explicitly, just like it wasn't needed in my class based solution - where I had just private readonly store: Store in the constructor.

What would be the clean way of solving this?

Generic types mismatch when dependencies passed as params within Angular functional guard

0 Answers0