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

Utilize only the necessary components from firebase-admin in Cloud Functions with Typescript

Issue: Execution terminated with error code 1: ts-node --compiler-params {"module":"CommonJS"} prisma/seed.ts

When the first argument is missing, using a recursive constraint default can result in the incorrect inference of the second argument, especially when both arguments share the same generic

Discover the process of implementing nested service calls in Angular 2 by utilizing observables

Enhancing the default functionality of React.FC within Next.js

What are the guidelines for utilizing square brackets [ ] in directives like @Inputs?

Create a Referral Program page within a swapping interface similar to the functionalities found in platforms like PancakeSwap, PantherSwap, and

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

Compile a roster of service providers specializing in unit testing imports

Allowing cross-origin resource sharing (CORS) in .NET Core Web API and Angular 6

Tips for isolating data on the current page:

Using optional chaining on the left side in JavaScript is a convenient feature

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

Preserve the checkbox state upon refreshing the page

What is the correct way to handle the return value of an useAsyncData function in Nuxt 3?

Icon for closing Mui Snackbar

SonarQube alerting you to "Eliminate this unnecessary casting"

Is there a method to improve type inference in vscode?

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

What is the best way to retrieve a property value from an object using the .find() method?