Changing the value within an object by using a dynamic variable as the property name in Typescript

Question

Changing the value within an object by using a dynamic variable as the property name in Typescript

Here is a method that I have:

updateDate(row: TaskItem, column: keyof TaskItem, date: string) {
  row[column] = date;
}

The TaskItem interface is defined as follows:

export interface TaskItem {
  id: number,
  myDate: string
}

I would like to call the updateDate method like this:

updateDate(rowItem, 'myDate', '2022-02-20');

But TypeScript gives me an error:

Type 'string' is not assignable to type 'never'.ts(2322)

Changing row: TaskItem to row: any fixes the issue, but I prefer a more concise solution.

typescript

Answer 1

Answer №1

A neat solution is to use generics in order to safely handle any object type, ensuring that the second parameter is a valid key of obj and that the third parameter matches the type of typeof obj[key].

function updateProp<TObj, K extends keyof TObj>(obj: TObj, key: K, value: TObj[K]) {
    obj[key] = value;
}

interface TaskItem {
    id: number,
    myDate: string
}

declare const rowItem: TaskItem;

updateProp(rowItem, 'myDate', '2022-02-20');

Playground Link

Answer 2

A neat solution is to use generics in order to safely handle any object type, ensuring that the second parameter is a valid key of obj and that the third parameter matches the type of typeof obj[key].

function updateProp<TObj, K extends keyof TObj>(obj: TObj, key: K, value: TObj[K]) {
    obj[key] = value;
}

interface TaskItem {
    id: number,
    myDate: string
}

declare const rowItem: TaskItem;

updateProp(rowItem, 'myDate', '2022-02-20');

Playground Link

Answer 3

Answer №2

The issue you are encountering is valid, as your updateDate function assumes that the new value (date) is of type string. However, since you are not specifying which specific field needs to be updated, there is a conflict because even if the new value is of type string, there is a chance that the column could be id (column: 'id' | 'myDate') which is not of type string but rather a number.

You can either modify the function updateDate to only handle updates for the myDate field:

function updateDate(row: TaskItem, date: string) {
  row.myDate = date
}

or include a condition to ensure that you update only the myDate field:

function updateDate(row: TaskItem, column: keyof TaskItem, date: string) {
  if (column === 'myDate') {
     row[column] = date
  }
}

Typescript playground

Answer 4

The issue you are encountering is valid, as your updateDate function assumes that the new value (date) is of type string. However, since you are not specifying which specific field needs to be updated, there is a conflict because even if the new value is of type string, there is a chance that the column could be id (column: 'id' | 'myDate') which is not of type string but rather a number.

You can either modify the function updateDate to only handle updates for the myDate field:

function updateDate(row: TaskItem, date: string) {
  row.myDate = date
}

or include a condition to ensure that you update only the myDate field:

function updateDate(row: TaskItem, column: keyof TaskItem, date: string) {
  if (column === 'myDate') {
     row[column] = date
  }
}

Typescript playground

Changing the value within an object by using a dynamic variable as the property name in Typescript

Answer №1

Answer №2

Similar questions

Can you tell me the data type of IconButtons in Material UI when using TypeScript?

InvalidAction: The function forEach cannot be applied to "res"

Get started with adding a Typescript callback function to the Facebook Login Button

Older versions of javascript offered the assurance of a promise

Challenges with variable scopes and passing variables in Ionic 2 (Typescript)

Using React with Typescript: Can the parent component access data fetched from a nested child component?

What is the best way to set up a property in a service that will be used by multiple components?

Tips for modifying only one property after receiving an object from an HTTP GET request

Unpacking nested JSON objects with key-value pairs at various depths using TypeScript within a Node environment

Navigating the onSubmit with Formik in React: Tips and Tricks

Tips for extracting specific JSON response data from an array in TypeScript

There are no imports in index.js and there is no systemjs configuration set up

When parameters are added to one route, all other routes cease to function properly

Having trouble logging in with Google using React, Redux, and Typescript - encountered an error when attempting to sign in

When evaluating code with eval, properties of undefined cannot be set, but the process works seamlessly without

When using Inertia.js with Typescript, an issue arises where the argument types {} and InertiaFormProps{} are not compatible with the parameter type Partial<VisitOptions> or undefined

Angular JS and TypeScript - Issue: ng:areq Invalid Argument "Argument 'XXXXXX' is not a function, received undefined"

NG build error: Module parsing failed due to an unexpected token - no updates made

I anticipated receiving an array of objects from the API response, but instead, I am dealing with an array of Promises in my React app using TypeScript

Keying objects based on the values of an array