How to use for...in in Typescript

How to use for...in in Typescript? I have some problems using for...in in TS and have also come up with some solutions. Then let’s take a look at the following error code.

interface ABC {
    a: string
    b: string
}
const x: ABC = {
    a:'1',
    b:'2'
}
const y: ABC = {
    a:'3',
    b:'4'
}
for (const key in x) {
// The index signature with the parameter of type "string" cannot be found on type "ABC".  ts(7053)    x[key] = y[key]
}

This is because when the for...in loop, the inherited attributes will also be traversed, so the type of key cannot be judged, it can only be a string type. If you use the Object's hasOwnProperty method, it is useless. TS still thinks that the key is a string type. At this time, you need to encapsulate the hasOwnProperty method yourself.

function hasOwnProperty<T, K extends PropertyKey>(
    obj: T,
    prop: K
): obj is T & Record<K, unknown> {
    return (obj, prop);
}
for (const key in x) { 
    if (hasOwnProperty(y,key) && hasOwnProperty(x,key)) {
        x[key] = y[key]
        //You can see let x: ABC & Record<string, unknown>        //The type of x has changed    } 
}

That's fine, it's really troublesome. I'm just traversing a simple object, why do I have to make it so troublesome? Of course, there is still a simple way. Just write this way when looping.

let key:keyof ABC
for (key in x) {
    x[key] = y[key]
}

Isn't it very simple? However, when I changed the type A of the interface ABC to number, ts reported an error again.

//The type "string | number" cannot be assigned to type "never".//Cannot type“string”Assign to type“never”。ts(2322)

WTF, why has the x[key] type become never? Because when assigning, x[key] has two types of possibilities, and it is never possible to assign two types of them, so is it never? (Personal guess). If you use the previous method, you will also report the same error. Since never is the lowest type in TS, never can only be assigned to another never type, so x[key] cannot be assigned. What should I do? There is no way, I can only use the last method!

let key:keyof ABC
//@ts-ignore
for (key in x) {
    x[key] = y[key]
}

Supplement: Solution to the problem of using for...in to traverse object properties in TypeScript.

Recently, there was a react project written in ts. When using for...in to traverse object properties, it reported an error, similar to the following:
Solution: Add the commented line of code below to the file, that is, suppress implicit index errors and set it to true

"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    // "suppressImplicitAnyIndexErrors": true,
    "importHelpers": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "sourceMap": true,
    "baseUrl": "./",
    "strict": true,
    "paths": {
      "@/*": ["src/*"],
      "@@/*": ["src/.umi/*"]
    },
    "allowSyntheticDefaultImports": true
  },

Summarize

This is the end of this article about how to use for...in in Typescript. For more related contents of using for...in in Typescript, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!