VS Code TSServer behavior differs from TSC when using the persist middleware

[DaLukasDev]

Hi all,

I have a weird issue creating a store.

The following code

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

type User = {
  name: string;
};
type Company = {
  name: string;
};

export type AuthStoreState = {
  accessToken?: string;
  user?: User;
  companies?: Company[];
};

export type AuthStoreActions = {
  setAccessToken: (token: string) => void;
  setUser: (user: User) => void;
  setCompanies: (companies: Company[]) => void;
};

const initialState = {
  accessToken: undefined,
  user: undefined,
  companies: undefined,
} satisfies AuthStoreState;

export const useAuthStore = create<AuthStoreState & AuthStoreActions>()(
  persist(
    (set) => ({
      ...initialState,
      setAccessToken: (token) => set(() => ({ accessToken: token })),
      setUser: (user) => set(() => ({ user })),
      setCompanies: (companies) => set(() => ({ companies })),
    }),
    {
      name: 'auth-store',
    },
  ),
);

Gives me a type error when using the persist middleware. (Without the persist middleware it is just fine):

The types of setAccesToken are incompatible
      Type '((token: string) => void) | undefined' is not assignable to type '(token: string) => void'.
              Type 'undefined' is not assignable to type '(token: string) => void' 

However when I run tsc over this code. All is fine and no type errors are reported. Opening the same file in PHPStorm, results in no errors being shown.

When I change the AuthStoreActions to be possibly undefined:

export type AuthStoreActions = {
  setAccessToken?: (token: string) => void;
  setUser?: (user: User) => void;
  setCompanies?: (companies: Company[]) => void;
};

VScode seems to be happy as well.

So this seems to be a VSC issue as I also fail to reproduce it in a codesandbox/TSPlayground...
Does anyone have had similar issues and maybe know how to remedy this?

edit:
Using following versions:

"zustand": "^5.0.1"
"typescript": "^5.6.2"

[DaLukasDev]

Update:

I narrowed it down to two vscode settings:

"typescript.inlayHints.parameterNames.enabled": "all",
"typescript.inlayHints.variableTypes.enabled": true,

Using only one of the two is fine but using them simultaneously throws the type error mentioned above.
Not sure if this is a bug in Zustand or in VScode itself as I'm using these inline hints for over a year without any issues with other libraries.

[NoahNxT]

I've been experiencing this issue recently too—never encountered it in past projects. Looks like you've already done a lot of troubleshooting. Hopefully, something useful comes up soon 🙏