I was trying to implement a function. The function has 6 arguments. Instead of individually assigning the types to the parameters, I defined a type.

Here is the type:

export type HandleLoginParamTypes = {
    e: React.FormEvent<EventTarget>;
    navigate: NavigateFunction;
    link: string;
    data: LoginDataType;
    setError: React.Dispatch<React.SetStateAction<string>>;
    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
};

Here is how I assigned the type to my function parameters:

const handleLogin = async (
    {e,navigate, link,data,setError,setLoading}: HandleLoginParamTypes
) => {

    //function code

}

Now when I try to invoke this function like this:

handleLogin(e, navigate, "/login", { emailId, password }, setError, setLoading)

I am getting this error:

TS2554: Expected 1 arguments, but got 6.

I am unable to understand why 6 parameters are considered only one parameter. Please guide me.

CodePudding user response：

Your function signature uses parameter destructuring. It says "This function has one parameter, an object of type HandleLoginParamTypes; when the function is called, grab this list of six properties from that one object argument and provide them as parameters." But your code calling it isn't passing it an object with those properties as a single argument, it's passing six discrete arguments instead.

Either:

1. Update the function to accept six parameters (probably not a good idea, it's too easy to get lost in the parameter list),

   or

2. Update the call to provide a single object with e etc. as properties of the object.

Here's #2:

handleLogin({e, navigate, link: "/login", data: { emailId, password }, setError, setLoading});
// −−−−−−−−−^−−−−−−−−−−−−−^^^^^−−−−−−−−−−−^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

Or as that line is a bit long:

handleLogin({
    e,
    navigate,
    link: "/login",
    data: { emailId, password },
    setError,
    setLoading
});