Better generic feature support

[parloti]

Which @ngrx/* package(s) are relevant/related to the feature request?

store

Information

Possibility to create a strongly typed generic feature.

Like that:

export function createAbstractReducer<TState extends IBaseState>(
  initialState: TState
) {
  const reducer = createReducer(
    initialState,
    on(creator, (state: TState) => state) // Error
  );
  return reducer;
}

export function createAbstractFeature<
  TName extends string,
  TState extends IBaseState
>(name: TName, reducer: ActionReducer<TState>) {
  const feature = createFeature({ name, reducer }); // Error

  return feature;
}

Reproduction in the Typescript playground.

I think this is related to typescript not being able to expand conditional generic types.

I've tried doing this Issue with generic properties when type mapping and that How to test if two types are exactly the same but I haven't been able to get it to work.

This was already provided in #2982, but it's back.

Describe any alternatives/workarounds you're currently using

Casting the state to a concrete type.

Like that:

export function createConcretReducer<TState extends IBaseState>(
  initialState: TState
) {
  const reducer = createReducer(
    initialState as IBaseState,
    on(creator, (state: IBaseState) => state) // OK
  );
  return reducer;
}

I would be willing to submit a PR to fix this issue

• Yes
• No

[timdeschryver]

A workaround is to let the state infer it's type:

export function createAbstractReducer<TState extends IBaseState>(
  initialState: TState
) {
  const reducer = createReducer(
    initialState,
    //            👇
    on(creator, (state) => state)
  );
  return reducer;
}

I prefer to leave it like this because the types for this are already quite complex.

[michaelurban]

@timdeschryver What do you do when you need initialState to be TState | null? The types for this are very complex and I'm not sure what I'm missing. I've tried everything I can think of and the only thing I've gotten to work is to call createReducer with createReducer<any>([...])

  function createAbstractReducer<
    TState extends {
      isActive: boolean;
    },
  >(initialState: TState | null) {
    const reducer = createReducer(
      initialState,
      on(actions.verificationRequest, () => ({
        isActive: true,
      })),
      on(actions.reset, (state) => state),
    );
    return reducer;
  }