Question

我正在学习TypeScript，并且遇到一种情况，我正在映射对象数组，其中每个对象可以具有不同的字段-具体地说，对象中的字段是可以具有不同字段的对象。 / p>

我不确定如何为此编写接口。

例如，假设我正在尝试将原始数据Array<any> 映射到一个其数组元素如下所示的数组：

 [  {
      name:string,
     favorites: {
                 "spaghetti": number,
                 "fusilli": number,
                "linguine": number
                  } ,
    } ,

{
       name:string,
      favorites: {
                 "spaghetti": number,
                 "fusilli": number,
                "farfalle": number
                  } ,


    } ]

这里的问题是，“收藏夹”对象可能包含各种各样的字段（所有字段均为数字），这些字段具有不同的可能的名称，这些名称我事先都不知道。

我想到了这样的东西

interface PastaData {
   [key: string] : number,
}

interface UserData {
    name: string,
    favorites: Array<PastaData>
}

const ParsedUserData: Array<UserData> = originalData.map(data  => ({name:data.name,favorites:data.favorites}));

原始数据采用这种格式（当然会被截断）：

[
  {
    "_id": "5bb238cbf839d08d65633450",
    "index": 0,
    "guid": "390322bb-3e93-4196-853a-e6e7a6f455bb",
    "isActive": true,
    "balance": "$2,193.03",
    "picture": "http://placehold.it/32x32",
    "age": 62,
    "eyeColor": "brown",
    "name": "Holder Joyce",
    "gender": "male",
    "company": "RAMEON",
    "email": "holderjoyce@rameon.com",
    "phone": "+1 (942) 548-3425",
    "address": "168 Ovington Court, Eagleville, Oregon, 1098",
    "about": "Voluptate eiusmod exercitation ad aliqua ullamco ex officia. Fugiat deserunt anim commodo anim reprehenderit cillum cupidatat magna anim. Do in sint elit deserunt sint amet veniam culpa et veniam.\r\n",
    "registered": "2017-09-21T02:55:55 -02:00",
    "latitude": 53.144539,
    "longitude": 111.973422,
    "favorites": {
      "cavatappi": 3.1604049168546533,
      "fusilli": 47.41214262743145,
      "spaghetti": 36.351431171952584,
      "tagliatelle ": 16.540786406823592,
      "farfalle": 29.91825944401951
    }
  },
  {
    "_id": "5bb238cba65b6203c1060042",
    "index": 1,
    "guid": "8f258a51-4b30-45ab-8bd3-100afb9aa191",
    "isActive": true,
    "balance": "$3,852.51",
    "picture": "http://placehold.it/32x32",
    "age": 29,
    "eyeColor": "blue",
    "name": "Calhoun Mclean",
    "gender": "male",
    "company": "GOGOL",
    "email": "calhounmclean@gogol.com",
    "phone": "+1 (840) 550-3492",
    "address": "775 Arion Place, Barstow, South Dakota, 3519",
    "about": "Id cillum nulla laborum anim enim magna ea. Amet irure exercitation culpa deserunt culpa duis enim ullamco do do. Aliqua commodo occaecat cillum culpa est aliquip veniam officia quis cillum nisi.\r\n",
    "registered": "2015-12-11T06:06:10 -01:00",
    "latitude": -85.141798,
    "longitude": 100.30676,
    "favorites": {
      "cavatappi": 36.419432034499955,
      "fusilli": 84.64117075525127,
      "spaghetti": 86.77410379301949,
      "tagliatelle ": 77.02196537202377,
      "farfalle": 70.6367456562684
    }
  },]

但这不起作用。我收到以下错误

如何为对象创建一个接口，该对象的字段名可以具有许多不同的值（我不知道，但是其类型均为number）？

感谢您的帮助！

Answer 1

您的问题是，根据您的数据样本，favorites属性不是数组，而是具有[key: string]: number类型属性的对象！

"favorites": {
  "cavatappi": 3.1604049168546533,
  "fusilli": 47.41214262743145,
  "spaghetti": 36.351431171952584,
  "tagliatelle ": 16.540786406823592,
  "farfalle": 29.91825944401951
}

因此，您应该将UserData.favorites属性的类型更改为PastaData，而不是Array<PastaData>。

interface PastaData {
  [key: string] : number,
}

interface UserData {
    name: string,
    favorites: PastaData // instead of Array<PastaData>
}

const ParsedUserData: Array<UserData> = originalData.map(data  => ({name:data.name,favorites:data.favorites}));

此处提供TypeScript示例（不用管Angular代码）：
https://stackblitz.com/edit/angular-stackoverflow-56509473

Answer 2

您的问题是您说.favorites是PastaData的数组，但是您只提供了一个PastaData。

更改：

.map(data  => ({ name: data.name, favorites: data.favorites }))

收件人：

.map(data  => ({ name: data.name, favorites: [ data.favorites ] }))

然后您将生成UserData形的值。

当字段名称可以具有多个未知值之一时，如何为TypeScript编写接口？

2 个答案: