TS2339: Property 'data' does not exist

Question

I have this angular store configuration

action.ts

    export const saveUserAction = createAction(
      '[User] Save',
      props<{ payload: User }>
    );

export const saveUserSuccessAction = createAction(
  '[User] Save Success',
  props<{ data: User }>
)

reducer.ts

export const reducer = createReducer(
  initialState,
  on(loadUsers, (state) => ({...state, isLoading: true})),
  on(UserAction.loadUsersSuccess, (state, {data: users}) => ({...state, data: users, isLoading: false})),
  on(UserAction.loadUsersFailure, (state, error) => ({...state, error: error, isLoading: false})),
  on(saveUserFailureAction, (state, error) => ({...state, isLoading: false, error: error})),
  on(saveUserSuccessAction, (state, {data: user}) => ({...state, isLoading: false, selectedUser: user})),
);

effect.ts

saveUserEffect$ = createEffect(() => this.actions$.pipe(
    ofType(saveUserAction),
    switchMap((action: ActionType<typeof saveUserAction>) => {
      return this.userService.saveUser(action.payload).pipe(
        map((user) => {
          return saveUserSuccessAction(user)
        }),
        catchError(error => observableOf(saveUserFailureAction({error: error})))
      )
    })
  ))

Typescript complains

TS2339: Property 'payload' does not exist on type 'ActionCreatorProps{ payload: User; }> & TypedAction"[User] Save"> & { type: "[User] Save"; }'  

and in the reducer on saveUserSuccessAction it complains

TS2339: Property 'data' does not exist on type 'ActionCreatorProps{ data: User; }> & TypedAction"[User] Save Success"> & { type: "[User] Save Success"; }'

it seems strong type is very difficult in java-script. I don't want to use any type

How can I make it work?

Answer 1

Found the issue props<{ payload: User }> should be props<{ payload: User }>()

Also props<{ data: User }> should be props<{ data: User }>()