What is the best way to convert a `readonly string[]` to a regular `string[]`?

Question

What is the best way to convert a `readonly string[]` to a regular `string[]`?

My data setup is as follows (I am not declaring it as an enum because it is used in both TypeScript server code and non-TypeScript client code):

import { enumType } from 'nexus';

export const TYPE_ENUM = Object.freeze({
  H: 'H',
  S: 'S',
});
export const TYPES = Object.freeze(Object.values(TYPE_ENUM));

export const MyType = enumType({
  name: 'MyType',
  members: TYPES,
});

While working on this, TypeScript raised the following warning related to the members field:

Type '(readonly string[])[]' is not assignable to type '(string | EnumMemberInfo)[] | Record<string, string | number | boolean | object>'.
  Type '(readonly string[])[]' is not assignable to type '(string | EnumMemberInfo)[]'.
    Type 'readonly string[]' is not assignable to type 'string | EnumMemberInfo'.
      Type 'readonly string[]' is not assignable to type 'string'.ts(2322)
enumType.d.ts(29, 3): The expected type comes from property 'members' which is declared here on type 'EnumTypeConfig<"MyType">'

I understand the issue. It's not possible to insert a readonly string[] into something that expects a string[] due to their differences. My inquiry is about the best approach to resolve this.

I have noted that unwrapping and recreating the array seems to work: members: [...TYPES], but it doesn't feel quite right.

typescript type-conversion type-assertion

Answer 1

Answer №1

Upon closer inspection, you'll find the solution lies within the code snippet: members: [...TYPES]. This is necessary to provide an additional mutable Array for the enumType function.

While it may seem like there's an issue at first, rest assured that everything is as it should be. The reason for this is simple - the enumType function requires a mutable Array, allowing it to modify its contents. Take a look at this example:

function enumType(v: {name: string; members: string[]): string[] {
  v.members.push('JOKER');
  return v.members;
}

export const MyType = enumType({
  name: 'MyType',
  members: TYPES as unknown as string[],
});
// Expected result: MyType should be ['H', 'S', 'JOKER']. However, an error occurs in strict mode due to attempting to update a frozen array.

If you have control over the enumType function and know that it does not alter the array content, consider modifying it to accept a readonly string[]:

function enumType({v: {name: string; memebers: readonly string[]}) {
  ...
}

Alternatively, if you are unable to make changes to the function itself, using members: [...TYPES] remains the most effective approach.

Answer 2

Upon closer inspection, you'll find the solution lies within the code snippet: members: [...TYPES]. This is necessary to provide an additional mutable Array for the enumType function.

While it may seem like there's an issue at first, rest assured that everything is as it should be. The reason for this is simple - the enumType function requires a mutable Array, allowing it to modify its contents. Take a look at this example:

function enumType(v: {name: string; members: string[]): string[] {
  v.members.push('JOKER');
  return v.members;
}

export const MyType = enumType({
  name: 'MyType',
  members: TYPES as unknown as string[],
});
// Expected result: MyType should be ['H', 'S', 'JOKER']. However, an error occurs in strict mode due to attempting to update a frozen array.

If you have control over the enumType function and know that it does not alter the array content, consider modifying it to accept a readonly string[]:

function enumType({v: {name: string; memebers: readonly string[]}) {
  ...
}

Alternatively, if you are unable to make changes to the function itself, using members: [...TYPES] remains the most effective approach.

What is the best way to convert a `readonly string[]` to a regular `string[]`?

Answer №1

Similar questions

What makes Mathematics a unique object in JavaScript programming?

The NestJs project fails to display the updates when using the "tsc" command before running either "npm run start" or "npm run start:dev"

React: Issue with passing arguments to redux action hooks

The logic behind regular expressions

Customizing TinyMCE's font style menu options

What is the most efficient way to retrieve and update a Stencil component parameter without triggering a rerender of the component?

Arranging Select Dropdown Options in a Specific Order using Angular 7 and Typescript

Declaring properties for an interface

Displaying varying values of an object using TypeScript's console log trick

Using template literals with Optional chaining in Javascript does not yield the expected results

Vuetify 3 does not display dialogs

In TypeScript, the function is failing to retrieve the complete array value

What is the best approach: Developing a class or a service to handle multiple interfaces?

Leveraging symbols as object key type in TypeScript

When accessing a method exposed in Angular2 from an external application, the binding changes are lost

In TypeScript, deduce the optional generic type automatically

Utilize the reducer from another slice in Redux Toolkit

The type 'ReadableStream<any>' cannot be assigned to the parameter type 'ReadableStream'

What are some ways to troubleshoot the TypeScript React demonstration application in Chrome?

Modify a particular attribute in an array of objects