Typesafe selection in 3.8.0

[dmrickey]

In 3.6.2 I can/could do something like this.

export interface StateModel {
  zoo: ZooStateModel;
}

export class ZooStateModel: {
  pandas: Panda[] = [];
  zebras: Zebra[] = [];
}

@State<ZooStateModel>({
  name: 'zoo',
  defaults: new ZooStateModel(),
})
@Injectible()
export class ZooState {...}

...
// usage in my components

// 3.6.2
@Select((state: StateModel) => state.zoo.pandas) pandas$: Observable<Panda[]>; // is correct
@Select((state: StateModel) => state.zoo.zebras): zebras$: Observable<Panda[]>; // is wrongly typed and IDE says as much.

// 3.8.0
@Select((state: StateModel) => state.zoo.pandas) pandas$: Observable<Panda[]>; // still works
@Select((state: StateModel) => state.zoo.zebras): zebras$: Observable<Panda[]>; // definitely wrong but no complaints. (same as 3.7.x)

in 3.8.0 the above doesn't complain. I can update it like so for 3.8.0

export class ZooStateMoel: {
  pandas: Panda[] = [];
  zebras: Zebra[] = [];
}

export const ZOO_STATE_TOKEN = new StateToken<ZooStateModel>('zoo');

@State<ZooStateModel>({
  name: ZOO_STATE_TOKEN ,
  defaults: new ZooStateModel(),
})
@Injectible()
export class ZooState {...}

... 
@Select(ZOO_STATE_TOKEN) zooState$: Observable<ZooStateModel>; // docs say it should work, but also getting an error in the IDE--not sure what I'm missing here

The documents say the state token selector should work but I'm getting this in the IDE Example take from https://www.ngxs.io/advanced/token towards the bottom Improved type checking for @Select

However, even if that does work, how do I type-safely assign an observable pandas or zebras prop from the props within that state? I know I can define selectors within the state for every property within the state model. But that is not an acceptable solution. Is there a different way that I'm missing that allows me to type-safely select those state props from within a component?

p.s. the slack link doesn't appear to be set in such a way that anyone can log into it and ask questions. The reddit sub hasn't been posted on literal months (not even a release announcement for the recent release of 3.8.0, which strongly implies the sub is just dead). I suggest setting up a discord server where quick questions/discussions can be had.

[dmrickey]

Anyone? It's not obvious how this is supposed to work

[dmrickey]

[HrlecMatej]

You are getting the compile error because of strictPropertyInitialization setting for your TS compiler. Source: https://www.ngxs.io/concepts/select#using-select-decorator-with-strictpropertyinitialization

[hakimio]

Might be worth trying the upcoming select() function instead of decorator: https://github.com/ngxs/store/issues/1854#issuecomment-1537792314 https://stackblitz.com/edit/ngxs-select-dispatch-utils-v0-fa8hnc?file=src%2Fapp%2Fapp.component.ts

[arturovt]

Great news! v18.0.0 has been released and it includes a fix for this issue. We are closing this issue, but please re-open it if the issue is not resolved. Please leave a comment in the https://github.com/ngxs/store/discussions/2173 if you come across any regressions with respect to your issue.