How to loop over an object and assign values with for in loop in TypeScript?

Question

I would like to combine two objects in TypeScript and include only the keys that exist in the first object

Below are my code.

type User = {
  username: string
  passcode: number;
}

const userA: User = {
  username: 'A',
  passcode: 1234
}

const updateValues = {
  username: 'B',
  unexpectedKey: "I shouldn't be here. But I exsits in users' post request"
}

// Update userA
for (const key in updateValues) {
  if (key in userA) {
    // We know that `key` has the type `keyof User` now
    userA[key] = updateValues[key]
  }
}

But TypeScript reports the following errors.

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

How can I fix these errors with type assertion?

Coffee bean · Accepted Answer · 2021-05-31 12:57:52Z

3

You need to declare an Index Signature on your type User.

You can read in more detail here: Index Signatures

type User = {
  [username:string] : string | number;
  passcode: number;
}

type UserUpdated = {
  [username:string] : string;
  unexpectedKey: string;
}

const userA: User = {
  username: 'A',
  passcode: 1234
}

const updateValues: UserUpdated = {
  username: 'B',
  unexpectedKey: "I shouldn't be here. But I exsits in users' post request"
}

// Update userA
for (const key in updateValues) {
  if (key in userA) {
    // We know that `key` has the type `keyof User` now
    userA[key] = updateValues[key]
  }
}

answered May 31, 2021 at 12:57

Coffee bean

1,51415 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to loop over an object and assign values with for in loop in TypeScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related