TypeScript: Getting Value from an Enum Key in Interface

Question

I created an enum named FoodTypes:

enum FoodTypes {
    Meat,
    Veggie,
}

Then I declared an interface named Recipe that contains arrays of objects of FoodTypes.

interface Recipe {
    [FoodTypes.Meat]: [
        { name: 'Beef', val: 120 },
        { name: 'Pork', val: 200 },
    ],
    [FoodTypes.Veggie]: [
        { name: 'Mushroom', val: 30 },
        { name: 'Lettuce', val: 10 },
    ],
};

How do I access a specific value in the interface? For example, I'd like to get the val of Beef. // should be 120

Thanks so much!

Edit: @captain-yossarian For example, if I want to pass in the value later in a function as it changes dynamically (using React Redux in front-end), would I be able to do so? I know that the following wouldn't work since I'm referring to a type:

function getBeefVal(recipe: Recipe) {
return "Beef Val: " + Recipe[FoodTypes.Meat][0]['val'];
}

That interface is exceedingly suspicious. Are you absolutely certain you intended to declare a type which requires FoodTypes.Meat's two properties to have specific literal values? It seems like you just want a runtime lookup table, not a type-level interface. — Silvio Mayolo
– Silvio Mayolo, Commented May 3, 2021 at 18:09
Thanks for your reply, @SilvioMayolo! The full breakdown of the interfaces is technically: interface IFoodAttribute {name: string; value: number } & interface IFood { [FoodTypes.Meat]: IFoodAttribute[] }. The specific literal values will be passed in dynamically in Redux. If there's a better way to do things, please let me know as I'm quite new to TS. Thanks! — supvicky
– supvicky, Commented May 3, 2021 at 18:25

captain-yossarian from Ukraine · Accepted Answer · 2021-05-03 20:14:33Z

2

type Beef = Recipe[FoodTypes.Meat][0]['val'] // 120

You can use the square bracket notation to get a nested property of an interface. Just like plain JS.

if I want to pass in the value later in a function as it changes dynamically (using React Redux in front-end), would I be able to do so? I know that the following wouldn't work since I'm referring to a type:

TS has two scopes. One for types, let's name it TypeScope - another one for values - ValueScope

It is impossible to use types from TypeScope in the ValueScope. Because all types are removed after the compilation.

In some cases it is possible to use values from ValueScope in TypeScope. For example classes.

class A {
    age: number = 0
}

const x: A = { age: 42 } // ok

In above example I have used A class from ValueScope as a type in TypeScope.

edited May 3, 2021 at 20:14

answered May 3, 2021 at 18:08

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

4 Comments

captain-yossarian from Ukraine Over a year ago

@blackgreen fair enough, I made an update

supvicky Over a year ago

Thank you @captain-yossarian & @blackgreen! This may be a silly question but is there a way to access this as a value instead of type?

captain-yossarian from Ukraine Over a year ago

@supvicky I'm not sure what do U mean. Could you please update the question with example?

supvicky Over a year ago

@captain-yossarian Thanks for your reply! Done! Hopefully, it makes more sense :')

Collectives™ on Stack Overflow

TypeScript: Getting Value from an Enum Key in Interface

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related