Argument of type 'boolean' is not assignable to parameter of type 'never'.

[Jakobud]

I need to create a store where I save state values using dynamic keys in my application. I have a store like this:

export interface StoreState {
  values: {
    darkmode: boolean,
  };
  setValue: {
    darkmode: (newValue: boolean) => void,
  };
}

const useStore = create<StoreState>()(
  (set) => ({
      values: {
        darkmode: true,
      },
      setValue: {
        darkmode: (newValue) => set((state) => ({
          values: {
            ...state.values,
            darkmode: newValue,
          }
        })),  
     }
    }),
) 

The idea is that I can have a dynamic number of checkbox inputs in my application. When I create those Checkbox components I pass a unique ID to them and then I access the state value for it like this:

// id = 'darkmode';
const checkboxValue = useStore((state) => state.values[id]);
const setCheckboxValue = useStore((state) => state.setValue[id]);

So setCheckboxValue is now the function used to set the state value of 'darkmode'. But when I try to use setCheckboxValue I get this Typescript error:

setCheckboxValue(true);

Argument of type 'boolean' is not assignable to parameter of type 'never'.

What am I doing wrong here? How is setCheckboxValue not knowing what the input value is supposed to be?

[dai-shi]

It looks fine with this playground: https://tsplay.dev/NBr7xN

Can you reproduce the problem in the playground?

[dai-shi]

It's not Zustand issue. It's how TS works.

[Jakobud]

Yes I know it's not a Zustand issue. I'm just wondering if using Zustand there is a more traditional way of dealing with this type of situation. What is the best approach?

[dai-shi]

For TS only approach, we need type assertions. For more general approach, I'd avoid dynamic keys. For Zustand only approach, we can try getting functions without selectors (using .getState), but that doesn't solve the problem actually. Overall, I think my first approach seems the best so far.

I wonder if anyone else has suggestions. There must be many various solutions.

[dai-shi]

What's your requirement btw?
What should happen if you call setCheckboxValue(true); in the case of id===editorWidth?

[Jakobud]

Another thing I can think of is not using a setValue method but rather a different method for each 'type' like setBooleanValue setStringValue, etc. Not very DRY though.