How to Create String Literal Union Type From Enum ?

Enum allows us to define a set of named constants and it can be of any type e.g. Numeric, String, etc. and we need to create string literal union type from that enum.

Below are the approaches used to create a string literal union type from an enum:

Approach 1: Enum to String Literal Union

In this approach, the keyof typeof operator is used to create a union type of string literals from the enum keys.

Example: Consider an enum Color with values “Red,” “Green,” and “Blue.” The ColorStringLiteral type, created using keyof typeof Color, allows variables to take on only valid color options.

Javascript

enum Color {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE",
}

type ColorStringLiteral = keyof typeof Color;

// Usage
let color: ColorStringLiteral = "Red"; // Valid
// The line below would result in a type 
// error since "Yellow" is not a member of the enum.
// let invalidColor: ColorStringLiteral = "Yellow";

console.log(color); // "Red"

Output:

Red

Approach 2: Extract Enum Values

This approach uses (keyof typeof) along with & string to create a string literal union type from the enum.

Example: Consider an enum Size with values “Small,” “Medium,” and “Large.” The SizeStringLiteral type, created using (keyof typeof Size) & string, restricts variables to valid size options.

Javascript

enum Size {
    Small = "SMALL",
    Medium = "MEDIUM",
    Large = "LARGE",
}

type SizeStringLiteral = (keyof typeof Size) & string;

// Usage
let size: SizeStringLiteral = "Medium"; // Valid
// The line below would result in a type error 
// since "ExtraLarge" is not a member of the enum.
// let invalidSize: SizeStringLiteral = "ExtraLarge";

console.log(size); // "Medium"

Output:

Medium

Approach 3: Using Object.values

This approach utilizes Object.values to extract the values of the enum and create a string literal union type.

Example: Consider an enum Direction with values “North,” “South,” “East,” and “West.” The DirectionStringLiteral type, created using Object.values, constrains variables to valid direction options.

Javascript

enum Direction {
    North = "NORTH",
    South = "SOUTH",
    East = "EAST",
    West = "WEST",
}

type DirectionStringLiteral = 
`${(typeof Direction)[keyof typeof Direction]}`;

// Usage
let direction: DirectionStringLiteral = "North"; // Valid
// The line below would result in a type 
// error since "Up" is not a member of the enum.
// let invalidDirection: DirectionStringLiteral = "Up";

console.log(direction); // "North"

Output:

North

Approach 4: Using Generic Function

In this approach, we’ll create a generic function enumToLiteralUnion that takes an enum object as input and returns a string literal union type representing its keys. This method enhances reusability and flexibility by allowing the conversion of any enum to a string literal union type.

Example: In this example we defines an enum ‘Fruit’, converts it to a string literal union type using a generic function, and assigns it to a variable ‘fruit’, outputting its values.

JavaScript

enum Fruit {
    Apple = "APPLE",
    Banana = "BANANA",
    Orange = "ORANGE",
}

function enumToLiteralUnion<E extends {
[key: string]: string }>(enumObject: E): keyof E {
    return Object.keys(enumObject)[0] as keyof E;
}

// Usage
type FruitLiteralUnion = keyof typeof Fruit;

let fruit: FruitLiteralUnion = enumToLiteralUnion(Fruit);

console.log(fruit); 

Output:

Apple