declare key type of for in loop in typescript

Question

I have below code

const urlParams = new URLSearchParams(window.location.search);

interface PersonType {
    fname: string
    lname: string
}
const person: PersonType = {fname:"John", lname:"Doe"};

const newObj = {
    newobj: "new value"
}

for(const key in person) {
    urlParams.append(key, newObj[key]); //error
}

https://codesandbox.io/s/vanilla-ts?utm_source=dotnew&file=/src/index.ts:0-500

how should I declare's key string in the for in loop?

Answer 1

In TypeScript, for..in will only type the key being iterated over as a string - not as a key of the object being iterated over. Since key is typed as a string, not as newobj , you can't use newObj[key] , because the generic string doesn't exist on the type.

Use Object.entries instead, to extract the key and the value at once, rather than trying to go through the key alone:

for(const [key, val] of Object.entries(newObj) {
    urlParams.append(key, val);
}

Answer 2

const urlParams = new URLSearchParams(window.location.search);

interface PersonType {
    fname: string
    lname: string
}
const person: PersonType = {fname:"John", lname:"Doe"};

const newObj = {
    newobj: "new value"
}

for(const key in person) {
    urlParams.append(key, newObj[key as keyof PersonType]); 
}

in newObj[key] add as keyof PersonType