typescript 过滤掉对象和数组中的嵌套值并返回完整的对象类型

qzlgjiam  于 2022-12-27  发布在  TypeScript
关注(0)|答案(1)|浏览(174)

我的数据看起来像是IconItems类型的:

{
  title: "Category title",
  description: "Example description",
  lists: [
    {
      id: "popular",
      title: "Popular",
      items: [
        {
          id: 1,
          title: "title",
          provider: "provider",
          image: ""
        },
      ....
      ]
    },
    {
      id: "new",
      title: "New",
      items: [
        {
          id: 4,
          title: "studioss2",
          provider: "provider",
          image: ""
        },
       ....
      ]
    }

我想根据字符串值过滤嵌套项(类型为IconItem,单数形式)数组。
为此,我定义了这两个值:

const filterKeyOpt: Array<keyof IconItem> = ["title", "provider", "image"];
const searchQuery = 'sTudioSS'

我试着过滤掉数据

const logData = () => {
     let filteredData = data?.lists.map((item) => item.items.filter((i) => {
      return filterKeyOpt.some((key) => i[key].toString().toLowerCase().includes(searchQuery.toLowerCase()))
    } /// returns  IconItem[][] | undefined but I want to return type IIconItems | undefined
    ))
console.log(filteredData)
}

但输出的类型为

IconItem[][]

但是我想要完整的东西/类型。也就是说,过滤掉一个嵌套的值,给予一个数据对象的副本,带有匹配的属性。怎么做?
Playground链接:https://www.typescriptlang.org/play?ssl=69&ssc=32&pln=69&pc=20#code/MYewdgzgLgBAJgQyggXASTaMaoFMC2EMAvDAN4BQMMUAllADa4owBEAwkrgOYgBOATxr0mrADRV4uCMD60ADnXAtWAUQAeCfPKZSZcxbXDjJDWtAgsA2pOqVqDmLTgr5IeQFcGCPicfU6RmY2AAV3Lx8-f3oCSxgbfwd7RIdnFgBGCRSHQKYVXNwo7Pk+EAA3Z1w+V1KKuCqilNp8BG5g1lZbfwBfLJTk7LSYACY+7IL8kVxhxsSS8srqtmgPOCMIDdnolraVTuzuruoAXS7eroHUlzYwXAB3LYm2ADl7rZjCayOk78chgBYxiknqwCv8to55nUqjUFvVfEDEs1Wu19ilztlLkjrqNfjkppMggBWCEOKGLFQIvHUZG7NhoxKHRKnRxMmCnboAbgoFFoYDwfAAZghgLgYBgsDhYuRJE9oHIwNxudR6voFEowCx5XylaZzFA4hLwFL8FZjtzDrz+VVhaLxZhjXh8DKaddtYrlcIglqoArdTSnYbJU6zRaeXyBbaxQ7sE6XU5rmAPPgAEZVT1y306z3k+E+v2e2nBd26y1YaAwQW0BgCgDSuAEAHlFCwAIJ8PgIAQAHgA1g2QILxcGCAA+EjxUFTcRsXMNMRsIusc0UcuwCC4HzAAAWAEUPFUhKQAOQQAAqqyMAGUr8eeWuYAwQNwACJIBATgAUAEoSOOsUwsBVjWVS4HAb7IBOiDIAA-AAdGYFhwS08ifp+Hy-sQ44fHBHwQHBwECmhtCYf+3x8LgUAeHwYCVtWdYNs2UBwRAID4LgaH9gIpFOFYXHHHBUAgFeWaKj+gkgAAMiAdxVJwG7iXywAMKs0ifhuW57geggSdJsl8PJHHfsZZwwAA9BZMAUVRNFEMOjoEGaZowAAPjAHhgPUVa3HAMAph4sBoDAdwIPyNAgFZlHUbRUACPI0YxiaRBuR5Xl8mBXQmeWIBMAhz6foRoHge+34UJaT6vu+P7ckAA

u3r8eeie

u3r8eeie1#

Playground

const logData = () => {
  let a: typeof data = {
    ...data,
    lists: data.lists.map(list => {
      //                  ^?
      return { // only matching items
        ...list,
        items: list.items.filter(item => {
          //                     ^?
          filterKeyOpt.some((key) => item[key].toString().toLowerCase().includes(searchQuery.toLowerCase()))
        })
      }
    }).filter(list => {
      // only non-empty lists
      return list.items.length
    })
  }
  return a.lists.length ? a : undefined;
}

相关问题