It is impossible to search within a read-only array union

Question

It is impossible to search within a read-only array union

Is there a way to search for an element within a readonly array union in TypeScript?

const areas = {
  area1: {
    adjacencies: [2, 3, 4, 5]
  },
  area2: {
    adjacencies: [6, 7, 8]
  }
} as const;
let area: keyof typeof areas;
if (Math.random() < 0.5) {
  area = "area1";
} else {
  area = "area2"
}

// Argument of type 'number' is not assignable to parameter of type 'never'
areas[area].adjacencies.includes(3);

I also tried indexOf, but it didn't work either. And I found the includes type is

ReadonlyArray<T>.includes(searchElement: never, fromIndex: number | undefined): boolean

.

I suppose the includes type should be the union of the elements of two readonly arrays, like demonstrated below:

const areas = {
  area1: {
    adjacencies: [2, 3, 4, 5]
  },
  area2: {
    adjacencies: [6, 7, 8]
  }
} as const;

type ValueOf<T extends object> = T[keyof T];
type Values = ValueOf<ValueOf<typeof areas>>
type ElementUnion = Values[number];

let area: keyof typeof areas;
if (Math.random() < 0.5) {
  area = "area1";
} else {
  area = "area2"
}

areas[area].adjacencies.includes(3);

How can I apply ElementUnion to includes or indexOf methods?

Here is the playground

typescript

Answer 1

Answer №1

By using as const, you are instructing TypeScript to treat literals like 0 or "hello" as their exact values, rather than general types such as number or string.

Keep in mind that this approach will only work if both arrays contain the element you are looking for.

const areas = {
  area1: {
    adjacencies: [2, 3, 4, 5]
  },
  area2: {
    adjacencies: [6, 7, 8, 3]
  }
} as const;

type ValueOf<T extends object> = T[keyof T];
type Values = ValueOf<ValueOf<typeof areas>>;
type ElementUnion = Values[number];

let area: keyof typeof areas;
if (Math.random() < 0.5) {
  area = "area1";
} else {
  area = "area2"
}

areas[area].adjacencies.includes(3);

It's important to note the significance of adding a 3 to the second array in the code snippet above.

Visit Playground

Edit:

Pay attention to the function signature, which only accepts the union of the arrays as valid input.

(method) ReadonlyArray<T>.includes(searchElement: 3, fromIndex: number | undefined): boolean

Edit 2:
Example:

const areas = {
  area1: {
    adjacencies: [2, 3, 4, 5]
  },
  area2: {
    adjacencies: [6, 7, 8]
  }
} as const;

type ValueOf<T extends object> = T[keyof T];
type Values = ValueOf<ValueOf<typeof areas>>;
type ElementUnion = Values[number];

let area: keyof typeof areas;

if (Math.random() < 0.5) {
  area = "area1";
} else {
  area = "area2";
}

// When .adjacencies can be either one of the arrays
// with 'as const' in place, TypeScript considers the intersection
// (elements present in both arrays) as literal arguments
areas[area].adjacencies.includes(3);

///////////////////////////////////////////////////////////////
if (area === 'area1') {
  // In this scenario, TypeScript knows the exact elements present
  // Since the variable was declared as const, it only allows literal values from the array
  //                          v Hover over this
  areas[area].adjacencies.includes(2);
} else {
  //                          v Hover over this
  areas[area].adjacencies.includes(6);
}

// Direct access
//                         v Hover over this
areas.area1.adjacencies.includes(2);
//                         v Hover over this
areas.area2.adjacencies.includes(6);
//                         v Hover over this
areas['area1'].adjacencies.includes(2)
//                         v Hover over this
areas['area2'].adjacencies.includes(6)

Check out the playground for interactive hovers

View Playground

Answer 2

By using as const, you are instructing TypeScript to treat literals like 0 or "hello" as their exact values, rather than general types such as number or string.

Keep in mind that this approach will only work if both arrays contain the element you are looking for.

const areas = {
  area1: {
    adjacencies: [2, 3, 4, 5]
  },
  area2: {
    adjacencies: [6, 7, 8, 3]
  }
} as const;

type ValueOf<T extends object> = T[keyof T];
type Values = ValueOf<ValueOf<typeof areas>>;
type ElementUnion = Values[number];

let area: keyof typeof areas;
if (Math.random() < 0.5) {
  area = "area1";
} else {
  area = "area2"
}

areas[area].adjacencies.includes(3);

It's important to note the significance of adding a 3 to the second array in the code snippet above.

Visit Playground

Edit:

Pay attention to the function signature, which only accepts the union of the arrays as valid input.

(method) ReadonlyArray<T>.includes(searchElement: 3, fromIndex: number | undefined): boolean

Edit 2:
Example:

const areas = {
  area1: {
    adjacencies: [2, 3, 4, 5]
  },
  area2: {
    adjacencies: [6, 7, 8]
  }
} as const;

type ValueOf<T extends object> = T[keyof T];
type Values = ValueOf<ValueOf<typeof areas>>;
type ElementUnion = Values[number];

let area: keyof typeof areas;

if (Math.random() < 0.5) {
  area = "area1";
} else {
  area = "area2";
}

