get string literals out of const array after flatMap on it

I have declared an array as const:

const cloudRegionItems = [
  {
    category: 'Google Cloud',
    regions: [
      { value: 'v2018-us-central1', label: 'us-central1' },
      { value: 'europe-west1', label: 'europe-west1' },
    ],
  },
  {
    category: 'Amazon Web Services',
    regions: [
      { value: 'us-east-1', label: 'us-east-1' },
      { value: 'us-west-2', label: 'us-west-2' },
    ],
  },
] as const;

Then I want to flatten the regions of above mentioned array. I am doing it like this:

const cloudRegionOptions = cloudRegionItems.flatMap((item) => item.regions);

But I am getting an error as mentioned here:

Type 'readonly [{ readonly value: "v2018-us-central1"; readonly label: "us-central1"; }, { readonly value: "europe-west1"; readonly label: "europe-west1"; }] | readonly [{ readonly value: "us-east-1"; readonly label: "us-east-1"; }, { ...; }]' is not assignable to type '{ readonly value: "v2018-us-central1"; readonly label: "us-central1"; } | { readonly value: "europe-west1"; readonly label: "europe-west1"; } | readonly ({ readonly value: "v2018-us-central1"; readonly label: "us-central1"; } | { ...; })[]'.
  Type 'readonly [{ readonly value: "us-east-1"; readonly label: "us-east-1"; }, { readonly value: "us-west-2"; readonly label: "us-west-2"; }]' is not assignable to type '{ readonly value: "v2018-us-central1"; readonly label: "us-central1"; } | { readonly value: "europe-west1"; readonly label: "europe-west1"; } | readonly ({ readonly value: "v2018-us-central1"; readonly label: "us-central1"; } | { ...; })[]'.
    Type 'readonly [{ readonly value: "us-east-1"; readonly label: "us-east-1"; }, { readonly value: "us-west-2"; readonly label: "us-west-2"; }]' is not assignable to type 'readonly ({ readonly value: "v2018-us-central1"; readonly label: "us-central1"; } | { readonly value: "europe-west1"; readonly label: "europe-west1"; })[]'.
      Type '{ readonly value: "us-east-1"; readonly label: "us-east-1"; } | { readonly value: "us-west-2"; readonly label: "us-west-2"; }' is not assignable to type '{ readonly value: "v2018-us-central1"; readonly label: "us-central1"; } | { readonly value: "europe-west1"; readonly label: "europe-west1"; }'.
        Type '{ readonly value: "us-east-1"; readonly label: "us-east-1"; }' is not assignable to type '{ readonly value: "v2018-us-central1"; readonly label: "us-central1"; } | { readonly value: "europe-west1"; readonly label: "europe-west1"; }'.
          Type '{ readonly value: "us-east-1"; readonly label: "us-east-1"; }' is not assignable to type '{ readonly value: "europe-west1"; readonly label: "europe-west1"; }'.
            Types of property 'value' are incompatible.
              Type '"us-east-1"' is not assignable to type '"europe-west1"'.

Here is the playground: TS Playground link

The problem is that when you flatMap item.regions, the resulting type is a mutable array type. Since item.regions is a readonly tuple type, the assignment is broken, and an error occurs. You can easily get around this by mapping first, then flattening (which is the same as flatMap):

const cloudRegionOptions = cloudRegionItems.map((item) => item.regions).flat();

This works since the result from map is inferred as an array of readonly tuples, and since all item.regions are readonly tuples, the assignment works. After you map, you can then flatten the array, which produces the desired result.

Playground

I have no idea what I'm doing in Typescript but both of the following seem to work in the playground:

const cloudRegionOptions = cloudRegionItems.flatMap((item): Readonly<Array<any>> => item.regions);

and

const cloudRegionOptions = cloudRegionItems.flatMap((item) => [...item.regions])

.map(...).flat() is the best way to work around this, but an alternative declaration for flatMap(...) can also infer the correctly narrowed type:

interface ReadonlyArray<T> {
    flatMap<U extends (unknown | ReadonlyArray<unknown>), This = undefined> (
        callback: (this: This, value: T, index: number, array: T[]) => U,
        thisArg?: This
    ): U extends ReadonlyArray<unknown> ? U : U[]
}