為JSON創建正確的介面-有解無憂

有一個看起來像這樣的 JSON

[
    {
        "Background": [
            {
                "Blue": 16.58
            },
            {
                "Orange": 15.39
            },
            {
                "Yellow": 14.0
            },
            {
                "Pink": 14.74
            },
            ...
        ]
    },
    {
        "Type": [
            {
                "Brown": 12.89
            },
            {
                "Gold": 6.8
            },
            {
                "Robot": 6.75
            },
            ...
        ]
    },
    {
        "Body": [
            {
                "BlackBasic": 5.15
            },
            {
                "Bathrobe": 5.85
            },
            ...
        ]
    },
    ...
]

我想為我的 angular 應用程式提供一個界面。我目前有：

export interface Attributes{
  [key: string]: Array<Attribute>;
}

export interface Attribute {
  [key: string]: number;
}

我有一組固定的“頂級”類別，Background，Type等，并且每個頂級類別都有一組固定的值，例如Background上面顯示的值（以及更多）等。

有沒有辦法讓介面只允許子值，具體取決于“頂級”？

提示：我也可以控制 json 的結構，如果有更簡單的方法，我也可以更改 json。

uj5u.com熱心網友回復：

由于您可以控制 json 結構，因此您應該對其進行修改。你有什么理由在頂層有一個陣列嗎？對我來說，這個物件似乎更適合。同樣對于您的“頂級類別”，您還可以使用物件而不是陣列。當物件只包含一個鍵時，不需要有一組物件。

示例 JSON：

{
  "Background": {
    "Blue": 16.58,
    "Orange": 15.39,
    "Yellow": 14,
    "Pink": 14.74
  },
  "Type": {
    "Brown": 12.89,
    "Gold": 6.8,
    "Robot": 6.75
  },
  "Body": {
    "BlackBasic": 5.15,
    "Bathrobe": 5.85
  }
}

示例界面：

    export interface Background {
        Blue: number;
        Orange: number;
        Yellow: number;
        Pink: number;
    }

    export interface Type {
        Brown: number;
        Gold: number;
        Robot: number;
    }

    export interface Body {
        BlackBasic: number;
        Bathrobe: number;
    }

    export interface RootObject {
        Background: Background;
        Type: Type;
        Body: Body;
    }

uj5u.com熱心網友回復：

我更改了您的 json 模型，因為我認為它更具可讀性：

{
  "Background": {
     "Blue": 16.58,
     "Orange": 15.39,
     "Yellow": 14.0,
     "Pink": 14.74
  },
  "Type": {
     "Brown": 12.89,
     "Gold": 6.8,
     "Robot": 6.75
  },
  "Body": {
     "BlackBasic": 5.15,
     "Bathrobe": 5.85
  }
}

所以在這個模型中你的界面會是這樣的：

export interface Attributes {
 [key: string]: Attribute;
}

export interface Attribute {
 [key: string]: number;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/400341.html

標籤：json 有角的打字稿

上一篇：錯誤TS2307：找不到模塊“./portfolio/portfolio.component”或其相應的型別宣告

下一篇：根據路由更改組件視圖