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 for inserting a string into an array nested within an object stored in a state array

Monitor the change in values upon pressing the submit button on Angular

Tips for resolving this unhandled error in React TypeScript

Mastering Angular 7: A guide to efficiently binding values to radio buttons

Error TS2309: TypeScript encountered an error in Types/node/index.d.ts

Using Typescript: Defining a function parameter that can be either of two interfaces

Develop a "Read More" button using Angular and JavaScript

Displaying inner arrays in an Angular2 MatTable

A guide on extracting a JSON data with a BigInt type using TypeScript

The user interface design transforms as a PDF file is being generated through html2pdf

Creating keys from extensive JSON data without having to manually match types using Typescript

Having trouble retrieving a specific key from the state object in Redux using TypeScript

What is the process for integrating TypeScript compiling into a JavaScript application?

TypeScript async function that returns a Promise using jQuery

I'm looking for the Type Definitions Files (*.d.ts) for the Amazon Cognito Identity SDK. Does anyone know where I can find them and how

Determining the instance type of a TypeScript singleton class

Having trouble locating the name 'it' in Jest TypeScript

Using href with IconButtonProps is not supported

Utilize the nests cli swagger plugin to enable compatibility with external models

How to minimize xAxes labels in Chart.js