打字稿中的forEach函数答案

【问题标题】：forEach function in typescript打字稿中的forEach函数
【发布时间】：2020-09-30 11:24:44
【问题描述】：

我正在使用 graphql 返回的数据，如下所示：

"userRelations": [
    {
      "relatedUser": {
        "id": 4,
        "firstName": "Jack",
        "lastName": "Miller"
      },
      "type": "FRIEND"
    },
    {
      "relatedUser": {
        "id": 3,
        "firstName": "Rhena",
        "lastName": "Tahoma"
      },
      "type": "CONTACT"
    }
  ]

我必须将所有带有type: "FRIENDS" 的项目分开。我这样做了，而且效果很好：

    var friendArray = new Array();
    for (let i in data.users.nodes[0].userRelations) { 
    if (data.users.nodes[0].userRelations[i].type == "FRIEND")
    {
        friendArray.push(data.users.nodes[0].userRelations[i]);
    }
  }

但是，我读到使用 for 循环和 for in 并不是一个好主意。有没有其他方法可以在没有 for 循环的情况下迭代和检查所有对象？我尝试使用它，但它没有给出正确的结果：

data.users.nodes[0].userRelations.forEach((object: Object)=> {
    if (data.users.nodes[0].userRelations.type == "FRIEND")
    {
        friendArray.push(data.users.nodes[0].userRelations.object);
    }
})

friendsArray 保持为空。我错过了什么？

编辑：过滤好友数据后，我想通过映射来渲染一些项目。我试图做这样的事情：

data.users.nodes[0].userRelations.map()

data.users.nodes[0].userRelations.filter(({ type }) => type === 'FRIEND').map(/*code*/)

但这给了我一个错误：

Binding element 'type' implicitly has an 'any' type.ts(7031)

【问题讨论】：

看看array.filter()，可以const friends = data.users.nodes[0].userRelations.filter(userRelation => userRelation.type === 'FRIEND")
这能回答你的问题吗？ For-each over an array in JavaScript

标签： javascript reactjs typescript react-native foreach

【解决方案1】：

在你的情况下，我会使用filter:

var result = data.users.nodes[0].userRelations.filter(element=>element.type=="FRIEND");

【讨论】：

这给了我打字稿中的This condition will always return 'false' since the types 'boolean' and 'string' have no overlap.ts(2367)。
你打错了 => 而不是 ->
不过，这给了我Parameter 'element' implicitly has an 'any' type.如果我从使用情况推断参数，它会更改为element: { type: string; }。原来，类型是我自己定义的UserRelation。但是，这也不起作用。
((element: { type: UserRelation; }) => element.type=="FRIEND");给我的错误与我的第一条评论相同
var result = data.users.nodes[0].userRelations.filter((element: UserRelation)=>element.type==="FRIEND"); 呢？

【解决方案2】：

data.users.nodes[0].userRelations.forEach((o: Object)=> {
    if (o.type == "FRIEND")
    {
        friendArray.push(o);
    }
})

【讨论】：

【解决方案3】：

首先，使用 for 循环就可以了。

如果你想使用 foreach，你需要使用你在 forEach 回调中创建的对象元素。这就是使用 foreach 的好处。

data.users.nodes[0].userRelations.forEach((object: Object)=> {
    if (object.type == "FRIEND")
    {
        friendArray.push(object);
    }
})

如果你想改进功能，你可能想使用.filter，这可能是解决这个问题的最干净的方法。

【讨论】：

【解决方案4】：

看看array.filter()，你可以做const friends = data.users.nodes[0].userRelations.filter(userRelation => userRelation.type === 'FRIEND")，但是对于你当前的代码，你可以把你的if语句改成-if(object.type==='FRIEND')

【讨论】：

在 TS 中不起作用，即使我定义了 userRelation 的类型