TypeScript遍历对象属性的问题

目录
  • 一、问题　
  • 二、解决办法
    • 1. 把对象声明as any
    • 2. 给对象声明一个接口
    • 3. 使用泛型
    • 4. 使用keyof

一、问题　

　比如下面的代码：

type Animal = {
    name: string;
    age: number
}

const animal:Animal={
    name:"dog",
    age:12
}

function test(obj:Animal) {
    for (let k in obj) {
        console.log(obj[k])。//这里出错
    }
}
test(animal)

报错：

二、解决办法

1. 把对象声明as any

function test(obj:Animal) {
    for (let k in obj) {
        console.log((obj as any)[k]) //不报错
    }
}

　　这个方法直接绕过了typescript的校验机制

2. 给对象声明一个接口

type Animal = {
    name: string;
    age: number;
    [key: string]: any
}

const animal:Animal={
    name:"dog",
    age:12
}

function test(obj:Animal) {
    for (let k in obj) {
        console.log(obj [k]) //不报错
    }
}
test(animal)

　　这个可以针对比较常见的对象类型，特别是一些工具方法。

3. 使用泛型

function test<T extends object>(obj:T) {
    for (let k in obj) {
        console.log(obj [k]) //不报错
    }
}

4. 使用keyof

function test(obj:Animal) {
    let k: (keyof Animal);
    for (k in obj) {
        console.log(obj [k]) //不报错
    }
}

到此这篇关于TypeScript遍历对象属性的问题的文章就介绍到这了,更多相关TypeScript遍历对象属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • typescript+react实现移动端和PC端简单拖拽效果

    本文实例为大家分享了typescript+react实现移动端和PC端简单拖拽效果的具体代码,供大家参考,具体内容如下 一.移动端 1.tsx代码 import { Component } from "react"; import './Tab.less' interface Props { } interface user { id: string, text: string } interface content { id: string, text: string } inter

  • TypeScript中条件类型精读与实践记录

    目录 在泛型类型中使用条件类型 工具类型 逃离舱 在箭头函数中使用条件类型 结合类型推导使用条件类型 使用条件类型来判断两个类型完全相等 总结 在大多数程序中,我们必须根据输入做出决策.TypeScript 也不例外,使用条件类型可以描述输入类型与输出类型之间的关系. 用于条件判断时的 extends 当 extends 用于表示条件判断时,可以总结出以下规律 若位于 extends 两侧的类型相同,则 extends 在语义上可理解为 ===,可以参考如下例子: type result1 =

  • TypeScript枚举的基础知识及实例

    目录 前言 TypeScript 中的枚举是什么 在 TypeScript 中使用枚举需要注意什么 常见枚举的类型 枚举反向映射 计算枚举 总结 前言 枚举是受 TypeScript 支持的数据类型.枚举允许您定义一组命名常量.使用它们可以更轻松地记录意图或创建一组不同的案例.枚举大多数用于面向对象的编程语言(如 Java 和 C#)中,现在也可以 TypeScript 中使用.它们是 TypeScript 的少数功能之一,它不是 JavaScript 的类型级扩展.接下来我将要演示 TypeS

  • TypeScript遍历对象属性的问题

    TypeScript遍历对象属性的问题

    目录 一.问题 二.解决办法 1. 把对象声明as any 2. 给对象声明一个接口 3. 使用泛型 4. 使用keyof 一.问题 比如下面的代码: type Animal = { name: string; age: number } const animal:Animal={ name:"dog", age:12 } function test(obj:Animal) { for (let k in obj) { console.log(obj[k]).//这里出错 } } te

  • JS遍历对象属性的方法示例

    本文实例讲述了JS遍历对象属性的方法.分享给大家供大家参考,具体如下: 遍历JavaScript某个对象所有的属性名称和值的方法,这样想使用方法的时候非常的直观和方便.代码如下: /* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 * author: Jet Mah */ function allPrpos ( obj ) { // 用来保存所有的属性名称和值 var props = "" ; // 开始遍历 for ( var p in obj ){ // 方法

  • PHP var_dump遍历对象属性的函数与应用代码

    本文章下面我们要为你提供二种关于遍历对象属性方法,并且举例说明遍历对象属性在php中的应用.可以看出私有变量与静态变量时获取不到的,只有定义为公共变量才可以读出来. 遍历对象属性第一种方法: 复制代码 代码如下: <?php class foo { private $a; public $b = 1; public $c; private $d; static $e; public function test() { var_dump(get_object_vars($this)); } } $

  • JS中轻松遍历对象属性的几种方式

    目录 1.自身可枚举属性 2.Object.values() 返回属性值 3.Object.entries() 4.对象属性的顺序 1.自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 .如果对象的键-值都不可枚举,那么将返回由键组成的数组. 这是合理的,因为大多数时候只需要关注对象自身的属性. 来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回

  • JS中如何轻松遍历对象属性的方式总结

    自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 .如果对象的键-值都不可枚举,那么将返回由键组成的数组. 这是合理的,因为大多数时候只需要关注对象自身的属性. 来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键: let simpleColors = { colorA: 'white', colorB: 'black' }; let

  • 关于JavaScript对象的动态选择及遍历对象

    (一)动态选择方法及属性 在实际工作中,我们经常会遇到这种情况:根据某个条件来调用两个方法[1]中的一个,或是在两个属性[2]中的一个上面进行读写操作.下面的代码展示了这种情形: 复制代码 代码如下: if (condition) { myObj.method1(someArg); } else { myObj.method2(someArg); } JavaScript提供了一种简单的语法,即使用方括号操作符([])来动态地选择方法和属性.正如下面的代码所示,JavaScript有两种等价的成

  • PHP获取对象属性的三种方法实例分析

    本文实例讲述了PHP获取对象属性的三种方法.分享给大家供大家参考,具体如下: 今天查看yii源码,发现yii\base\Model中的attribute()方法是通过反射获取对象的public non-static属性.记得以前看到的代码都是用get_object_vars()这个函数获取的,昨天查看php文档,发现还可以用foreach遍历对象属性.于是写个例子练习下. class TestClass { private $a; protected $b; public $c; public

  • vue中的循环遍历对象、数组和字符串

    目录 vue循环遍历对象.数组和字符串 1.循环遍历对象 2.循环遍历数组 3.循环遍历字符串 vue循环遍历,指令v-for 1.循环遍历 2.v-for遍历数组 3.v-for遍历对象 4.v-for使用中添加key vue循环遍历对象.数组和字符串 1.循环遍历对象 1.1vue 在html里面循环遍历对象 v-for=" (val, key , i) in dimItemMap" :key="key" val-每一项 key -key值 i-第几个 <

  • javascript遍历json对象的key和任意js对象属性实例

    javascript遍历json对象的key和任意js对象属性实例

    使用 keys 方法获取该对象的属性和方法: function Pasta(grain, width, shape) { this.grain = grain; this.width = width; this.shape = shape; this.toString = function () { return (this.grain + ", " + this.width + ", " + this.shape); } } var spaghetti = new

  • JS遍历页面所有对象属性及实现方法

    for...in循环的Javascript示例: <html> <head> <title>一个使用到for...in循环的Javascript示例</title> </head> <body> <script type="text/javascript"> // 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent. var myObject =

随机推荐