Ways to transfer specific properties from one object to another in TypeScript

Question

Ways to transfer specific properties from one object to another in TypeScript

I'm currently working on a function that selectively copies key-value pairs from one object to another in order to remove certain properties. The code snippet for this function is shown below:

sanitizeData: function (sourceObject: object, ...allowedKeys: string[]) {
    const sanitizedObject = {};
    Object.keys(sourceObject).forEach((key: string) => {
      if (allowedKeys.includes(key)) {
        sanitizedObject[key] = sourceObject[key];
      }
    });
  }

The purpose of this function is to take an object (e.g., req.body) and a list of strings as input, then perform the specified operation. For instance, an input may look like:

sanitizeData(req.body, 'name', 'age', 'email')

.

This code works seamlessly in JavaScript, however, when trying to run it in TypeScript, I encounter the following error message:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.

If anyone knows how to resolve this TypeScript error, your help would be greatly appreciated.

typescript

Answer 1

Answer №1

Here is an innovative solution that intelligently chooses the keys you provide and upholds the typings in the output.

// To ensure that the object you pass extends a record with string keys,
// we use any as a workaround for now, there might be a better way to do this
function sanitize<T extends Record<string, any>, K extends keyof T>(obj: T, ...keys: Array<K>): Pick<T, K> {

  // We implement your code in a different manner while maintaining its functionality
  return Object.entries(obj).reduce((a, [k, v]) => {

    // Here, I opted for find due to the limitation of includes accepting only strings
    if (keys.find((a) => a === k)) {
      a[k as K] = v;
    }
    return a;
  }, {} as Pick<T, K>);
}

// Testing the function with sample data should yield the expected results.
const test = {
  a: 1,
  b: 4,
  c: 6
};

const output_a = sanitize(test, 'a', 'b');

// This will generate a type error
output_a.c;
// No type error will occur here
output_a.a;

console.log(output_a);

It's important to note that even though generics are defined within the function, they don't need to be explicitly specified during invocation when the arguments provide enough context. Thus, the generics are implicitly inferred.

Check out my playground.

Answer 2

Here is an innovative solution that intelligently chooses the keys you provide and upholds the typings in the output.

// To ensure that the object you pass extends a record with string keys,
// we use any as a workaround for now, there might be a better way to do this
function sanitize<T extends Record<string, any>, K extends keyof T>(obj: T, ...keys: Array<K>): Pick<T, K> {

  // We implement your code in a different manner while maintaining its functionality
  return Object.entries(obj).reduce((a, [k, v]) => {

    // Here, I opted for find due to the limitation of includes accepting only strings
    if (keys.find((a) => a === k)) {
      a[k as K] = v;
    }
    return a;
  }, {} as Pick<T, K>);
}

// Testing the function with sample data should yield the expected results.
const test = {
  a: 1,
  b: 4,
  c: 6
};

const output_a = sanitize(test, 'a', 'b');

// This will generate a type error
output_a.c;
// No type error will occur here
output_a.a;

console.log(output_a);

It's important to note that even though generics are defined within the function, they don't need to be explicitly specified during invocation when the arguments provide enough context. Thus, the generics are implicitly inferred.

Check out my playground.

Answer 3

Answer №2

If you're looking to maximize code reuse, here's a TypeScript snippet that can help:

const allowed: Array<string> = ['key1', 'key3']
const body = {
  'key1': 1,
  'key2': 2,
  'key3': 3
}

function sanitizeBody (obj: Record<string, any>, allowed: Array<string>): Record<string, any> {
  const sanitizedObject: Record<string, any> = {};
  Object.keys(obj).forEach((el: string) => {
    if (allowed.includes(el)) {
      sanitizedObject[el] = obj[el];
    }
  })
  return sanitizedObject
}

const output = sanitizeBody(body, allowed)

The resulting output will be:

{
  "key1": 1,
  "key3": 3
}

Ensuring that you provide TypeScript with the correct types will allow it to work seamlessly as intended.

Answer 4

If you're looking to maximize code reuse, here's a TypeScript snippet that can help:

const allowed: Array<string> = ['key1', 'key3']
const body = {
  'key1': 1,
  'key2': 2,
  'key3': 3
}

