How can I selectively copy properties from one object to another in TypeScript

user_16294086 0
Viewed 385

I'm trying to selectively copy key-value pairs from one object to another, so I can selectively remove properties of an object, like so:

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

Basically, the point of the function is that it takes an object, i.e. req.body, and a list of strings, and performs this operation. For example, an example input may look like: sanitizeBody(req.body, 'role', 'active', 'status').

This worked in Javascript,however, in TypeScript I keep getting the error:

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 '{}'.

I'm not sure how to fix this.

typescript
3 Answers

Trying to reuse as much of your code, here is what would work in TS:

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)

Output:

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

If you provide ts the correct types, it should work as you expect.

user_50285320

Here is a solution that implicitly selects the keys you provide properly and maintains the typings with the output.

// We have to make sure that the object you provided extends a record whose keys
// are of type string, im pretty sure there is a better way to do that but the
// use of any sufficient.
function sanitize<T extends Record<string, any>, K extends keyof T>(obj: T, ...keys: Array<K>): Pick<T, K> {

  // we then apply your desired code as provided, its still the same as how you did
  // it, just a different approach
  return Object.entries(obj).reduce((a, [k, v]) => {

    // I had to cheat and use find because the includes function only accepts
    // string values but the way the argument is layed out makes it possible for
    // K to be boolean
    // if (keys.includes(k)) { type error here
    if (keys.find((a) => a === k)) {
      a[k as K] = v;
    }
    return a;
  }, {} as Pick<T, K>);
}

// So when we test it here we should get the desired output.
const test = {
  a: 1,
  b: 4,
  c: 6
};

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

// type error here
output_a.c;
// no type error here
output_a.a;

console.log(output_a);

Note that though there are generics defined in the function, you do not have to specify them when calling because your arguments imply the generic being used. Hence the generics are implicit.

Here is a link to my playground

user_77828820

Index signature in typescript

Typescript says that when we don't know the name of the properties but we do know the shape of the values then in that case we can provide an index signature to describe those values along with the type of index.

In your case, typescript doesn't understand the index signature of object type so you need to explicitly define the index signature for your object. Below is the idiomatic way to define it.

type IndexSignature = {
  [key: string]: string; //in your case value is string
}

Now, you have to do some changes as we have 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];
      }
    });
  }
user_138476900
Related