如何在TypeScript中定义键为动态值的接口？（Next.js+ShazamCore API）

你当前的接口写法不符合TypeScript语法规范，[dynamic key]和value都是无效写法，需要用索引签名处理动态键场景，同时明确艺人详情的具体类型结构。

步骤1：定义艺人详情子接口 #

根据ShazamCore API返回的真实字段，定义单个艺人的信息结构（示例字段可按需调整）：

export interface ArtistInfo {
  name: string;
  biography?: string;
  avatarUrl?: string;
  genres: string[];
  followers?: number;
}

步骤2：修改主接口的索引签名 #

用字符串类型索引匹配动态艺人ID键（若艺人ID是数字类型，可将string替换为number）：

export interface IArtistResponse {
  artists: {
    [artistId: string]: ArtistInfo;
  };
}

步骤3：在Next.js中使用 #

请求API后，通过查询参数拿到的艺人ID直接取值即可：

// 客户端或API路由示例
const fetchArtist = async (artistId: string) => {
  const res = await fetch(`https://api.shazamcore.com/v1/artists/${artistId}`);
  const data: IArtistResponse = await res.json();
  // 获取目标艺人详情
  const targetArtist = data.artists[artistId];
  return targetArtist;
};

内容的提问来源于stack exchange，提问作者iufb