首页 > 解决方案 > 界面中的打字稿动态键

问题描述

我有一个我正在使用的 API,它允许您按平台搜索不同的游戏。我正在尝试为它们绘制适当的接口,但顶级对象键随每种搜索类型而变化。

HTTP 请求的响应给了我回...

ps4: {
  data: [{
    ...
  }]

OR...

xbox: {
  data: [{
    ...
  }]

OR...

switch: {
  data: [{
    ...
  }]

如您所见,顶级对象随每种类型的 HTTP 请求而变化,但数据本身保持不变。您如何为该键映射一个接口以动态更改?谢谢你。

标签: typescriptinterface

解决方案


您可以为它定义一个接口,如下所示:

interface Response {
  [key: string]: {
    data: Object[]
  }
}

或者更明确地说,您可以使用所有可能的键定义类型

type TKeys 'ps4' |'xbox' | 'switch';

type Response = {
  [key in TKeys]: {
    data: Object[]
  }
}

您也可以考虑使用这样的enum类型

enum Platforms {
 ps4 = 'ps4',
 xbox = 'xbox',
 switch = 'switch'
}

type Response = {
  [key in Platforms]: {
    data: Object[];
  };
};

推荐阅读