在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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何在TypeScript中正确的遍历一个对象

    目录 JavaScript TypeScript for...in Object.keys Object.entries 思考 总结 JavaScript 在讲解用 Ts 遍历一个对象之前, 我们先说说 在 Js 中怎么实现, for...in.Object.keys, 一个简单的例子: // for...in const obj = { name: 'itsuki', address: 'hangzhou', }; for (const key in obj) { console.log(ke

  • TypeScript中的函数和类你了解吗

    TypeScript中的函数和类你了解吗

    目录 函数 作为参数 定义函数 函数参数的类型 可选类型 参数默认值 剩余参数 this的默认推导 函数重载 类 初始化 继承 多态 成员修饰符 总结 函数 以下声明了一个函数类型,通过type来定义类型别名,void 表示没有返回值 type fnType = () => void; 作为参数 函数可以作为参数,传递到另一个函数中 type fnType = () => void; function foo(fn: fnType) { fn(); } function bar() { con

  • typeScript 核心基础之接口interface

    目录 1.接口定义 2.接口继承 3.类实现接口 前言: 在面向对象语言中,接口是一个很重要的概念,它是对行为的抽象.接口也叫 interface . 在 js 中没有接口这个概念,它是新增的.该如何定义呢?下面来一起学习吧 1.接口定义 接口的作用: 在面向对象编程中,接口是一种规范的定义,它定义了行为和动作规范: 在程序设计内,接口起到一种限制和规范的作用: 接口一般使用 interface 关键字来定义,名字首字母需要大写.在项目中定义接口的时候,一般在名字前加一个大写 I 字母,能够快速

  • TypeScript中的接口和泛型你了解吗

    TypeScript中的接口和泛型你了解吗

    目录 接口 对象类型 索引类型 函数类型 继承 交叉类型 接口实现 interface和type的区别 字面量赋值 枚举类型 泛型 泛型函数 泛型接口 泛型类 类型约束 总结 接口 使用 interface 关键字来定义数据类型 对象类型 当存在于较长的数据类型约束时,我们可以通过 type 关键字 为类型注解起别名,也可以通过接口来定义 type UserType = { name: string; age?: number }; const user: UserType = { name:

  • TypeScript与JavaScript项目里引入MD5校验和

    TypeScript与JavaScript项目里引入MD5校验和

    目录 一.什么是MD5校验和? 二.MD5校验和的优点和漏洞 三.如何在TS项目里引入MD5校验和? 四.MD5校验的使用 五.另一个npm依赖包的使用方法 一.什么是MD5校验和? MD5,是Message Digest Algorithm 5的缩写,即消息摘要算法版本5. 消息摘要算法通过对所有数据提取指纹信息以实现数据签名.数据完整性校验等功能,由于其不可逆性,有时候会被用做敏感信息的加密.消息摘要算法也被称为哈希(Hash)算法或散列算法.任何消息经过散列函数处理后,都会获得唯一的散列值

  • typeScript 泛型使用和泛型接口结合

    typeScript 泛型使用和泛型接口结合

    目录 1.泛型是啥? 2.泛型类型 3.泛型接口 4.泛型类 5.泛型约束 6.泛型参数默认类型 7.泛型条件类型 typeScript 中新增的泛型概念.泛型使用.泛型与接口结合: 在实际应用中可能会遇到求最小值的问题,比如求数组中的最小值. 在 ts 中的就需要写两种方式,一种针对 number,另外一种针对字符串. 这样写不利于代码重用,项目较大时,性能较差,同时工作效率也低,所以在 ts 中引入了泛型概念. function getMin1(arr:number[]):number {

  • TypeScript里string和String的区别

    TypeScript里string和String的区别

    目录 背景 1.原生string 2.对象String 3.代码对比 4.为什么需要String对象 4.两者区别总结 摘要:通常来说,string表示原生类型,而String表示对象. 背景 与JavaScript语言不同的是,TypeScript使用的是静态类型,比如说它指定了变量可以保存的数据类型.如下图所示,如果在JS中,指定变量可以保存的数据类型,会报错:“类型注释只可以在TS文件中被使用”: TypeScript是JavaScript的超集(superset),TypeScript需

  • 在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" 的参数

  • TypeScript顺时针打印矩阵实现实例详解

    TypeScript顺时针打印矩阵实现实例详解

    目录 前言 梳理思路 实现代码 示例代码 前言 有一个矩阵,如何按照从外向里以顺时针的顺序依次打印出每一个元素?本文将跟大家分享下这个算法,欢迎各位感兴趣的开发者阅读本文. 梳理思路 当我们遇到一个复杂的问题时,可以通过举例将它画出来,这样就可以更直观的发现规律.那么我们就先构造一个矩阵出来,如下所示: const matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16] ]; 顺时针访问一个矩阵,那么它的访

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • 基于python中的TCP及UDP(详解)

    基于python中的TCP及UDP(详解)

    python中是通过套接字即socket来实现UDP及TCP通信的.有两种套接字面向连接的及无连接的,也就是TCP套接字及UDP套接字. TCP通信模型 创建TCP服务器 伪代码: ss = socket() # 创建服务器套接字 ss.bind() # 套接字与地址绑定 ss.listen() # 监听连接 inf_loop: # 服务器无限循环 cs = ss.accept() # 接受客户端连接 comm_loop: # 通信循环 cs.recv()/cs.send() # 对话(接收/发

  • Oracle中游标Cursor基本用法详解

    查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的 返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL

  • JDBC中resutset接口操作实例详解

    本文主要向大家展示JDBC接口中resutset接口的用法实例,下面我们看看具体内容. 1. ResultSet细节1 功能:封锁结果集数据 操作:如何获得(取出)结果 package com.sjx.a; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import org.junit.Test; //1. next方

  • AngularJS中filter的使用实例详解

    AngularJS中filter的使用实例详解

    AngularJS中filter的使用实例详解 一.格式化数字为货币格式. <div>{{money|currency:"$"}}</div> <div>{{money|currency:"RMB"}}</div> script: app.controller("crl", function($scope, $filter) { $scope.money="4545"; });

  • python中模块的__all__属性详解

    python模块中的__all__属性,可用于模块导入时限制,如: from module import * 此时被导入模块若定义了__all__属性,则只有__all__内指定的属性.方法.类可被导入. 若没定义,则导入模块内的所有公有属性,方法和类 # kk.py class A(): def __init__(self,name,age): self.name=name self.age=age class B(): def __init__(self,name,id): self.nam

  • python编程之requests在网络请求中添加cookies参数方法详解

    哎,好久没有学习爬虫了,现在想要重新拾起来.发现之前学习爬虫有些粗糙,竟然连requests中添加cookies都没有掌握,惭愧.废话不宜多,直接上内容. 我们平时使用requests获取网络内容很简单,几行代码搞定了,例如: import requests res=requests.get("https://cloud.flyme.cn/browser/index.jsp") print res.content 你没有看错,真的只有三行代码.但是简单归简单,问题还是不少的. 首先,这

  • PHP 中魔术常量的实例详解

    PHP 中魔术常量的实例详解 本文介绍下,php编程中的魔术常量,掌握并灵活应用这些方法与常量,对于提高php的编程水平,有很大的帮助.有需要的朋友参考学习下. 魔术常量: namespace ns1; class Test { function __construct() { var_dump(__LINE__); var_dump(__FILE__); var_dump(__DIR__); var_dump(__FUNCTION__); var_dump(__CLASS__); var_du

随机推荐