title: Redux and Typescript - PayloadAction and keyof
body: <p>I am getting used to Typescript in Redux and have come across a problem with my reducer:</p>
  <pre><code>type Filter = {
    keyA: string;
    keyB: string;
    keyC: string;
  };
  
  export interface MyState {
    filter: Filter;
  }
  
  ....
  ....
  
  setFilter: (
    state,
    action: PayloadAction&lt;{ key: keyof Filter; value: any }&gt;
  ) =&gt; {
    if (state.filter[action.payload.key] !== action.payload.value) {
      state.filter = {
        ...state.filter,
        [action.payload.key]: action.payload.value,
      };
      .....
    }
  },
  
      Parsing error: Unexpected token
  
    141 |     setFilter: (
    142 |       state,
  &gt; 143 |       action: PayloadAction&lt;{ key: keyof Filter; value: any }&gt;
        |                                          ^
    144 |     ) =&gt; {
  </code></pre>
  <p>My component dispatches a filter change, that updates the explicit filter, e.g.</p>
  <pre><code>dispatch(setFilter({&quot;keyA&quot;: &quot;newValue&quot;}))
  </code></pre>
  <p>In the reducer, I just want to update the state to match the current filters.</p>
  <p>It does not matter where I use the &quot;keyof&quot; (e.g. define a separate interface), it always throws an error like &quot;unexpected token&quot;, &quot;expected semicolon&quot;.</p>
  <p>I would be very grateful if someone could help me.</p>