dynamically adding a property name to a typescript interface

Question

I have a constant:

const name = 'some/property';

I'd like to define an interface that uses name as a key for a property in a similar way to using it in an object declaration like so:

{[name]: 'Bob'}

I tried the following, but it seems that this is doing something else:

interface MyInterface {
  [name]: string;
}

is dynamically defining property names supported in typescript?

toskv · Accepted Answer · 2016-12-21 11:32:09Z

22

You have to specify the type of name. There's no way to use it in an object declaration but you can use the [ ] to set and access the property value.

interface MyInterface {
  [name: string]: string;
}
const n = 'qweq';

let x: MyInterface = {
  'a': 'b'
}

x[n] = 'a';

And access it this way.

x[n]

Check it out in the playground here.

edited Dec 21, 2016 at 11:32

answered Oct 21, 2016 at 11:15

toskv

31.8k7 gold badges77 silver badges77 bronze badges

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

4 Comments

Will Munn Over a year ago

This doesn't work (or maybe my question is unclear). In your example, x.coolname is undefined.

toskv Over a year ago

You are right that was creating a property with the name n on the X object. I have updated my answer. :)

Will Munn Over a year ago

Thanks, but that is bypassing the typechecking completely, doing this will not enforce object of type MyInterface to have a qweg property

toskv Over a year ago

that's not very dynamic though. From what I know you can't define a type that allows an object to have any string as a key while at the same time enforcing a specific key name. The first includes the 2nd one.

Netråm · Accepted Answer · 2019-08-05 11:52:55Z

10

This can be done with Mapped Types introduced in TypeScript 2.1:

const name = 'some/property';
type MyInterface = {
    [prop in typeof name]: string;
};

This forces all object of type MyInterface to have a property named 'some/property'.

I guess this answer is too late for you, but hopefully it can help others. I found this question early on in my own searches for a solution to a similar problem.

answered Aug 5, 2019 at 11:52

Netråm

4977 silver badges15 bronze badges

1 Comment

Michael Tontchev Over a year ago

This helped! I had a related problem where I wanted a specific (dynamically-given) property inside of a type to have another given type, and ended up with

type PropertyType<K extends string | number, T> = { 	[P in K]: T; };  const lala: PropertyType<'test', number> = { 	test: 1, };

Collectives™ on Stack Overflow

dynamically adding a property name to a typescript interface

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related