Typescript中怎样用for...in 报错问题怎样处理

这篇文章主要介绍“Typescript中怎样用for...in，报错问题怎样解决”，有一些人在Typescript中怎样用for...in，报错问题怎样解决的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

如何在Typescript中使用for...in ？本人在TS中用for...in出现了些问题，也想到了一些解决方法。那么先来看看下面报错的代码吧。

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) {

// 在类型 "ABC" 上找不到具有类型为 "string" 的参数的索引签名。ts(7053)

x[key] = y[key]

}

这由于在for...in循环时，也会遍历继承的属性，所以不能判断key的类型，只能是string类型。如果用Object的hasOwnProperty方法呢，然而并没有用，TS还是认为key是string类型。这时候需要自己封装一下hasOwnProperty方法。

function hasOwnProperty<T, K extends PropertyKey>(

obj: T,

prop: K

): obj is T & Record<K, unknown> {

return Object.prototype.hasOwnProperty.call(obj, prop);

}

for (const key in x) {

if (hasOwnProperty(y,key) && hasOwnProperty(x,key)) {

x[key] = y[key]

//可以看到let x: ABC & Record<string, unknown>

//x的类型变异了

}

}

这样就好了,这可也实在是太麻烦了。我只是遍历一个简单对象，为何要搞得这么麻烦，当然还是有简单方法的。只要循环的时候这样写就好了。

let key:keyof ABC

for (key in x) {

x[key] = y[key]

}

是不是很简单，然而当我把接口ABC的a类型改成number的时候，ts又报错了。

//不能将类型“string | number”分配给类型“never”。

//不能将类型“string”分配给类型“never”。ts(2322)

WTF，为啥x[key]类型变成never了？因为在赋值的时候，x[key]有两种类型的可能，永远不可能赋值它两个类型，所以是never？（个人猜想）。如果用之前那种方法也是报一样的错误。由于never是TS中最底层的类型，never 仅能被赋值给另外一个 never 类型，所以x[key]不能被赋值了。 这可怎么办呢，没办法了，只能使用最后的方法了！

let key:keyof ABC

//@ts-ignore

for (key in x) {

x[key] = y[key]

}

补充：TypeScript中使用for...in遍历对象属性会报错的解决办法

最近有一个用ts写的react项目，在里面使用for…in遍历对象属性时报了个错，类似下面这种：

解决办法：在 tsconfig.json 文件中加入下面被注释掉的那一行代码，即把 抑制隐式索引错误 置为真

"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

},

“Typescript中怎样用for...in，报错问题怎样解决”的内容就介绍到这里了，感谢大家的阅读。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!