打字稿：不允许字符串索引时如何动态访问接口属性？

Question

我有以下界面。不允许像metrics[key[1]]这样的变量访问，因为它不是字符串可索引的。是否有另一种动态访问单个元素的方法，例如 metrics.{key[1]}？或者在保持其结构的同时使其字符串可索引的方法？

export interface Metrics {
  bufferLevel?: { audio: number, video: number };
  bitrateDownload?: { audio: number, video: number };
  qualityIndex?: { audio: number, video: number };
  qualityIndexPending?: { audio: number, video: number };
  qualityIndexMax?: { audio: number, video: number };
  droppedFrames?: { audio: number, video: number };
  latency?: {
    audio: { min: number, avg: number, max: number },
    video: { min: number, avg: number, max: number }
  };

Answer 1

如果您从字符串类型开始，您可以将其缩小到允许的 Metrics 键之一，然后使用括号表示法：

declare const metrics: Metrics;
const isValidMetricsKey = (str: string): str is keyof Metrics => ['bufferLevel', 'bitrateDownload', 'qualityIndex', 'qualityIndexPending', 'qualityIndexMax', 'droppedFrames', 'latency'].includes(str);
const str: string = 'foo';
if (isValidMetricsKey(str)) {
   console.log(metrics[str]);
}