Typescript 和 ReactJS：以前的 state 如何使其工作

Question

I'm having trouble making the previous state on React 18 working with Typescript version 4.8.3.

This is my refreshToken code and I get the error :

Value of type '(prev: any) => any' has no properties in common with type 'IUserData'. Did you mean to call it?ts(2560)

on (prev: any), So I tried adding prev in my 'IUserData' (useAuth() is related to IUserData), but it doesn't work...

const useRefreshToken = () => {
    const { setAuth } = useAuth();

    const refresh = async () => {
        const response = await axios.get('/refresh', {
            withCredentials: true 
        });
        setAuth((prev: any) => { 
            return { 
                ...prev, 
                role: response.data.idRole, 
                accessToken: response.data.accessToken }
        });
        return response.data.accessToken;
    }
    return refresh;
};

export default useRefreshToken;

My IUserData interface:

export interface IUserData {
    id?: number
    email?: string
    role?: number
    accessToken?: string
    auth?: {id?: number
        email?: string
        role?: number
        accessToken?: string
    }
    setAuth?: Dispatch<SetStateAction<IUserData>>
    setPersist?: Dispatch<SetStateAction<boolean>> | Dispatch<any>
}

When I try with (prev: IUserData) I get the error :

Value of type '(prev: IUserData) => { accessToken: any; id?: number | undefined; email?: string | undefined; role?: number | undefined; auth?: { id?: number | undefined; email?: string | undefined; role?: number | undefined; accessToken?: string | undefined; } | undefined; setAuth?: Dispatch<...> | undefined; setPersist?: Dispatch...' has no properties in common with type 'IUserData'. Did you mean to call it?ts(2560)

Do you have any suggestions?

Answer 1

Change the type in setAuth inside of IUserData

For example:

type AuthData = {
    id?: number
    email?: string
    role?: number
    accessToken?: string
}

export interface IUserData {
    id?: number
    email?: string
    role?: number
    accessToken?: string
    auth?: AuthData,
    setAuth?: Dispatch<SetStateAction<AuthData>>
    setPersist?: Dispatch<SetStateAction<boolean>> | Dispatch<any>
}

and remove the any type from your prevState

...
setAuth((prev) => { 
  return { 
    ...prev, 
    role: response.data.idRole, 
    accessToken: response.data.accessToken 
  }
});
...