Home > front end >  Why is this Typescript erroring "This expression is not callable"?
Why is this Typescript erroring "This expression is not callable"?

Time:04-02

I have the following Typescript code and the IDE is telling me that "This expression is not callable. Type 'Pick<IUserContext, "clearAllLoginData">' has no call signatures." but I don't understand why.

To my understanding, the clearAllLoginData parameter of the logout function should be of type () => void, since it is Picked from the IUserContext interface.

Any pointers appreciated!

interface IUserContext {
    id?: number;
    email?: string;
    fname?: string;
    lname?: string;
    slname?: string;
    companyId?: number;
    companyName?: string;
    clearAllLoginData: () => void;
    setAllLoginData: () => void;
  }


interface LogoutParams {
    clearAllLoginData: Pick<IUserContext, "clearAllLoginData">;
    afterLogout?: () => void;
}

export const logout = ({ clearAllLoginData, afterLogout }: LogoutParams):void => {
    clearAllLoginData(); // <---- Error: "This expression is not callable"
    if (afterLogout) {
      afterLogout();
    }
};

CodePudding user response:

What Pick does is

Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

In other words - it creates an object type from another object type.

Pick<IUserContext, "clearAllLoginData">

will result in a type which is:

{
  clearAllLoginData: () => void;
}

It will not give you a type of

() => void

Pick isn't the right tool here. You need something like this instead:

interface LogoutParams {
    clearAllLoginData: IUserContext["clearAllLoginData"]
    afterLogout?: () => void;
}
  • Related