function sanitizeBody (obj: Record<string, any>, allowed: Array<string>): Record<string, any> {
  const sanitizedObject: Record<string, any> = {};
  Object.keys(obj).forEach((el: string) => {
    if (allowed.includes(el)) {
      sanitizedObject[el] = obj[el];
    }
  })
  return sanitizedObject
}

const output = sanitizeBody(body, allowed)

The resulting output will be:

{
  "key1": 1,
  "key3": 3
}

Ensuring that you provide TypeScript with the correct types will allow it to work seamlessly as intended.

Answer 5

Answer №3

Understanding Index Signatures in TypeScript

When working with typescript, it is essential to grasp the concept of index signatures. These are used when the properties' names are unknown but we know the shape of their values. By providing an index signature, we can define the values and specify the type of index associated with them.

If typescript is unable to interpret the index signature for an object type like in your case, it becomes necessary to explicitly define it. Here is a common approach to defining the index signature:

type IndexSignature = {
  [key: string]: string; //in this example, the value is a string
}

Once you have defined the IndexSignature, adjustments need to be made within your codebase. Below is an example of how you can modify a function utilizing the IndexSignature:

sanitize function(obj: IndexSignature, ...allowed: string[]) {
    const sanitizedObject = {} as IndexSignature;
    Object.keys(obj).forEach((el: string) => {
      if (allowed.includes(el)) {
        sanitizedObject[el] = obj[el];
      }
    });
  }

Answer 6

Understanding Index Signatures in TypeScript

When working with typescript, it is essential to grasp the concept of index signatures. These are used when the properties' names are unknown but we know the shape of their values. By providing an index signature, we can define the values and specify the type of index associated with them.

If typescript is unable to interpret the index signature for an object type like in your case, it becomes necessary to explicitly define it. Here is a common approach to defining the index signature:

type IndexSignature = {
  [key: string]: string; //in this example, the value is a string
}

Once you have defined the IndexSignature, adjustments need to be made within your codebase. Below is an example of how you can modify a function utilizing the IndexSignature:

sanitize function(obj: IndexSignature, ...allowed: string[]) {
    const sanitizedObject = {} as IndexSignature;
    Object.keys(obj).forEach((el: string) => {
      if (allowed.includes(el)) {
        sanitizedObject[el] = obj[el];
      }
    });
  }

Ways to transfer specific properties from one object to another in TypeScript

Answer №1

Answer №2

Answer №3

Understanding Index Signatures in TypeScript

Similar questions

What steps should I take to ensure that this test covers all possible scenarios?

"Exploring the process of extracting data from a JSON URL using NextJS, TypeScript, and presenting the

Error: No 'map' property found in 'TwitterserviceService' type

Angular 8: How to Retrieve Query Parameters from Request URL

Having trouble accessing props on children in TypeScript while using React.Children.toArray?

Utilizing span elements to display error messages

The process of incorporating user properties into the output of a Service Bus topic from a Javascript Azure Function

Issue encountered in Typescript: callback functions are returning undefined value when called from a superclass

Steer clear of mentioning unbound methods, as they can lead to accidental scoping errors with 'this' when invoking static methods

Having trouble with the Angular Material component? The element 'mat-option' is not recognized

Creating a conditional class property requirement in TypeScriptAnother way to implement conditionally required class

Creating a map in Typescript initialized with a JSON object

I am having trouble with the Primeng password template suggestions not appearing as expected

Creating rectangular shapes on the canvas with the help of react hooks

Need help in NestJS with returning a buffer to a streamable file? I encountered an error stating that a string is not assignable to a buffer parameter. Can anyone provide guidance on resolving this issue?

The quantity of documents queried does not align with the number of data counts retrieved from Firestore

Having trouble with my Angular application, seems to be stuck at the loading screen. Not sure what's causing it, possibly

Angular version 8.2 combined with Firebase can result in errors such as those found in the `./src/app/app.module.ngfactory.js` file towards the end of the process when attempting to build with

React development: How to define functional components with props as an array but have them recognized as an object

Tips on implementing mongoose 'Query<any>' types