在Typescript中如何使用for...in详解

 更新时间:2022年03月15日 09:23:58   作者:最后的Hibana  
这篇文章主要给大家介绍了关于在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的文章就介绍到这了,更多相关Typescript中使用for...in内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS时间戳转换为常用时间格式的三种方式

    JS时间戳转换为常用时间格式的三种方式

    我们在开发中经常需要把时间戳转化成日期格式,下面这篇文章主要给大家介绍了关于JS时间戳转换为常用时间格式的三种主要方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • js页面引导页的实现思路总结

    js页面引导页的实现思路总结

    在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,本文主要介绍了js页面引导页的实现思路总结,感兴趣的可以了解一下
    2023-04-04
  • 小程序实现筛子抽奖

    小程序实现筛子抽奖

    这篇文章主要为大家详细介绍了小程序实现筛子抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 如何在JavaScript 中获取域名

    如何在JavaScript 中获取域名

    本文将讨论如何使用 JavaScript 事件和函数在网页执行期间以编程方式获取域名,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-06-06
  • JS实现的网页上的颜色拾色器

    JS实现的网页上的颜色拾色器

    这篇文章主要介绍了JS实现网页上的颜色拾色器,需要的朋友可以参考下
    2016-04-04
  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    JS实现利用闭包判断Dom元素和滚动条的方向示例

    这篇文章主要介绍了JS实现利用闭包判断Dom元素和滚动条的方向,涉及javascript闭包、事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
    2019-08-08
  • JS实现Fisheye效果动感放大菜单代码

    JS实现Fisheye效果动感放大菜单代码

    这篇文章主要介绍了JS实现Fisheye效果动感放大菜单代码,涉及JavaScript事假监听机制及定时函数等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • GoJs的文本绘图模板TextBlock使用实例

    GoJs的文本绘图模板TextBlock使用实例

    这篇文章主要为大家介绍了GoJs的文本绘图模板TextBlock使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • JS中数学计算精度问题的解决方案

    JS中数学计算精度问题的解决方案

    这篇文章主要给大家介绍了JS中数学计算精度问题的解决方案,文中通过代码示例和图文结合给大家讲解非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • window resize和scroll事件的基本优化思路

    window resize和scroll事件的基本优化思路

    在项目中使用scroll事件去加载数据,结果IE下悲剧了。下面为大家介绍下window resize和scroll事件的基本优化思路,需要的朋友可以参考下
    2014-04-04

最新评论