Typescript interface generic property names

Question

Say we have two variables

const x='property1' const y='property2'

and we have function

function foo<key extends keyof MapInterface>(name: key, props: (MapInterface[key]))

This interface should look like

interface MapInterface{
'property1':any;
'property2':any;
}

Is it possible to have the interface be generically created like by calling the variables x,y

interface MapInterface{
x:any; //return 'property1':any;
y:any; //return 'property2':any;
}

Possible duplicate of Typescript interface, using string constants for properties — jcalz
– jcalz, Commented Sep 7, 2018 at 16:46
Does this answer your question? Typescript interface, using string constants for properties — titusfx
– titusfx, Commented Aug 26, 2021 at 9:02

jcalz · Accepted Answer · 2018-09-07 16:43:01Z

2

Yes, you can do this as of TypeScript 2.7, with constant-named properties, introduced in pull request Microsoft/TypeScript#15473. The only thing you are missing is that you need to use computed property syntax (the property name must be encased in brackets):

const x = 'property1'
const y = 'property2';

interface MapInterface {
  [x]: any;
  [y]: any;
} 

declare const mapInt: MapInterface;
mapInt[x]; // works      
mapInt[y]; // works
mapInt.property1; // also works
mapInt.property2; // also works

Hope that helps. Good luck!

answered Sep 7, 2018 at 16:43

jcalz

339k29 gold badges452 silver badges449 bronze badges

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

2 Comments

Abdullah El-Kindy Over a year ago

The problem is x and y are being imported from a separate class, thus the values will be accessible to the interface on runtime and not compile time. So it, unfortunately, rejects this approach.

jcalz Over a year ago

You should be able to access them in a separate class at compile time, but of course I don't know your setup... and you should edit your question with relevant information if you want a more targeted answer; the answer above does apply to your question as it is currently stated.

Collectives™ on Stack Overflow

Typescript interface generic property names

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related