Typescript: how to get a list of values acceptable/defined by interface? [duplicate]

Question

How to get a list of values acceptable/defined by interface?

Example I have a local state defined as:

interface LocalState {
    justifyContent: 'space-between' | 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-evenly';
}

And I want to get an array of items which will contain

['space-between', 'center', 'flex-start', 'flex-end', 'space-around', 'space-evenly']

Is it possible to extract this information from TS type-system?(Or does it get stripped out while transpiling to Javascript)

If it is possible how?

Interface has NO footprint in the generated JavaScript, so it doesn't fit for the intended purpose. Use a class instead. More on interfaces in the docs - typescriptlang.org/docs/handbook/interfaces.html — Alex Klaus
– Alex Klaus, Commented Jan 19, 2021 at 23:19

Ali Habibzadeh · Accepted Answer · 2021-01-20 00:35:17Z

2

const contentPositions = <const>["space-between", "center", "flex-start", "flex-end", "space-around", "space-evenly"];

interface LocalState {
  justifyContent: typeof contentPositions[number];
}

answered Jan 20, 2021 at 0:35

Ali Habibzadeh

11.6k4 gold badges56 silver badges79 bronze badges

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

Comments

GBra 4.669 · Accepted Answer · 2021-01-20 00:22:48Z

Since types/interfaces are a concept related to types, and JS is an extremely dynamically typed language... it wouldn't be a great idea. That being said, we can create an enum with all the required properties and simply use JS Object.values() to get an array from it. Of course, we can use the enum as a type.

enum LocalState {
    spaceBetween = 'space-between',
    center = 'center',
    flexStart = 'flex-start'
}

const localStateArr: LocalState[] = Object.values(LocalState);

console.log(localStateArr) // logs ["space-between", "center", "flex-start"]

Partial Example: Playground Link

This is how you can create a simple interface and use it.

interface LocalStateWithEnum {
    string : LocalState;
}

// or even more strict:

interface LocalStateWithEnumStrict {
    'justifyContent' :  LocalState;
}

const a: LocalStateWithEnumStrict = {
   justifyContent : LocalState.center
}

Full example: Playground Link

Using a string literal type ('space-between' | 'center' | ...) rather than enums would be a more straightforward approach. It's too easy to mistakenly use values vs keys in enums. Here's an interesting reading - Wonderland of TypeScript enums

Collectives™ on Stack Overflow

Typescript: how to get a list of values acceptable/defined by interface? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related