Tips for iterating over an array that implements either of two interfaces in TypeScript

Question

Tips for iterating over an array that implements either of two interfaces in TypeScript

The objective is to develop a reusable method for filtering out items from an array that implements one of two interfaces

Providing a code example would be most helpful:

interface IDuration {
  start: number;
  end: number;
}

interface IRelativeDuration {
  relativeStart: number;
  relativeEnd: number;
}

export const enforceBoundries = (
  point: number,
  items: Array<IDuration> | Array<IRelativeDuration>,
): void => {

  let startKey: string
  let endKey: string

  // **HAVING TROUBLE WITH THIS**
  if(/* iDuration */) {
    startKey = 'start'
    endKey = 'end'
  } else {
    startKey = 'relativeStart'
    endKey = 'relativeEnd'
  }

  items.forEach(item => {
    if(item[startKey] > point) {
      //....
    }
  })
}

The solution might lie in Generic Constraints, but TypeScript is not my strong suit

I have tried various conditions in the if statement but can't find one that successfully compiles the application

typescript

Answer 1

Answer №1

One useful approach is to utilize the typeof operator to determine the type of an item before casting it to its specific type.

Answer 2

One useful approach is to utilize the typeof operator to determine the type of an item before casting it to its specific type.

Answer 3

Answer №2

From my understanding, there is currently no direct way to validate whether a JSON object aligns with an interface during runtime in JavaScript.

The absence of interfaces in JavaScript complicates this task further, as 'typeof' would always return 'object'.

One potential workaround involves using Object.keys() to verify if all the necessary properties are included in the object:

interface IDuration {
    start: number;
    end: number;
}

interface IRelativeDuration {
    relativeStart: number;
    relativeEnd: number;
}

export const enforceBoundries = (
    point: number,
    items: Array<IDuration> | Array<IRelativeDuration>,
): void => {
    items.forEach((item: IDuration | IRelativeDuration) => {
        const props = Object.keys(item); // retrieve all keys from the item object
        let startValue = null;

        // determine if the item conforms to either of the two interfaces
        if (props.includes("start") && props.includes("end")) {
            // it fits the IDuration interface
            startValue = (item as IDuration).start;
        } else if (props.includes("relativeStart") && props.includes("relativeEnd")) {
            // it matches the IRelativeDuration interface
            startValue = (item as IRelativeDuration).relativeStart;
        } else {
            // does not correspond to IDuration or IRelativeDuration
            throw new Error("Something went wrong...");
        }

        if (startValue === null) {
            throw new Error("startValue should never be null at this point...");
        }

        if (startValue > point) {
            //....
        }
    });
}

Answer 4

From my understanding, there is currently no direct way to validate whether a JSON object aligns with an interface during runtime in JavaScript.

The absence of interfaces in JavaScript complicates this task further, as 'typeof' would always return 'object'.

One potential workaround involves using Object.keys() to verify if all the necessary properties are included in the object:

interface IDuration {
    start: number;
    end: number;
}

interface IRelativeDuration {
    relativeStart: number;
    relativeEnd: number;
}

export const enforceBoundries = (
    point: number,
    items: Array<IDuration> | Array<IRelativeDuration>,
): void => {
    items.forEach((item: IDuration | IRelativeDuration) => {
        const props = Object.keys(item); // retrieve all keys from the item object
        let startValue = null;

        // determine if the item conforms to either of the two interfaces
        if (props.includes("start") && props.includes("end")) {
            // it fits the IDuration interface
            startValue = (item as IDuration).start;
        } else if (props.includes("relativeStart") && props.includes("relativeEnd")) {
            // it matches the IRelativeDuration interface
            startValue = (item as IRelativeDuration).relativeStart;
        } else {
            // does not correspond to IDuration or IRelativeDuration
            throw new Error("Something went wrong...");
        }

        if (startValue === null) {
            throw new Error("startValue should never be null at this point...");
        }

        if (startValue > point) {
            //....
        }
    });
}

Tips for iterating over an array that implements either of two interfaces in TypeScript

Answer №1

Answer №2

Similar questions

Invalid characters have been found in literals within the transpiled JavaScript output

Uploading CSV files in Angular 4

Having trouble appending a new attribute to the Mongoose output

Error: Attempting to access 'config' property of undefined variable

Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

Encountering a 405 error when making an OpenAI API call with next.js, typescript, and tailwind CSS

Utilizing a d.ts Typescript Definition file for enhanced javascript intellisene within projects not using Typescript

How to extract a string value from an observable array in Angular2 NativeScript?

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

Enhancing Angular Material forms with custom background colors

Switch app engines in real-time based on the URL path with express framework

Creating Dynamic Forms in React with Typescript: A Step-by-Step Guide to Adding Form Elements with an onClick Event Handler

It is not necessary to specify a generic type on a Typescript class

I am encountering an issue regarding the 'endpoint' property within my environment.ts file while working on an Angular 17 project

Is the detection change triggered when default TS/JS Data types methods are called within an HTML template?

SvgIcon is not a recognized element within the JSX syntax

Fetching User Details Including Cart Content Upon User Login

TypeScript Compile Error: The property is not available in the 'IStateParamsService' type

Determine the type of embedded function by analyzing the callback

Utilize an array of JSON objects to populate an array of interfaces in Angular/Typescript