// When .adjacencies can be either one of the arrays
// with 'as const' in place, TypeScript considers the intersection
// (elements present in both arrays) as literal arguments
areas[area].adjacencies.includes(3);

///////////////////////////////////////////////////////////////
if (area === 'area1') {
  // In this scenario, TypeScript knows the exact elements present
  // Since the variable was declared as const, it only allows literal values from the array
  //                          v Hover over this
  areas[area].adjacencies.includes(2);
} else {
  //                          v Hover over this
  areas[area].adjacencies.includes(6);
}

// Direct access
//                         v Hover over this
areas.area1.adjacencies.includes(2);
//                         v Hover over this
areas.area2.adjacencies.includes(6);
//                         v Hover over this
areas['area1'].adjacencies.includes(2)
//                         v Hover over this
areas['area2'].adjacencies.includes(6)

Check out the playground for interactive hovers

View Playground

Answer 3

Answer №2

Special thanks to @zerkms for bringing up . It appears there are a couple of workarounds available.

const regions = {
  region1: {
    connections: [2, 3, 4, 5]
  },
  region2: {
    connections: [6, 7, 8]
  }
} as const;

type ValueOf<T extends object> = T[keyof T];
type Values = ValueOf<ValueOf<typeof regions>>
type ElementUnion = Values[number];

let region: keyof typeof regions;
if (Math.random() < 0.5) {
  region = "region1";
} else {
  region = "region2"
}

// initial solution using type assertion
(regions[region].connections as unknown as ElementUnion[]).includes(3); // it works!

// alternative solution attempting to utilize declaration merging
// from lib.es2016.array.include.d.ts, which seems reasonable
interface ReadonlyArray<<T> {
  includes<T>(searchElement: T, fromIndex?: number): boolean;
}

regions[region].connections is of type

readonly [2, 3, 4, 5] | readonly [6, 7, 8]

, essentially equivalent to

ReadonlyArray<2 | 3 | 4 | 5 | 6 | 7 | 8>

. I conducted an experiment:

const readOnlyArray = [1, 2, 3] as const;
readOnlyArray.includes(3); // TypeScript successfully determined T as 1 | 2 | 3

It appears that TypeScript struggles to convert a union of readonly arrays into a union of array elements, whether this is intentional or not remains unclear.

Answer 4

Special thanks to @zerkms for bringing up . It appears there are a couple of workarounds available.

const regions = {
  region1: {
    connections: [2, 3, 4, 5]
  },
  region2: {
    connections: [6, 7, 8]
  }
} as const;

type ValueOf<T extends object> = T[keyof T];
type Values = ValueOf<ValueOf<typeof regions>>
type ElementUnion = Values[number];

let region: keyof typeof regions;
if (Math.random() < 0.5) {
  region = "region1";
} else {
  region = "region2"
}

// initial solution using type assertion
(regions[region].connections as unknown as ElementUnion[]).includes(3); // it works!

// alternative solution attempting to utilize declaration merging
// from lib.es2016.array.include.d.ts, which seems reasonable
interface ReadonlyArray<<T> {
  includes<T>(searchElement: T, fromIndex?: number): boolean;
}

regions[region].connections is of type

readonly [2, 3, 4, 5] | readonly [6, 7, 8]

, essentially equivalent to

ReadonlyArray<2 | 3 | 4 | 5 | 6 | 7 | 8>

. I conducted an experiment:

const readOnlyArray = [1, 2, 3] as const;
readOnlyArray.includes(3); // TypeScript successfully determined T as 1 | 2 | 3

It appears that TypeScript struggles to convert a union of readonly arrays into a union of array elements, whether this is intentional or not remains unclear.

It is impossible to search within a read-only array union

Answer №1

Answer №2

Similar questions

Enable the acceptance of various validator patterns within Angular Material 2

Navigational menu routing with AngularJS2 using router link paths

Issue with ngFor displaying only the second item in the array

Using the TranslateService in Angular to externalize an array of strings

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

A guide to building a versatile higher-order function using TypeScript

Rxjs: accessing the most recent value emitted by an observable

Encountering a "args" property undefined error when compiling a .ts file in Visual Studio Code IDE

Hold on until the page is reloaded: React

What is the equivalent bundle size limit in bytes for the limitBytes value in the Rollup plugin analyzer?

Can you explain the usage of the syntax in Angular marked with the @ sign, such as @NgModule, @Component, and @Injectable?

Playwright failing to execute GraphQL tests due to TypeScript configuration problems

The value of 'Boolean' cannot be changed as it is a constant or a read-only property and cannot be assigned

Can NODE_PATH be configured in Typescript?

Limit the types of function parameters to only one option within a union type parameter

Issue with routing in Angular 6 is caused by the "#" character

What causes the return value of keyof to vary in this particular case?

Utilizing the JavaScript Array.find() method to ensure accurate arithmetic calculations within an array of objects

Struggles with updating app.component.ts in both @angular/router and nativescript-angular/router versions

Just a straightforward Minimum Working Example, encountering a TypeScript error TS2322 that states the object is not compatible with the type 'IntrinsicAttributes & Props & { children?: ReactNode; }'