Autocomplete bug on vscode when using action in prepare/reducer format

[LoiKos]

I get an issue with vscode autocomplete when using slice with actions in reducer/prepare format.

const todosSlice = createSlice({
...
  reducers: {
    addTodo: {
      reducer(state, action) {
        const { id, text } = action.payload;
        state.push({ id, text, completed: false });
      },
      prepare(text) {
        return { payload: { text, id: nextTodoId++ } };
      },
    },
    ...
  },
});

export const actions = todosSlice.actions;

I have build a small project to demonstrate.

Inside the src/features/todos you have the slice that include a "basic" function addTodo and a version with the format reducer/prepare. If you use the reducer/prepare version you shoudn't be able to access to autocomplete in other file from the folder (src/features/todos) but it just work well if you use the other version.

You still could see autocomplete with 'abc' symbols if you already use the function but that's all.

[phryneas]

Can you validate if it works when you annotate the method parameters?

const todosSlice = createSlice({
...
  reducers: {
    addTodo: {
	  /** @param {import('@reduxjs/toolkit').PayloadAction<{text: string, id: number}>} action */
      reducer(state, action) {
        const { id, text } = action.payload;
        state.push({ id, text, completed: false });
      },
      /** @param {string} text */
      prepare(text) {
        return { payload: { text, id: nextTodoId++ } };
      },
    },
    ...
  },
});

[LoiKos]

Tested on project and works fine !

[phryneas]

Yeah. So our TypeScript support is so good that it even works for JavaScript (which is why you are getting all that autocomplete), but there are some edge cases where our TypeScript cannot catch on everything that JavaScript code without types does.
I'll try to find a solution for this, but no guarantees. Writing TS to support JS is kind of bonkers ;)

[LoiKos]

Yeah. So our TypeScript support is so good that it even works for JavaScript (which is why you are getting all that autocomplete)

Yeah it's pretty awesome !

I'll try to find a solution for this, but no guarantees. Writing TS to support JS is kind of bonkers ;)

Thank you if a fix is possible, it would be perfect :).

[sweetliquid]

When I used prepare in Typescript, a type error occurred. Is it related to this issue?

    toggleTodo: {
      reducer(state, action) {
        const todo = state.find((todo) => todo.id === action.payload)
        if (todo) {
          todo.completed = !todo.completed
        }
      },
      // type error here
      prepare(id) {
        return {
          payload: id,
          // error: undefined,
          // meta: undefined,
        }
      }
    }

[phryneas]

@sweetliquid the prepare notation requires you to specify an explicit type for the action parameter for the reducer.

[sweetliquid]

Yes thank you, it works.