Typescript函数参数有两种类型，一种类型的属性不能访问，因为它不是另一种类型的属性

Question

我有这个组件：

<GoogleLogin
  clientId={googleAppId}
  onSuccess={responseGoogle}
  onFailure={responseGoogle}
  isSignedIn={true}
  cookiePolicy={"single_host_origin"}
  autoLoad={false}
  icon={true}
/>

其onSuccess 和onFailure 道具的以下功能：

const responseGoogle = (
  response: GoogleLoginResponse | GoogleLoginResponseOffline
) => {
  console.log(response.accessToken);
};

我只想使用response: GoogleLoginResponse 类型，但如果这样做，我会从库中收到以下错误：

Type '(response: GoogleLoginResponse) => void' is not assignable to type '(response: GoogleLoginResponse | GoogleLoginResponseOffline) => void'

所以我使用response: GoogleLoginResponse | GoogleLoginResponseOffline作为参数。

问题是当我尝试访问GoogleLoginResponse 类型的属性accessToken 时，出现以下错误，因为accessToken 不是GoogleLoginResponseOffline 的属性：

Property 'accessToken' does not exist on type 'GoogleLoginResponse | GoogleLoginResponseOffline'.
  Property 'accessToken' does not exist on type 'GoogleLoginResponseOffline'.

如何访问accessToken 的response 属性？

注意事项：

• 我正在使用以下 React 库：https://www.npmjs.com/package/react-google-login。
• 我不使用response: any，因为这不是一个好的做法。
• GoogleLoginResponse 和 GoogleLoginResponseOffline 类型定义：https://github.com/anthonyjgrove/react-google-login/blob/master/index.d.ts。

Answer 1

在您的函数中，您可以使用 type guards 通过使用类型保护来缩小类型范围。

const responseGoogle = (
  response: GoogleLoginResponse | GoogleLoginResponseOffline ): void => {
    if ('accessToken' in response ){ 
        console.log(response.accessToken);
    }else {
        console.log('offline'); 
    }
}

responseGoogle({accessToken:'abc', name: 'Jim'})
responseGoogle({name: 'Joan'})