TypeScript: I can not implement function with incompatible param types

Question

I have this function:

function handleLoginSuccess(response: GoogleLoginResponse | GoogleLoginResponseOffline ) {
    const { access_token } = response.tokenObj;
    console.log(response.getAuthResponse());
    setIsLoggedIn(true);
  }

So, i want to get the tokenObj from the response. It is declared in the GoogleLoginResponse interface but not in the GoogleLoginReponseOffline. How can i access this property in this method?

I am passing it as a parameter of another function that expects this signature. So it is not possible to be changed.

GoogleLoginResponse Interface:

export interface GoogleLoginResponse {
  getBasicProfile(): BasicProfile;
  getAuthResponse(): AuthResponse;
  reloadAuthResponse(): Promise<AuthResponse>;
  getGrantedScopes(): string;
  getHostedDomain(): string;
  getId(): string;
  isSignedIn(): boolean;
  hasGrantedScopes(scopes: string): boolean;
  disconnect(): void;
  grantOfflineAccess(options: GrantOfflineAccessOptions): Promise<GoogleLoginResponseOffline>;
  signIn(options: SignInOptions): Promise<any>;
  grant(options: SignInOptions): Promise<any>;
  // google-login.js sez: offer renamed response keys to names that match use
  googleId: string;
  tokenObj: AuthResponse;
  tokenId: string;
  accessToken: string;
  profileObj: {
    googleId: string;
    imageUrl: string;
    email: string;
    name: string;
    givenName: string;
    familyName: string;
  }
}

GoogleLoginResponseOffline interface

export interface GoogleLoginResponseOffline {
  readonly code: string;
}

How can I proceed with this? I am using the https://github.com/anthonyjgrove/react-google-login library

Edit: I fixed it adding the any type in the method definition

function handleLoginSuccess(response: any) {
    // implementation
  }

But I am not comfortable to use the "any" type there

Andrew Tvorch · Accepted Answer · 2020-10-06 07:58:52Z

1

I just faced the same issue and found the solution in the TypeScript documentation.

https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards

You need to write an extra function to check the type of the response:

const isGoogleLoginResponse = (response: GoogleLoginResponse | GoogleLoginResponseOffline): 
  response is GoogleLoginResponse => { 
    return !!response && 
           typeof response === 'object' && 
           !!(response as GoogleLoginResponse).tokenObj;
};

Then in your onSucces function chech the response like this:

function handleLoginSuccess(response: GoogleLoginResponse | GoogleLoginResponseOffline ) {
  if(!isGoogleLoginResponse(response)) {
    return;// Handle it however you want
  }
  const { access_token } = response.tokenObj;
  console.log(response.getAuthResponse());
  setIsLoggedIn(true);
}

And no TypeScript errors anymore!

edited Oct 6, 2020 at 7:58

answered Sep 24, 2020 at 9:20

Andrew Tvorch

1711 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ehutchllew · Accepted Answer · 2020-05-24 01:08:17Z

0

You could use an intersection type GoogleLoginResponse | GoogleLoginResponseOffline but honestly it seems like you should probably just have different handlers that can "handle" each scenario separately.

answered May 24, 2020 at 1:08

ehutchllew

9588 silver badges16 bronze badges

1 Comment

Bruno Vasconcelos Over a year ago

I believe it is not possible to implement different handlers in this situation. This method is used in a callback function that expects the intersection type. I have tried to implement using the intersection type (as in the first example), but the interfaces are incompatible and any property I want to get gives an error because the other interface does not have it.

Collectives™ on Stack Overflow

TypeScript: I can not implement function with incompatible param types

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related