Platform: select overload not match when enable strict mode in tsconfig

Created on 11 Nov 2020  路  5Comments  路  Source: ngrx/platform

I create a angular project with strict flag and try add in a feature store. But when I try to select the state with selector have created it appear overload not match. When I turn off strictFunctionTypes everything work well.

Minimal reproduction of the bug/regression with instructions:

Repo URL

Expected behavior:

No error

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

NgRx : 10.0.1
Angular: 10.1.4

Store bug

All 5 comments

Could this be because the store is types as object?
I was able to solve this issue by typing the store as any, but there's probably a better solution...

- export class Store<T = object> extends Observable<T>
+ export class Store<T = any> extends Observable<T>

@hanjeahwan you can solve the issue by typing the store in the component.

-  constructor(private store: Store) {}
+  constructor(private store: Store<any>) {}
// or
+  constructor(private store: Store<GameState>) {}

On the NgRx Discord Server it was mentioned that typing the feature selector as follows should also work:

- export const selectFeature = createFeatureSelector<AppState, GameState>(
-  scoreboardFeatureKey
- );

+ export const selectFeature = createFeatureSelector<GameState>(
+  scoreboardFeatureKey
+ );

@timdeschryver thanks your help 馃榿

I just leave my experience as well, as I had a similar issue, solved thanks to Tim's suggestion.
I am working with a feature state in a NX Workspace (using strict mode).

NX command to create a feature ngrx state generates automatically a "PartialState" that should be used explicit as Store type to solve the strictFunctionTypes check error.

// selectors
export const getPlacesState = createFeatureSelector<PlacesPartialState, PlaceState>(placesFeatureKey);
export const getAllPlaces = createSelector(getPlacesState, (state: PlaceState) => selectAll(state));
// reducers
export const placesFeatureKey = 'places';

export interface PlacesPartialState {
  readonly [placesFeatureKey]: PlaceState;
}
// Angular component
constructor(private store: Store<PlacesPartialState>) {}  <-- I had to use PlacesPartialState as type
const places$ = this.store.select(getMyPlaces);

I updated to the latest release (1.16.0), and the ES-Lint Message is changed according to the last PR.
However, if I remove the generic type as suggested I get an error due to the type mismatch (when in strict mode)

Screenshot 2021-02-10 at 17 47 13

How this case should be handled if the Store should not have a generic type anymore?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gperdomor picture gperdomor  路  3Comments

shyamal890 picture shyamal890  路  3Comments

Matmo10 picture Matmo10  路  3Comments

bhaidar picture bhaidar  路  3Comments

brandonroberts picture brandonroberts  路  3Comments