Enums in Typescript that are based on strings

Question

Enums in Typescript that are based on strings

After going through all the information on String Based Enums in Typescript, I have yet to find a solution that fits my specific needs. These are the requirements I am looking for:

Enums that offer code completion
Enums that can be looped over
No need to repeat elements
String-based enums

The enum possibilities I've come across in Typescript so far include:

enum MyEnum {bla, blub}: This does not support string-based functionality, making it difficult to read from JSON files...
type MyEnum = 'bla' | 'blub': Not iterable and lacks code completion

Creating a custom

class MyEnum { static get bla():string{return "bla"} ; static get blub():string{return "blub"}}

: Involves specifying elements twice

Considering these limitations, I have the following questions:

Is there currently no way to fulfill all of these requirements simultaneously? If not, will this be achievable in the future?
Why weren't Enums designed to be string-based?
Has anyone encountered similar issues and how did you resolve them?

json string typescript enums code-completion

Answer 1

Answer №1

In my opinion, there is nothing wrong with implementing an Enum in a C-like style with numbers. The whole point of an Enum (similar to a Symbol) is to declare a value that can be uniquely identified during development, regardless of how it is represented at runtime.

However, as developers, we sometimes desire to use the functionality of an Enum through an API that doesn't expose the actual enumeration values. Even if the API is essentially based on an Enum, restricting property values to just 'foo' and 'bar'.

Perhaps this is why some languages offer string-based Enums :)

The approach of TypeScript towards Enums

When you examine the transpiled JavaScript code, you'll notice that TypeScript simply utilizes a basic JavaScript Object for implementing an Enum. For instance:

enum Color {
    Red,
    Green,
    Blue
}

gets transpiled into:

{
  0: "Red",
  1: "Green",
  2: "Blue",
  Blue: 2,
  Green: 1,
  Red: 0
}

This allows you to access the string value like Color[Color.Red]. You still benefit from code completion without needing to specify the values twice. However, using Object.keys(Color) for iterating over the Enum would not work seamlessly due to the duplication of values within the object itself.

Answer 2

In my opinion, there is nothing wrong with implementing an Enum in a C-like style with numbers. The whole point of an Enum (similar to a Symbol) is to declare a value that can be uniquely identified during development, regardless of how it is represented at runtime.

However, as developers, we sometimes desire to use the functionality of an Enum through an API that doesn't expose the actual enumeration values. Even if the API is essentially based on an Enum, restricting property values to just 'foo' and 'bar'.

Perhaps this is why some languages offer string-based Enums :)

The approach of TypeScript towards Enums

When you examine the transpiled JavaScript code, you'll notice that TypeScript simply utilizes a basic JavaScript Object for implementing an Enum. For instance:

enum Color {
    Red,
    Green,
    Blue
}

gets transpiled into:

{
  0: "Red",
  1: "Green",
  2: "Blue",
  Blue: 2,
  Green: 1,
  Red: 0
}

This allows you to access the string value like Color[Color.Red]. You still benefit from code completion without needing to specify the values twice. However, using Object.keys(Color) for iterating over the Enum would not work seamlessly due to the duplication of values within the object itself.

Answer 3

Answer №2

Why wasn't the decision made to use string-based enums?

To clarify, Enums in TypeScript can be utilized with both numbers and strings, where direct access is through number and reverse mapping via string (more information here).

Addressing your requirement

The main reason for abandoning raw enums is because

I am unable to directly read from JSONs that are string based...

You will encounter similar challenges when handling Dates since JSON lacks a date data type. To convert these, you would typically use new Date("someServerDateTime").

The same approach can be used to convert server-side enum (string) to TS enum (number), thanks to the reverse lookup MyEnum["someServerString"]

Data Transformation

This process of transforming server-side data into client-side active data is often referred to as Data Hydration. Currently, my preferred library for this task is https://github.com/pleerock/class-transformer

Personally, I manage this operation at the server access layer by creating an API that handles XHR requests and serialization tasks.

In my previous role, we automated this process using code generation tools that also supported common validation patterns between the server and client codebases.

Answer 4

Why wasn't the decision made to use string-based enums?

To clarify, Enums in TypeScript can be utilized with both numbers and strings, where direct access is through number and reverse mapping via string (more information here).

Addressing your requirement

The main reason for abandoning raw enums is because

I am unable to directly read from JSONs that are string based...

You will encounter similar challenges when handling Dates since JSON lacks a date data type. To convert these, you would typically use new Date("someServerDateTime").

The same approach can be used to convert server-side enum (string) to TS enum (number), thanks to the reverse lookup MyEnum["someServerString"]

Data Transformation

This process of transforming server-side data into client-side active data is often referred to as Data Hydration. Currently, my preferred library for this task is https://github.com/pleerock/class-transformer

Personally, I manage this operation at the server access layer by creating an API that handles XHR requests and serialization tasks.

In my previous role, we automated this process using code generation tools that also supported common validation patterns between the server and client codebases.

Enums in Typescript that are based on strings

Answer №1

The approach of TypeScript towards Enums

Answer №2

Addressing your requirement

Data Transformation

Similar questions

A step-by-step guide on converting request.body to JSON in Django

Manipulate the order of JSON data columns when using the Json() function in ASP.NET MVC

Python: Converting Unicode to a List of Dictionaries

Invalid action has been dispatched by the effect:

Getting JSON data with D3.js: A step-by-step guide

Retrieve the data exclusively when transferring information from Laravel to JSON

Using C# to deserialize JSON with Inheritance

Error encountered when trying to convert a React Higher Order Component (HOC) to TypeScript: "Exported variable referencing private name"

The Discriminate Union is ineffective in handling function arguments

Angular - Collaborative HTML format function

Tips for utilizing array filtering for parent and child elements in Angular 11

What is the equivalent of a "Class" in Typescript for defining an "Interface"?

A guide on integrating API data with EJS templates in a Node.js application

Manipulating elements within nested JSON structures, including adding, updating, and deleting values

Value that is constantly changing for ngModel

Do you need to redeclare the type when using an interface with useState in React?

Utilizing next/image as a backgroundImage in a div container

Leveraging Ajax for transmitting JSON data and performing decoding operations

"Exploring the world of Python API integration and dictionary

Adapt the selection sort method for sorting an array of strings based on their ascending length