Creating a custom function that links a property from one object to a different property

Question

Creating a custom function that links a property from one object to a different property

I'm currently working on a function that can map a property from one object to another.

For example, the mapProperty function can be utilized like this:

mapProperty('_id', 'id', { _id: "arst" } )

. This should result in the type { id: string }.

The function mapProperty is defined below. However, I believe that using as unknown as M is not ideal. Without it, I encounter the following error:

Type 'T & { [x: string]: T[K]; }' is not assignable to type 'M'.
'M' could potentially have any unrelated type compared to 'T & { [x: string]: T[K]; }'.

It's also not feasible to define the return value as : { [key: L]: T[K] }.

Is there a better solution to this problem?

const mapProperty = <T, K extends keyof T, M, L extends keyof M>(
  from: K,
  to: L,
  obj: T,
): M => {
  const prop = obj[from];
  delete obj[from];
  return ({ ...obj, [to]: prop } as unknown) as M;
};

Edit: (I used Николай Гольцев's answer with a slight modification)

I have introduced an additional parameter which is a function responsible for mapping the value of the target property:

const mapProperty = <T, K extends keyof T, L extends string, M = T[K]>(
  obj: T,
  from: K,
  to: L,
  fn?: (x: T[K]) => M,
): Omit<T, K> & { [key in L]: M } => {
  const prop = fn ? fn(obj[from]) : obj[from];
  delete obj[from];
  return { ...obj, [to]: prop } as any;
};

typescript typescript-typings typescript-generics

Answer 1

Answer №1

To achieve this outcome, the following syntax can be utilized:

const modifyProperty = <T, K extends keyof T, L extends string>(
  source: K,
  target: L,
  object: T,
): Omit<T, K> & {
    [key in L]: T[K]
} => {
  const property = object[source];
  delete object[source];
  return { ...object, [target]: property } as any;
};

const result = modifyProperty('_id', 'id', { _id: "arst", k: true } )

The issue arises in the return statement due to the delete operator not affecting the variable's type. Even after deletion, it remains of type T. Based on my understanding, a computed property always yields the type { [x: string]: T }.

Answer 2

To achieve this outcome, the following syntax can be utilized:

const modifyProperty = <T, K extends keyof T, L extends string>(
  source: K,
  target: L,
  object: T,
): Omit<T, K> & {
    [key in L]: T[K]
} => {
  const property = object[source];
  delete object[source];
  return { ...object, [target]: property } as any;
};

const result = modifyProperty('_id', 'id', { _id: "arst", k: true } )

The issue arises in the return statement due to the delete operator not affecting the variable's type. Even after deletion, it remains of type T. Based on my understanding, a computed property always yields the type { [x: string]: T }.

Answer 3

Answer №2

Check out the solution below for a different approach:


type Data = { age: 1, name: 'string' }

// Main utility
type Replace<O, P1 extends keyof O, P2 extends string> =
    Pick<O, Exclude<keyof O, P1>>
    & { [P in P2]: O[P1] }


type Result = Replace<Data, 'name', 'surname'>

const mapProperty = <O, P1 extends keyof O, P2 extends string>(obj: O, from: P1, to: P2): Replace<O, P1, P2> => {
    const { [from]: replaced, ...rest } = obj;

    // It's recommended not to use the delete operator due to its drawbacks and slowness. Instead, consider using Reflect.deleteProperty() as an alternative. Dealing with unknown casting can be tricky when working with computed properties like [to].
    return {
        ...rest,
        [to]: replaced
    } as unknown as Replace<O, P1, P2>
}

const data: Data = { age: 1, name: 'string' }

const result = mapProperty(data, 'age', 'year')
type Res = keyof typeof result // "year" | "name"

Avoiding the delete operator is advisable due to performance reasons and potential issues. Consider using Reflect.deleteProperty() as a better alternative. Handling unknown types and casting can be challenging, especially with dynamic property names like [to].

Answer 4

Check out the solution below for a different approach:


type Data = { age: 1, name: 'string' }

// Main utility
type Replace<O, P1 extends keyof O, P2 extends string> =
    Pick<O, Exclude<keyof O, P1>>
    & { [P in P2]: O[P1] }


type Result = Replace<Data, 'name', 'surname'>

const mapProperty = <O, P1 extends keyof O, P2 extends string>(obj: O, from: P1, to: P2): Replace<O, P1, P2> => {
    const { [from]: replaced, ...rest } = obj;

    // It's recommended not to use the delete operator due to its drawbacks and slowness. Instead, consider using Reflect.deleteProperty() as an alternative. Dealing with unknown casting can be tricky when working with computed properties like [to].
    return {
        ...rest,
        [to]: replaced
    } as unknown as Replace<O, P1, P2>
}

const data: Data = { age: 1, name: 'string' }

const result = mapProperty(data, 'age', 'year')
type Res = keyof typeof result // "year" | "name"

Avoiding the delete operator is advisable due to performance reasons and potential issues. Consider using Reflect.deleteProperty() as a better alternative. Handling unknown types and casting can be challenging, especially with dynamic property names like [to].

Creating a custom function that links a property from one object to a different property

Answer №1

Answer №2

Similar questions

JS module declaration does not identify as a file module

Mocking Multiple Instances of Classes in Jest

The type 'Observable<boolean>' cannot be assigned to type 'Observable<UserRegistration>'

Error message: "The function app.functions is not a valid function in Angular Fire Functions

Enhance autocomplete functionality by incorporating a left icon feature for text fields within the autocomplete component

The Angular Tailwind utilities are functioning smoothly during development, but encountering issues in production environments

Boosting NestJS Performance with PM2 Multiple Instances

Find the distinct elements in two arrays of objects using TypeScript

What is the keyboard shortcut in VSCode for creating a new local variable and assigning the result of an expression to it?

I am interested in creating an input range slider using React and TypeScript

How to stop a loop of method calls that return a Promise<any> in TypeScript

Linking typescript error messages with their respective compiler configurations (tsconfig.json)

Incorporating route links into Material UI tabs in React using TypeScript

Unable to execute a join operation in TypeScript

Postpone the initial click action triggered by the specified directive

Trigger an action upon checking a checkbox in an Angular2 application

Maintain the Http Connection request header active when using Angular with Spring Security

Issue in React Native and Firestore: The 'auth' property is not recognized in the specified type or an error object of unknown type

Using a promise as a filter callback in JavaScript: A guide

Array of generic types in Typescript