如何检查在联合类型中定义的值的类型？

Question

我使用 @azure/msal-react 和 @azure/msal-browser 在 React with Typescript 中实现身份验证。

我的问题是 TypeScript 知道 event.payload 的类型为 EventPayload（联合），但是它不允许我使用 instanceof 运算符检查确切的类型（例如 AuthenticationResult）。

如何查看event.payload 的确切类型？

import {
  EventType,
  AuthenticationResult,
  PublicClientApplication,
} from "@azure/msal-browser";

export declare type EventPayload = AccountInfo | PopupRequest | RedirectRequest | SilentRequest | SsoSilentRequest | EndSessionRequest | AuthenticationResult | PopupEvent | null;

msalInstance.addEventCallback((event) => {
  if (event.eventType === EventType.LOGIN_SUCCESS) {
    if (event.payload instanceof AuthenticationResult) {
      // 'AuthenticationResult' only refers to a type, but is being used as a value here.ts(2693)
      ...   
    }
  }
  ...
});

Answer 1

你应该显式检查 event.payload，并且你不能使用 instanceof，因为 ts 在运行时不知道你的类型。因为您在事件处理程序中使用了回调

建议添加辅助功能，demo

type Base = { // for simplicity add some base type
    eventType: string
}
type AuthenticationResult = Base & {
    name: 'auth'
}
type PopupEvent = Base & {
    event: string
}

// helper function that checks type
function isAuth (evt: EventPayload): evt is AuthenticationResult {
    return evt?.name === 'auth'
}
export declare type EventPayload = AuthenticationResult | PopupEvent | null;
const fn = (event: EventPayload) => {
  if (event?.eventType != null) {
    if (isAuth(event)) {
      // correct type
    }
  }
}