文章/答案/技术大牛

发布

社区首页 >问答首页 >如何正确使用带有map([key，value])和TypeScript的Object.entries

问如何正确使用带有map([key，value])和TypeScript的Object.entries
EN

Stack Overflow用户

提问于 2021-10-30 22:53:04

回答 2查看 116关注 0票数 1

我正在学习TypeScript的React，我需要将我的响应数据转换为一个对象。

我写的代码不需要typescript就能工作。你能告诉我怎么做才能保证类型安全吗？

从响应中，我收到以下数据：

 {
        "-MnI78G4UBVNSdurDCQK": {
            "amount": 1,
            "id": 1,
            "image": {
                "url": "https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone-13-pro-family-hero?wid=940&hei=1112&fmt=png-alpha&.v=1631220221000"
            },
            "name": "iPhone 13 Pro",
            "price": 5299
        },
      

  "-MnI78IKVgJnmF_8XTZ6": {
        "amount": 2,
        "id": 2,
        "image": {
            "url": "https://cdn.x-kom.pl/i/setup/images/prod/big/product-new-big,,2019/7/pr_2019_7_17_13_43_4_952_00.jpg"
        },
        "name": "Macbook Air M1 16gb 512gb",
        "price": 7999
    }
}

通过使用object.entries，我可以像这样转换数据：

const transformedData = Object.entries(data).map(([key, value]) => {
      return {
        ...value,
        id: key,
      };
    });

它可以工作，但没有类型安全。

typescript

回答 2

Stack Overflow用户

发布于 2021-10-30 23:19:16

如果数据来自外部来源，那么您的代码不能确定它的类型。这就是JSON.parse(myJson)返回any类型的原因。

但是，如果您相当确定服务器返回的是什么，您可以编写自己的类型并将数据转换为该类型。

该响应中每个项目的类型如下所示：

interface MyItem {
  amount: number
  id: number
  image: { url: string }
  name: string
  price: number
}

然后api将它们返回到一个带有字符串键的对象中：

type MyApiResponse = { [key: string]: MyItem }

最后，你只需要告诉typescript，作为程序员，你知道这个数据的类型是什么：

const transformedData = Object.entries(data as MyApiResponse).map(([key, value]) => {
  return {
    ...value,
    id: key,
  };
});

const test = transformedData[0].image.url // string

Playground

票数 0

Stack Overflow用户

发布于 2021-10-30 23:19:22

interface Data {
    amount: number,
    id: number,
    image: {
        url: string
    },
    name: string,
    price: number
}

interface DataMap {
    [key:string]: Data
}

const data:DataMap =  {
        "-MnI78G4UBVNSdurDCQK": {
            "amount": 1,
            "id": 1,
            "image": {
                "url": "https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone-13-pro-family-hero?wid=940&hei=1112&fmt=png-alpha&.v=1631220221000"
            },
            "name": "iPhone 13 Pro",
            "price": 5299
        },
      

  "-MnI78IKVgJnmF_8XTZ6": {
        "amount": 2,
        "id": 2,
        "image": {
            "url": "https://cdn.x-kom.pl/i/setup/images/prod/big/product-new-big,,2019/7/pr_2019_7_17_13_43_4_952_00.jpg"
        },
        "name": "Macbook Air M1 16gb 512gb",
        "price": 7999
    }
}

您可以使用给定的接口来描述数据结构。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69782730

复制

相似问题

问如何正确使用带有map([key，value])和TypeScript的Object.entries
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用带有map([key，value])和TypeScript的Object.entriesEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用带有map([key，value])和TypeScript的Object.entries
EN