Crossing over types of nested arrays

Question

Crossing over types of nested arrays

When working with type intersection, it's important to note that certain examples function smoothly:

type Merged = (
    { lorems: { foo: string }[] } &
    { lorems: { bar: string }[] }
);

const x: Merged;

x.lorems[0].foo; // this is fine
x.lorems[0].bar; // this works too

However, array methods do not inherently support type intersections, as demonstrated here:

x.lorems.shift().foo; // works
x.lorems.shift().bar; // error encountered

An unconventional solution exists to address this issue:

(x.lorems.shift() as typeof x.lorems[0]).bar;

The question remains: Can a unioned type with nested array intersections be created?

typescript typescript-typings

Answer 1

Answer №1

It appears that a union type and a type guard may be necessary in this situation.

To ensure type safety when an object can have multiple types, TypeScript needs the ability to determine if something is of a specific type or not.


interface Type1 { shared: string; lorems: { foo: string }[] };
interface Type2 { shared: string; lorems: { bar: number }[] };
type TypeUnion = Type1 | Type2;

function getLorems(x: TypeUnion) {
  const t = x.lorems.shift();
  x.shared; // This is acceptable
  if ("foo" in t) t.foo;
  if ("bar" in t) t.bar;
}

Answer 2

It appears that a union type and a type guard may be necessary in this situation.

To ensure type safety when an object can have multiple types, TypeScript needs the ability to determine if something is of a specific type or not.


interface Type1 { shared: string; lorems: { foo: string }[] };
interface Type2 { shared: string; lorems: { bar: number }[] };
type TypeUnion = Type1 | Type2;

function getLorems(x: TypeUnion) {
  const t = x.lorems.shift();
  x.shared; // This is acceptable
  if ("foo" in t) t.foo;
  if ("bar" in t) t.bar;
}

Answer 3

Answer №2

One approach is to develop a Type utility that can extract Types from nested arrays and generate a new array with intersected types.

export type IntersectionTypeWithArrays<T1, T2, arrayKeys extends (keyof T1 & keyof T2)> = (
    Omit<T1, arrayKeys> &
    Omit<T2, arrayKeys> & {
        [key in arrayKeys]: (
            (T1[key] extends Array<infer U1> ? U1 : never) & 
            (T2[key] extends Array<infer U2> ? U2 : never)
        )[]
    }
);

After defining the type intersection, you can use it as follows:

let x: IntersectionTypeWithArrays<LoremsFoo, LoremsBar, 'lorems'>;

x.lorems.shift().bar; // This will produce an output

Answer 4

One approach is to develop a Type utility that can extract Types from nested arrays and generate a new array with intersected types.

export type IntersectionTypeWithArrays<T1, T2, arrayKeys extends (keyof T1 & keyof T2)> = (
    Omit<T1, arrayKeys> &
    Omit<T2, arrayKeys> & {
        [key in arrayKeys]: (
            (T1[key] extends Array<infer U1> ? U1 : never) & 
            (T2[key] extends Array<infer U2> ? U2 : never)
        )[]
    }
);

After defining the type intersection, you can use it as follows:

let x: IntersectionTypeWithArrays<LoremsFoo, LoremsBar, 'lorems'>;

x.lorems.shift().bar; // This will produce an output

Crossing over types of nested arrays

Answer №1

Answer №2

Similar questions

Tips for retaining the value of a variable when the page is reloaded

Tips for leveraging _.union function from lodash to eliminate duplicate elements from several arrays in a TypeScript project

extracting the value of an option from a form control to utilize in the component's model

Limiting the parameter type in Node.js and TypeScript functions

The input value "HH:MM" does not match the expected format of 'FormatOptions' for this parameter

Angular6 implementation of a 3D card carousel

Is it possible to simultaneously update two entities using a single endpoint?

Angular 6 is experiencing an issue with the functionality of the file toggle JS

The error message "ER_BAD_FIELD_ERROR: The column 'table.column' is not recognized in the 'on clause'" is displayed

I am interested in creating an input range slider using React and TypeScript

Searching for MongoDB / Mongoose - Using FindOneById with specific conditions to match the value of an array inside an object nestled within another array

What is the correct way to implement Vue.use() with TypeScript?

Issues are arising with Angular Form where the FormControl is not being properly set up for the first field in my form

What potential drawbacks come with utilizing the OOP approach in both JavaScript and React?

Why is it that the resource fails to load in an Angular localhost environment when making an http request?

user interface grid element in Materia

Should the null-forgiving operator be avoided when using `useRef`?

Combining certain key values from two dictionaries based on matching IDs in Angular

How can I create a bold, three-dimensional line using Three JS LineBasicMaterial?

Styling a <slot> within a child component in Vue.js 3.x: Tips and tricks