Typescript React map API 对具有额外属性的内部类型的响应

Question

我正在使用打字稿构建一个反应前端客户端。我想向将返回事件列表的 api 端点发出请求。当我从这个事件中得到响应时，我想将它映射到一个内部类型，该类型也将具有 API 未返回的额外属性，具体来说，我想将一个图标关联到一个内部类型，以便在它被呈现时。该图标不是 API 的一部分，我不希望它如此，因此它不会将前端耦合到 API。 API 响应：

[
    {
        "identifier": "1",
        "name": "Gig"
    },
    {
        "identifier": "2",
        "name": "Concert"
    },
    {
        "identifier": "3",
        "name": "Some event type here"
    }
    {
        "identifier": "4",
        "name": "other"
    }
]

所以我可以请求这个罚款，但我想将该响应映射回以下定义的内部类型：

type Event = {
    identifier: string;
    name: string;
    icon: string;
}

我想将 API 返回的标签映射到包含相应图标的内部列表。我不确定执行此操作的最佳方法，要进行该映射，我需要一个将返回的潜在类型和图标的内部列表，或者如何进行该映射？

Answer 1

我相信在这种情况下您可以使用可以从另一个接口继承的接口。您可以有 2 个接口用作您的类型。

interface Event{
    identifier: string;
    name: string;    
}

interface EventICON extends Event {
    icon: string;    
}

Event 接口可用于映射您的 API 响应，EventICON 可在您将图标列表注入您获得的响应后使用。