Destructuring a TypeScript Object

Question

I'm trying to desctructure an object into another object, I mean taking sub-set of properties from Object A to Object B. I'm doing it like this:

  const User = new UserImpl();
        User.email = user.email;
        User.name = user.name;
        User.family_name = user.familyName;
        User.password = 'Test!';
        User.verify_email = true;
        User.email_verified = false;
        User.blocked = false;
  const {
            email,
            name,
            family_name,
            password,
            verify_email,
            email_verified,
            blocked,
            connection
        } = User;
  const res_user = {
            email,
            name,
            family_name,
            password,
            verify_email,
            email_verified,
            blocked,
            connection
        };
        return res_user;

but, is there a way to do it using Object.assign() ? or using arrow => function instead of having two variables or doing it in two steps?

Thanks

You might be able to use Object.assign() or object literal spread, but this code isn't really a minimal reproducible example so it's hard to know what would meet your needs. If you're really only copying a subset of properties, can you make your example show this? It will be helpful if your code can be dropped into any IDE and show your issue. As it stands, you haven't defined UserImpl or user. — jcalz
– jcalz, Commented Jun 21, 2019 at 15:40
const objA = {...commonPart, foo: 'bar'} and const objB = {...commonPart, bim: 'bam'}? — Phil
– Phil, Commented Jun 21, 2019 at 15:44

jcalz · Accepted Answer · 2019-06-21 15:57:11Z

If I were shallow-copying a list of properties I'd probably define a pick() function using the Pick type:

const pick = <T, K extends keyof T>(obj: T, ...keys: K[]) =>
  keys.reduce((acc, k) => ((acc[k] = obj[k]), acc), {} as Pick<T, K>);

And then assuming you have the following interface and object

interface User {
  email: string;
  name: string;
  familyName: string;
  password: string;
  verifyEmail: boolean;
  emailVerfified: boolean;
  blocked: boolean;
}

const u: User = {
  email: "[email protected]",
  name: "Larry",
  familyName: "User",
  password: "th3b1gg3stLUSER",
  verifyEmail: true,
  emailVerfified: false,
  blocked: false
};

console.log(u); // everything

You could copy just the properties you care about to a new object like this:

const v = pick(u, "name", "familyName", "email");
// const v: Pick<User, "name" | "familyName" | "email">
// const v: {name: string, familyName: string, email: string}

console.log(v); // just name, familyName, email
// {name: "Larry", familyName: "User", email: "[email protected]"}

Hope that helps; good luck!

Link to code

p.s.w.g · Accepted Answer · 2019-06-21 15:46:34Z

2

If there are only a few properties that you want to copy, you could always get rid of the destructuring and just do:

  const res_user = {
    email: User.email,
    name: User.name,
    family_name: User.family_name,
    password: User.password,
    verify_email: User.verify_email,
    email_verified: User.email_verified,
    blocked: User.blocked,
    connection: User.connection,
  };
  return res_user;

This code is shorter than destructuring the User object just to restructure it later.

Alternatively, if there are only a few properties that you want to remove (and assuming you know there are no other properties) you could use a rest/spread parameter:

const {
   some_prop_i_dont_care_about,
   some_other_prop,
   ...res_user
} = User;
return res_user;

This will create a new object that contains every property except those explicitly listed above it, and assign that object to the variable res_user.

answered Jun 21, 2019 at 15:46

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

2 Comments

basel.ai Over a year ago

This code didn't work, it takes all the properties because of using ...res_user part. const { some_prop_i_dont_care_about, some_other_prop, ...res_user } = User; return res_user;

p.s.w.g Over a year ago

@basel.ai "This code didn't work" Could be more specific? What's the error? If you're trying to cast res_user to a specific type, I'd have to know what's the actual type of UserImpl and the desired return type from this function. And like I said, the second solution will only work if there are no other unknown properties on User. If UserImpl is something like { [k: string]: any } there's no way to ensure type safety of res_user.

Collectives™ on Stack Overflow

Destructuring a TypeScript Object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related