The issue of inconvenience arises when dealing with `as const` arrays, as the readonly T[] is not directly assignable to T[]. The challenge lies in how to effectively remove

Question

The issue of inconvenience arises when dealing with `as const` arrays, as the readonly T[] is not directly assignable to T[]. The challenge lies in how to effectively remove

I encounter this issue repeatedly (playground link):

const arr = [1,2,3] as const

const doSomethingWithNumbers = <T extends number[]>(numbers: T) => {}

doSomethingWithNumbers(arr)
//                     ^
// Argument of type 'readonly [1, 2, 3]' is not assignable to parameter of type 'number[]'.
//  The type 'readonly [1, 2, 3]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.

I understand that I can adjust the function to also accommodate readonly arrays:

export type AllowReadonly<T extends any[]> = T | readonly T[number][]

const doSomethingWithNumbers = <T extends <number[]>>(numbers: AllowReadonly<T>) => {}

However, this leads to the same issue within doSomethingWithNumbers, as the numbers parameter can now also be readonly.

What is a effective way to address this challenge?

arrays typescript readonly

Answer 1

Answer №1

Solution:

I stumbled upon this superior answer in a thread dedicated to removing the readonly modifier from not just arrays, but also objects.

This method caters to both arrays and objects: playground link

Initial solution:

Here's a neat little function that strips away the readonly modifier when inputting into the function:

const removeReadonly = <T extends any>(arr: T[] | readonly T[]): T[] => arr as T[]

Example usage (playground link):

const arr = [1,2,3] as const

const doSomethingWithNumbers = <T extends number[]>(numbers: T) => {}

const removeReadonly = <T extends any>(arr: T[] | (readonly T[])): T[] => arr as T[];

const nonReadonlyArr = removeReadonly(arr)  // (1 | 2 | 3)[];
doSomethingWithNumbers(nonReadonlyArr)      // No error;

Answer 2

Solution:

I stumbled upon this superior answer in a thread dedicated to removing the readonly modifier from not just arrays, but also objects.

This method caters to both arrays and objects: playground link

Initial solution:

Here's a neat little function that strips away the readonly modifier when inputting into the function:

const removeReadonly = <T extends any>(arr: T[] | readonly T[]): T[] => arr as T[]

Example usage (playground link):

const arr = [1,2,3] as const

const doSomethingWithNumbers = <T extends number[]>(numbers: T) => {}

const removeReadonly = <T extends any>(arr: T[] | (readonly T[])): T[] => arr as T[];

const nonReadonlyArr = removeReadonly(arr)  // (1 | 2 | 3)[];
doSomethingWithNumbers(nonReadonlyArr)      // No error;

The issue of inconvenience arises when dealing with `as const` arrays, as the readonly T[] is not directly assignable to T[]. The challenge lies in how to effectively remove

Answer №1

Solution:

Initial solution:

Similar questions

Transforming a solitary JSON object into a JSON array using PHP

Do I need to use [providers] when implementing constructor dependency injection?

Error: The function $compile does not exist

Prohibit the Use of Indexable Types in TypeScript

Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

Is it necessary to include async/await in a method if there is already an await keyword where it is invoked?

Tips for combing 2 JSON Arrays using Groovy

Having trouble retrieving form values in Typescript React, only receiving HTML tag as output

The sum is being treated as a concatenation instead of an addition in this case

Error: The specified updateTag type in the Angular SEO service is not compatible

What is the simplest way to transform a JSON containing strings into a JSON with arrays?

Typescript encounters difficulty locating the Express module

Issue with rest operator behavior in TypeScript when targeting es2018

Assign the image source to the file path located in the data directory

Inserting an array into a MySQL database using PHP

Angular 4 incorporates ES2017 features such as string.prototype.padStart to enhance functionality

What is the best way to verify a field against a set of string values using Typescript in a NestJS application

What is the best way to determine the highest value?

Creating a randomly generated array within a Reactjs application

Exported data in Vue3 components cannot be accessed inside the component itself