JavaScript：如何为任意输入的变量名提供接口类型提示

嘿，我来帮你搞定这个问题！你现在遇到的是TypeScript中接口属性名不固定的场景，这时候索引签名就是最适合的解决方案，它能让你的接口支持任意自定义的属性名，同时保持严格的类型提示。

问题分析 #

你当前的Reels接口只定义了固定的anyArchiveName属性，所以只有这个名字能获得类型提示。要让任意属性名都能触发ArchiveData的类型提示，我们需要用索引签名来替换固定属性定义。

修改后的代码 #

把Reels接口改成下面这样：

export interface ArchiveData { id: string; latest_reel_media: number; seen?: any; /* ... 其他你需要的属性 */ }
// 使用字符串索引签名，允许任意字符串作为属性名，值的类型为ArchiveData
export interface Reels {
  [key: string]: ArchiveData;
}
export interface ArchivedStoryDataResponse { reels: Reels; status: string; }

为什么这样有效？ #

• [key: string]: ArchiveData 表示：任何字符串类型的属性名，对应的属性值都必须符合ArchiveData的类型结构。
• 现在不管你给reels对象加什么属性名（比如vacationReels、birthdayStories甚至随机字符串），TypeScript都会自动识别它的类型是ArchiveData，并提供对应的属性提示（比如id、latest_reel_media）。

使用示例 #

const testResponse: ArchivedStoryDataResponse = {
  status: "success",
  reels: {
    weekendTrip: { id: "trip-001", latest_reel_media: 1720000000 },
    holidayStories: { id: "holiday-007", latest_reel_media: 1719000000, seen: "2024-07-01" }
  }
};

// 这里访问testResponse.reels.weekendTrip会自动弹出ArchiveData的属性提示
console.log(testResponse.reels.weekendTrip.id);

额外小技巧 #

如果你的Reels接口需要同时包含固定属性和任意属性，可以把固定属性和索引签名结合起来：

interface Reels {
  // 固定属性
  defaultArchive: ArchiveData;
  // 任意其他字符串属性
  [key: string]: ArchiveData;
}

内容的提问来源于stack exchange，提问作者E. Kolver