Working on a modify feature

Question

Working on a modify feature

I am in need of creating a new function that can modify an item in an array at a specified index using a given function.

const adjustItem = <T, U extends T[], V extends number>(index: V) =>
  (f: (x: U[V]) => U[V]) => (originalArray: T[]) =>
    Object.assign([], originalArray, { [index]: f(originalArray[index]) });

After implementing this function, I noticed that the return type is not as expected. Instead of U, it returns:

never[] & T[] & {
    [x: number]: U[V];
}

Any ideas on how to achieve a more useful return type?

typescript

Answer 1

Answer №1

Here are three different approaches to achieve your goal:

function updateItem<T>(array: T[], index: number, updater: (item: T) => T): T[] {
  return array.map((item, i) => i === index ? updater(item) : item);
}

If you prefer using tuples to maintain type information:

function updateItem<T extends unknown[], U extends keyof T>(array: T, index: U, updater: (item: T[U]) => T[U]): T {
  const result = [...array] as T;
  result[index] = updater(result[index]);
  return result;
}

A more functional approach with currying:

const updateItem =
  <T extends unknown[]>(array: T) =>
  <U extends number>(index: U) =>
  (updater: (item: T[U]) => T[U]) => [
    ...array.slice(0, index),
    updater(array[index]),
    ...array.slice(index + 1)
  ] as T;

Answer 2

Here are three different approaches to achieve your goal:

function updateItem<T>(array: T[], index: number, updater: (item: T) => T): T[] {
  return array.map((item, i) => i === index ? updater(item) : item);
}

If you prefer using tuples to maintain type information:

function updateItem<T extends unknown[], U extends keyof T>(array: T, index: U, updater: (item: T[U]) => T[U]): T {
  const result = [...array] as T;
  result[index] = updater(result[index]);
  return result;
}

A more functional approach with currying:

const updateItem =
  <T extends unknown[]>(array: T) =>
  <U extends number>(index: U) =>
  (updater: (item: T[U]) => T[U]) => [
    ...array.slice(0, index),
    updater(array[index]),
    ...array.slice(index + 1)
  ] as T;

Answer 3

Answer №2

It seems unnecessary to separate one transformation into three functions, as it only adds complexity to the solution. Consider simplifying it like this:

function customClone<T>(array: T[], index: number, modifier: (elem: T) => T): T[] {
  const resultArray = array.slice();
  resultArray.splice(index, 1, modifier(array[index]));
  return resultArray;
}

Keep in mind to account for potential errors with the index parameter.

Answer 4

It seems unnecessary to separate one transformation into three functions, as it only adds complexity to the solution. Consider simplifying it like this:

function customClone<T>(array: T[], index: number, modifier: (elem: T) => T): T[] {
  const resultArray = array.slice();
  resultArray.splice(index, 1, modifier(array[index]));
  return resultArray;
}

Keep in mind to account for potential errors with the index parameter.

Working on a modify feature

Answer №1

Answer №2

Similar questions

Tips for utilizing ng class within a loop

Encountering issues in d3.js following the transition to Angular 8

AngularFire UPDATE -> APPLY CHANGES

What is the best way to set a boolean value for a checkbox in a React project with Typescript?

React component is not properly updating the state setter value

Implement the TypeScript handleChange function for input fields and dropdown menus

How can a TypeScript function be used to retrieve a string (or JSON object)?

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

Traversing a sequence of method calls within a Promise object (as the return type)

Tips for resolving package conflicts while integrating Wagmi View into a React/Typescript application

How can I customize icons within the <mat-nav-list> using Angular?

Encountering the error "No exported member 'RouteComponentProps' in the 'react-router-dom' module while upgrading to react-router v6"

Modify the height of React Cards without implementing collapse functionality

Issue with importing RxJS in an Angular 5 project

Difficulty with setting up Typescript in Visual Studio Code on MacOS Catalina

Switch the following line utilizing a regular expression

Is it possible to create a custom string type with calculations in Typescript?

What is the best way to dynamically add data to a JSON file?

Locating Items in an Array using Angular 5 and Forming a New Array with the Located Objects

What is the best way to set up Storybook with Vue Cli 3?