如何通过 TypeScript 正确使用 Object.entries 和 map([key,value])

Question

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

我编写了无需打字稿即可运行的代码。你能告诉我如何做到类型安全吗？

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

 {
        "-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,
      };
    });

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

Answer 1

如果数据来自外部源，那么您的代码无法确定它的类型。这就是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

操场