Typescript: How to dynamic access interface property when string index is not allowed?

Question

I've got the following interface. Variable access like metrics[ key[1] ] is not allowed because not string indexable. Is there another way to access a single element dynamically, like metrics.{key[1]}? Or a way to make it string indexable while keeping it's structure?

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 }
  };

CertainPerformance · Accepted Answer · 2021-01-27 22:18:09Z

1

If you're starting out with a string type, you can narrow it down to one of the Metrics keys allowed and then use bracket notation:

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]);
}

answered Jan 27, 2021 at 22:18

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PeterPetersson Over a year ago

Ok I see. But then I would have to do that for the .audio .video .min .avg .max keys as well. That is a lot of type checking while the keys already come from a list of valid keys. No other way than using // @ts-ignore then?

CertainPerformance Over a year ago

If you're sure that the accesses that will be attempted are all type-correct without carrying out the checks, you could use as to tell TS that there's no need to check them, eg metrics[str as keyof Metrics] - but ideally you'd have the strings typed as proper properties in the first place, avoiding the need for this sort of thing.

PeterPetersson Over a year ago

I see. Will have a look at the key typing then. Thank U!

Collectives™ on Stack Overflow

Typescript: How to dynamic access interface property when string index is not allowed?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related