Reactjs Typescript函数参数有两种类型，其中一种类型的属性可以'；无法访问，因为它不是其他类型的属性

我有这个部分：

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

我只想使用类型

响应：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'.

如何访问

response

的属性

accessToken

注:

• 我正在使用以下反应库：
• 我不使用

  response:any

  ，因为这被认为不是一个好的做法

• GoogleLoginResponse

  和

  GoogleLoginResponseOffline

  类型定义：

---

在您的函数中，您可以使用类型防护装置缩小类型范围

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'})

---

“我只想用那种类型…”-为什么？如果不是那个呢？您知道这不会发生吗？文档表明您可以使用

accessType=“online”

或

accessType=“offline”

prop（默认为“online”）作为

GoogleLogin

组件。由于我使用的是

accessType=“online”

，因此响应类型将为

GoogleLoginResponse

。有关详细信息：。

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'})