String literals in typescript property map

Question

I can't seem to access attributes, see below:

type ValidAttributes = "FOO" | "BAR" | "BAZ";

interface MyInterface {
  attributes: {
    [s in keyof ValidAttributes]: string;
  };
}

const doSomething = (data: MyInterface): void => {
  const foo = data.attributes.FOO;
  //Error:(10, 31) TS2339: Property 'FOO' does not exist on type '{ toString: string; charAt: string; charCodeAt: string; concat: string; indexOf: string; lastInde...'.

  const bar = data.attributes["BAR"];
  //Error:(13, 15) TS7017: Element implicitly has an 'any' type because type '{ toString: string; charAt: string; charCodeAt: string; concat: string; indexOf: string; lastInde...' has no index signature.
}

I also have a linter which autocorrects the last code into the other format. This could be disabled if it is the only way.

Oscar Paz · Accepted Answer · 2018-04-23 09:31:00Z

1

Change your interface definition:

type ValidAttributes = "FOO" | "BAR" | "BAZ";

interface MyInterface {
  attributes: {
    [s in ValidAttributes]: string;
  };
}

When you use keyof in ValidAttributes, you're getting the properties of type String, because ValidAttributes is a union of strings. You don't want that, you want the properties to be one of the strings, not the properties of the union of strings, so you just need s in ValidAttributes, not s in keyof ValidAttributes.

answered Apr 23, 2018 at 9:31

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

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

1 Comment

MrMamen Over a year ago

Thanks. The use of "keyof" was a bummer. ;-)

Collectives™ on Stack Overflow

String literals in typescript property map

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related