What is the best way to determine the specific type of a value that is part of a union type?

Question

What is the best way to determine the specific type of a value that is part of a union type?

Utilizing @azure/msal-react and @azure/msal-browser for implementing authentication in a React project with Typescript.

The issue arises when TypeScript identifies event.payload as type EventPayload, but does not allow checking the exact type (e.g. AuthenticationResult) using the instanceof operator.

How can the exact type of event.payload be verified?

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)
      ...   
    }
  }
  ...
});

javascript typescript azure-ad-msal

Answer 1

Answer №1

When handling events, it is crucial to explicitly check event.payload rather than using instanceof, especially in TypeScript where the type is not known at runtime. Since a callback function is being used in the event handler

One recommended approach is to create a helper function. You can find an example of this implementation in the 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
    }
  }
}

Answer 2

When handling events, it is crucial to explicitly check event.payload rather than using instanceof, especially in TypeScript where the type is not known at runtime. Since a callback function is being used in the event handler

One recommended approach is to create a helper function. You can find an example of this implementation in the 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
    }
  }
}

What is the best way to determine the specific type of a value that is part of a union type?

Answer №1

Similar questions

Tips for incorporating user access control logic into a lazy-loaded Angular Monorepo application without embedding the logic in the main application

Guide on creating rsa key pair on the client side with angular2

Utilize jQuery to hide and then show elements based on text input

What is the simplest way to incorporate Vue with Typescript, without the need for a complex build setup?

Unable to successfully transfer a document

Tips for extracting HTML tags directly from JSON data

Python web scraping: Extracting data from HTML tag names

Ways to achieve 8 columns in a single row using Javascript and Bootstrap

Can anyone explain the functionality of passport.initialize() in the context of Node.js and Express

The custom tooltip is not being displayed as intended

What is the best library to utilize for uploading an Excel file in a React application?

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

Unexpected token in catch clause in React Native TypeScript

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

How about placing a particle on the top layer of a mesh at a random location?

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Using ajax for sending data is a breeze, but I am encountering trouble when attempting to receive data back from

"Design the website with a WYSIWYG editor while preventing users from disrupting the page's

Looking to implement a CSS effect that will hide content without removing the space it occupies on the page?

Notification for background processing of $http requests