An element can be either an object or an array of objects

Question

An element can be either an object or an array of objects

Is there a way to define a type/interface that can handle both objects and arrays without having to explicitly check each time?

I want to avoid using the `|` operator in TypeScript which requires checking if a variable is an array or not, as I always know if it's an object or an array. Instead of using `as SomeType` or `as SomeType[]`, I'd like to be able to use `?.` everywhere.

One solution I've tried is defining a mixture of object and array:

interface _Array<T> extends Array<T | undefined> {}
type ArrayORObject<T> = Partial<T> & Partial<_Array<T>>;

This almost works, but now I'm running into an issue where I get "Index signature for type 'number' is missing in type SomeObject." It seems that objects need an array index signature ([index: number]), but I can't figure out how to make it optional.

Edit: Upgrading to the beta version of TS isn't feasible right now, so adding calls to functions like makeOrder() isn't much better than just manually checking for arrays.

For a better example, you can check out this TS Playground

typescript

Answer 1

Answer №1

Two object literals, order1 and order2, are at your disposal. Order1 contains a single burger while order2 includes an array of burgers. Unfortunately, this distinction is lost when you assign them an explicit type with a union.

Removing the explicit type provides a precise constant type, but there's no guarantee it aligns with the order interface.

Introducing TS 4.9, a satisfies keyword tackles this issue:

const order1 = {
    main: { meat: 'beef' }
} satisfies order;

Playground link to TS 4.9 solution

You need not rely on TS 4.9 as functions offer robust type inference:

function makeOrder<T extends order>(o: T): T {
  return o;
}

const order1 = makeOrder({
    main: { meat: 'beef' }
});

Playground link to TS 4.8 solution

Answer 2

Two object literals, order1 and order2, are at your disposal. Order1 contains a single burger while order2 includes an array of burgers. Unfortunately, this distinction is lost when you assign them an explicit type with a union.

Removing the explicit type provides a precise constant type, but there's no guarantee it aligns with the order interface.

Introducing TS 4.9, a satisfies keyword tackles this issue:

const order1 = {
    main: { meat: 'beef' }
} satisfies order;

Playground link to TS 4.9 solution

You need not rely on TS 4.9 as functions offer robust type inference:

function makeOrder<T extends order>(o: T): T {
  return o;
}

const order1 = makeOrder({
    main: { meat: 'beef' }
});

Playground link to TS 4.8 solution

Answer 3

Answer №2

a) transform it into an always-array https://i.sstatic.net/pmOdY.png

b) utilize the value within if when checking its data type https://i.sstatic.net/CxKoc.png

link to code snippet

Answer 4

a) transform it into an always-array https://i.sstatic.net/pmOdY.png

b) utilize the value within if when checking its data type https://i.sstatic.net/CxKoc.png

link to code snippet

An element can be either an object or an array of objects

Answer №1

Answer №2

Similar questions

The Angular Firebase query is being run repeatedly

What is the best way to choose an ID that changes based on the index position?

Guide to incorporating code coverage in React/NextJs using Typescript (create-next-app) and cypress

The Azure function encounters an AuthorizationFailure error while attempting to retrieve a non-public file from Azure Blob Storage

Having trouble showing JSON data with Ionic 2 and Xcode?

Error in Firebase Functions: Promises must be properly managed

Get a list of objects from a JSON array of objects using HTTP requests in Angular 5 with Typescript

Trigger an event in Angular using TypeScript when a key is pressed

Customizable TypeScript interface with built-in default key value types that can be easily extended

Change (EU Time) date format of dd/mm/yyyy hh:mm:ss to a timestamp

Tips for Implementing Guard in Angular Applications Without Using Components

I am interested in creating a class that will produce functions as its instances

Lock the table header in place as the table content scrolls upward using Angular4

What steps are involved in ensuring that this NodeJS package is compatible with browsers?

Angular 11 error: Datatable type is not defined

Is it possible to extract TypeScript types from one interface in order to integrate them into another separate interface?

Using Angular to transform a JSON GET response into a class with methods

Include a control within a form based on the Observable response

"Develop a unique Angular 12 custom pipe that retrieves data through a service and converts it into a string instead of

Is it possible to include multiple eventTypes in a single function call?