Typescript: Generic function with enums

Question

I am using several enums as global parameters.

enum color {
    'red' = 'red',
    'green' = 'green',
    'blue' = 'blue',
};
enum coverage {
    'none' = 'none',
    'text' = 'text',
    'background' = 'background',
};

I merge all enums to a type myEnums.

type myEnums = color | coverage;

Now I want to check and access values of the enums. For instance:

// Returns undefined if the argument value is not a color.
function getColor(value: string): color | undefined{
    if(value in color) return value as color;
    return undefined;
}

Because there are several enums, I want to create a generic function to access all of my enums. I tried the following:

function getParam<T extends myEnums>(value: string): T | undefined {
    if(value in T) return value as T;
    return undefined;
}

getParam<color>('red', color);        // => should return 'red'
getParam<coverage>('test', coverage); // => should return undefined

But the Typescript compiler says: 'T' only refers to a type, but is beeing used as a value here.'.

So I added an argument list: T to the function, but then Typescript assums that the argument list has the type string (and not object). The right-hand side of an 'in' expression must not be a primitive.

function getParam<T extends allEnums>(value: string, list: T): T | undefined {
    if(value in list) return value as T;
    return undefined;
}

So how can I call a generic function using T as an enum?

Zbigniew Zagórski · Accepted Answer · 2021-09-13 10:08:58Z

6

I think the key is a proper typing of T, you have to tell TS, that T is "enum-definiton-like" object. I've poked around and found this, more or less working

I have something like this in one of my projects:

export function parseEnum<E, K extends string>(
  enumDef: { [key in K]: E },
  str: string | undefined
): E | undefined {
  if (str && str in enumDef) {
    return enumDef[str as K] as E;
  }
  return undefined;
}

So, that's what works for "normal enum" and you want to use it "sum" of enums.

Fortunately, due to way enums are implemented in JS&TS, you can just merge enums definition objects like this:

const myEnums = {...coverage, ...color }
// typeof myEnums = coverage | color;

and it works:

const x = parseEnum(myEnums, 'x');
// typeof x = coverage | color | undefined;

Typescript playground here

answered Sep 13, 2021 at 10:08

Zbigniew Zagórski

2,0011 gold badge15 silver badges25 bronze badges

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

Comments

soflx · Accepted Answer · 2024-03-24 06:52:10Z

Inspired by the answers here and after several tries, I've found the best practice and the most simplified version for me so far.

enum MyEnum {
    Value1 = 'one',
    Value2 = 'two',
};

let traverse_enum = <ENUM_AS_TYPE>(ENUM_AS_VALUE: Record<string, ENUM_AS_TYPE>): ENUM_AS_TYPE => {
    let key: string = '';
    for (key in ENUM_AS_VALUE) {
        console.log(`${key}: ${ENUM_AS_VALUE[key]}`);
    }
    return ENUM_AS_VALUE[key];
};
traverse_enum<MyEnum>(MyEnum);

I think what's most important is figuring out that enum can be used as both a value and a type, which will allow it to be integrated into the JavaScript code after compiling, while most other TypeScript features will be completely removed afterward.

It's a pretty confusing point, and you need a bridge to tell TypeScript the relation between the enum as a type and the enum as a value. I use Record<string, ENUM_AS_TYPE> here. So the solution to your question is:

function getParam<ENUM_AS_TYPE>(value: string, ENUM_AS_VALUE: Record<string, ENUM_AS_TYPE>): ENUM_AS_TYPE | undefined {
    if(value in ENUM_AS_VALUE) return value as ENUM_AS_TYPE;
    return undefined;
}

A complete solution to your question at TS Playground

captain-yossarian from Ukraine · Accepted Answer · 2021-09-14 05:43:52Z

1

enum is a special data structure in TypeScript.

If you want to put a restriction on generic you need to use typeof Enum instead.

In your example, you expect typeof color | typeof coverage and not color|coverage.

Because the last one is a union of values whether the first one is a union of enums.

COnsider this example:

enum color {
    'red' = 'red',
    'green' = 'green',
    'blue' = 'blue',
};
enum coverage {
    'none' = 'none',
    'text' = 'text',
    'background' = 'background',
};

type myEnums = color | coverage;

const hasProperty = <Obj, Prop extends PropertyKey>(obj: Obj, prop: Prop)
    : obj is Obj & Record<Prop, unknown> =>
    Object.prototype.hasOwnProperty.call(obj, prop);



function getParam<Keys extends PropertyKey, Value, E extends Record<Keys, Value>, Key extends keyof E>(enm: E, key: Key): E[Key]
function getParam<Keys extends PropertyKey, Value, E extends Record<Keys, Value>, Key extends PropertyKey>(enm: E, key: Key): Value | undefined
function getParam<E extends typeof color | typeof coverage, Key extends keyof E>(enm: E, key: Key): E[Key]
function getParam<E extends typeof color | typeof coverage, Key extends string>(enm: E, key: Key): undefined | E
function getParam<E extends typeof color | typeof coverage | Record<string, unknown>, Key extends keyof E>(enm: E, key: Key): E[Key] | undefined {
    return hasProperty(enm, key) ? enm[key] : undefined
}

const y = getParam(color, 'red');        // => color.red
const x = getParam(coverage, 'undefined'); // => undefined
const x2 = getParam({}, 'undefined'); // => unknown

const higherOrder = (key: string) => getParam(color, key)

const z = higherOrder('red') // typeof color | undefined

Playground

Please keep in mind, I'm not sure how you want to handle higher order functions so I just returned a union of enum and undefined in last example

As for this line if(value in T): T is a type and you can not treat is as a runtime value.

edited Sep 14, 2021 at 5:43

answered Sep 13, 2021 at 10:14

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

6 Comments

michaelT Over a year ago

Two questions about your answer: (1) It is possible to use a unknown type as argument? The function should return the enum value (if it exists), otherwise undefined. For example: let input : unknown = 'blue'; let result = getParam(color, input);. (2) It is possible to return the type Partial<keyof typeof color>; (in case of colors) and Partial<keyof typeof coverage>; and so on? Of course only if the key exists, otherwise it should be undefined.

captain-yossarian from Ukraine Over a year ago

It is completely changes the logic. DO you want to make super generic getParam function?

michaelT Over a year ago

This comes from my old JS setup (maybe take a look at my getter functions : stackoverflow.com/questions/69129503/…). I've to check user input which is unknown. Also I dont want to create a function for all of my global parameters (my enums).

captain-yossarian from Ukraine Over a year ago

if user input is unknown - we can remove all enums related logic, right?

captain-yossarian from Ukraine Over a year ago

@michaelT made an update. you can pass any object. if it does not work for you please provide your case scenarios an the question

|

Collectives™ on Stack Overflow

Typescript: Generic function with enums

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related