How to Create an Enum With String Values in TypeScript ?

To create an enum with string values in TypesScript, we have different approaches. In this article, we are going to learn how to create an enum with string values in TypesScript.

Below are the approaches used to create an enum with string values in TypesScript:

Approach 1: Using Enums

Enums provide a structured way to define a set of named values, associating each with a specific string.

Example: In this example, we define an enum Color with string values representing red, green, and blue. We then assign the Red value to myColor and log it, resulting in the output "FF0000."

Javascript

// Creating an enum named Color with string values
enum Color {
    Red = "FF0000",
    Green = "00FF00",
    Blue = "0000FF",
}

// Using the enum
const myColor: Color = Color.Red;
console.log(myColor); // Output: "FF0000"

Output:

FF0000

Approach 2: Using Union Types

Union types allow flexibility by combining multiple types with the | operator. They are more open-ended, permitting any string value within the specified set without a predefined enum structure.

Example: In this example, we define types Color and Days with specific string values. We assign values to variables myColor and today, logging their outputs, resulting in "FF0000" and "Wed" respectively.

Javascript

type Color = "FF0000" | "00FF00" | "0000FF";
type Days = "Mon" | "Tue" | "Wed" | "Thu" | "Fri";

const myColor: Color = "FF0000";
const today: Days = "Wed";
console.log(myColor); // Output: "FF0000"
console.log(today); // Output: "Wed"

Output:

FF0000
Wed

Approach 3: Using Object Mapping

Object mapping involves creating an object with string values and using keyof to define a type representing its keys.

Example: In this example, using object mapping, we define objects Color and Days with string values. We then create types ColorKey and DaysKey representing the keys of these objects. We assign keys to variables myColor and today, logging their outputs, resulting in "Red" and "Wednesday" respectively.

Javascript

const Color = {
    Red: "FF0000",
    Green: "00FF00",
    Blue: "0000FF",
} as const;

const Days = {
    Monday: "Mon",
    Tuesday: "Tue",
    Wednesday: "Wed",
    Thursday: "Thu",
    Friday: "Fri",
} as const;

type ColorKey = keyof typeof Color;
type DaysKey = keyof typeof Days;

const myColor: ColorKey = "Red";
const today: DaysKey = "Wednesday";
console.log(myColor); // Output: "Red"
console.log(today); // Output: "Wednesday"

Output:

Red
Wednesday

Approach 4: Using String Literal Types with Const Assertion

String literal types provide a way to specify the exact value a string must have. When combined with const assertions, they create a type that allows only specific string values.

Example: In this example, we define constants representing colors using string literal types with const assertions. We then assign these constants to variables myColor and backgroundColor, logging their outputs, resulting in “blue” and “#FFFFFF” respectively.

JavaScript

const Red = "FF0000" as const;
const Green = "00FF00" as const;
const Blue = "0000FF" as const;

type Color = typeof Red | typeof Green | typeof Blue;

const myColor: Color = Blue;
console.log(myColor); // Output: "0000FF"

const White = "#FFFFFF" as const;
const Black = "#000000" as const;

type BackgroundColor = typeof White | typeof Black;

const backgroundColor: BackgroundColor = White;
console.log(backgroundColor);

Output:

0000FF
#FFFFFF