Typing an arrow function parameters

Issue

This is my typed function.

const setupFn = (
  sdkToken: ITokenResponse["kycToken"],
  onDocSubmit: (data: any) => void,
  kycStatuses: IKYCStatuses,
  setKycStatuses: React.Dispatch<React.SetStateAction<IKYCStatuses>>,
  setModalClosed: React.Dispatch<React.SetStateAction<boolean>>,
  handleError: (e: any) => void,
) => {}

Usage:

setupFn(
   res.data?.kycToken,
   onDocSubmit,
   kycStatuses,
   setKycStatuses,
   setModalClosed,
   handleError,
)

I was wondering how can I extract the type declaration outside of the function in an interface.

My attempt so far:

interface IProps {
      sdkToken: ITokenResponse["kycToken"];
      onDocSubmit: (data: any) => void;
      kycStatuses: IKYCStatuses;
      setKycStatuses: React.Dispatch<React.SetStateAction<IKYCStatuses>>;
      setModalClosed: React.Dispatch<React.SetStateAction<boolean>>;
      handleError: (e: any) => void;
}
const setupFn = (
      {sdkToken,
      onDocSubmit,
      kycStatuses,
      setKycStatuses,
      setModalClosed,
      handleError}: IProps
    ) => {}

Usage:

setupFn({
          sdkToken: res.data?.kycToken,
          onDocSubmit,
          kycStatuses,
          setKycStatuses,
          setModalClosed,
          handleError,
        })

Question:
Is it possible to extract the type outside of function but without changing the parameter to an object so that I don't have to update the usage of the setupFn everywhere.

What would be your ideal way of typing the setupFn mentioned here.

Solution

Not sure, if this is what you're asking for, but you can use Parameters to extract a tuple of function parameters, like this Playground example:

const setupFn = (
  sdkToken: Date,
  onDocSubmit: (data: any) => void,
  kycStatuses: string,
  setKycStatuses: number
) => {}

type SetupFnParams = Parameters<typeof setupFn>;


const setupParams: SetupFnParams = [new Date(), () => 1, 'kycStatuses', 42];

setupFn(...setupParams)

Answered By - TmTron