likes
comments
collection
share

如何在Typescript中使用for...in ?

作者站长头像
站长
· 阅读数 99

如何在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类型。如果用ObjecthasOwnProperty方法呢,然而并没有用,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]
}

大功告成~(如果有大佬知道应该怎么解决或者本人哪里理解有问题请在下方留言,谢谢)

转载自:https://juejin.cn/post/7074483753472491533
评论
请登录