Guard against an array that contains different data types

Question

Guard against an array that contains different data types

I am trying to create a guard that ensures each entry in an array of loaders, which can be either query or proxy, is in the "success" state. Here is my attempted solution:

type LoadedQueryResult = Extract<UseQueryResult, { status: 'success' }>;
type LoadedProxyResult = Extract<UseProxyResult, { status: 'success' }>;
 
function isLoaded<T extends Array<UseQueryResult | UseProxyResult>>(loaders):
  loaders is Array<LoadedQueryResult | LoadedProxyResult>
{
    return loaders.every(loader => loader.status === 'success')
}

However, I am encountering issues with this approach. Can guards be utilized with mixed array types?

typescript

Answer 1

Answer №1

Utilizing generics and intersection types makes it a simple process:

function isFullyLoaded<T extends {status: string}>(loaders: T[]): loaders is (T & {status: 'success'})[] {
    return loaders.every(loader => loader.status === 'success');
}

/**********************/

type Query = {status: 'success' | 'error', foo: number};
type Proxy = {status: 'success' | 'error', bar: number};

let dataArr: (Query | Proxy)[] = [];

dataArr[0].status; // 'success' | 'error'
if (isFullyLoaded(dataArr)) {
    dataArr[0].status; // 'success'
}

TS Playground

Answer 2

Utilizing generics and intersection types makes it a simple process:

function isFullyLoaded<T extends {status: string}>(loaders: T[]): loaders is (T & {status: 'success'})[] {
    return loaders.every(loader => loader.status === 'success');
}

/**********************/

type Query = {status: 'success' | 'error', foo: number};
type Proxy = {status: 'success' | 'error', bar: number};

let dataArr: (Query | Proxy)[] = [];

dataArr[0].status; // 'success' | 'error'
if (isFullyLoaded(dataArr)) {
    dataArr[0].status; // 'success'
}

TS Playground

Guard against an array that contains different data types

Answer №1

Similar questions

Tips on updating x-label formatting (to display months in words) utilizing morris.js with Angular 5

Angular 2 Component attribute masking

What is the best way to reference typescript files without using absolute paths?

Unable to locate the name 'Cheerio' in the @types/enzyme/index.d.t file

TypeScript is throwing an error because a value has been declared but never actually used in the

How can I determine which dist folder is utilized during the building of my App if an npm package contains multiple dist folders?

Importing CSS properties from MUI v5 - A comprehensive guide

Modify a property within an object and then emit the entire object as an Observable

What is the best way to structure a nested object model in Angular?

Angular 4: Utilizing a class with a constructor to create an http Observable model

Managing event date changes in Angular PrimeNG FullCalendar

The instanceof operator does not recognize the value as an instance and is returning false, even though it

Encountering an issue in Angular 4 AOT Compilation when trying to load a Dynamic Component: Error message states that the

What is the reason for Google Chrome extension popup HTML automatically adding background.js and content.js files?

Issue encountered when attempting to develop a countdown timer using Typescript

Tips for isolating data on the current page:

Unable to access the correct item from local storage while a user is authenticated

Error message: "react-router typescript navigation version 0.13.3 - Unable to access 'router' property"

Creating custom disabled button styles using TailwindUI in a NextJS application

Is it feasible to obtain the userId or userInfo from the Firebase authentication API without requiring a login?