String enums in typescript

Question

I would like to have a set of string enums in typescript so I can do things like having the user select from a set of predefined options.

I found a good solution in this answer: How to convert string to enum in TypeScript?

However, that only works for single words... (basically, the above allows you to get the enum name value -- and that can't have a space in it).

So, further looking, I found this person with a workaround: Workaround for string based enums in typescript

That will allow something like this to work:

export enum EventType {
    Photoshoot = <any>"Photoshoot",
    BookingMeeting = <any>"Booking Meeting",
    PostShootMeeting = <any>"Post Shoot Meeting",
    Purchase = <any>"Purchase",
    Print = <any>"Print"
}

The only response basically says doing so is unsafe. (but I should say, it DOES work -- I can type EventType.dot ... and Atom editor gives me the 5 camel-case options to select from (keeping things consistent in the code) I can then use that to have the string value spit out to give my users a good space-filled experience, in the future I can change the enum and for different languages/option wording without messing with the 'code' at all, etc...

Is there a better way to do this? I'd rather not do it 'unsafely' -- but I don't know of any other way.

You could define class with static read-only strings instead of enum — Aleksey L.
– Aleksey L., Commented Jan 24, 2017 at 5:54
based on this open issue github.com/Microsoft/TypeScript/issues/1206, I think your work around is the best approach at the moment. In fact the work around is listed in one of the comments. — shusson
– shusson, Commented Jan 24, 2017 at 6:22

Chandan Rai · Accepted Answer · 2017-01-24 05:26:21Z

5

TypeScript enums are number based. You can use string literals with union types to mock a string based enum as in the CardinalDirection example below.

type CardinalDirection =
    "North"
    | "East"
    | "South"
    | "West";

function move(distance: number, direction: CardinalDirection) {
    // ...
}

move(1,"North"); // Okay
move(1,"Nurth"); // Error!

here's more: https://basarat.gitbooks.io/typescript/content/docs/types/literal-types.html

the string enums are in the offing https://github.com/Microsoft/TypeScript/issues/3192

edited Jan 24, 2017 at 5:26

answered Jan 24, 2017 at 5:21

Chandan Rai

10.5k2 gold badges22 silver badges29 bronze badges

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

3 Comments

lowcrawler Over a year ago

How does this get me the "give my developers specific options that doesn't result in hard-coding strings into the business logic code" ? In the OP solution, one could change the string "Photoshoot" to "Photo shoot" without any other coding changes (because all the business logic code refers to EventType.Photoshoot. It seems that in this solution, you'd need to find every use of "North" in the business code if you ever wanted to change it to "nerf". Perhaps I'm missing something, however... ? (glad string enums are being discussed for future typescript)

thedayturns Over a year ago

@lowcrawler If you want to change "North" to "nerf", just go to where type CardinalDirection is defined in the code and change "North" to "nerf". Now the compiler will give an error on every use of "North" where a CardinalDirection is expected, so you can easily find them all.

shusson Over a year ago

@thdayturns my mistake, as you point out you will get a compiler error.

KyleMit · Accepted Answer · 2022-01-02 01:31:48Z

1

Update for TS 2.4 - 2017+

String Enums are available starting in TypeScript 2.4 using the following syntax:

enum Color {
    Red = "red",
    Green = "green",
    Blue = "blue"
}

Demo in TS Playground

Comments

Rodris · Accepted Answer · 2017-07-12 12:33:14Z

0

You have other options, as described in Reverse-Mapping for String Enums.

Here is an example:

type EventType = "Photoshoot" | "Booking Meeting" | "Post Shoot Meeting" | "Purchase" | "Print";
const EventType {
    get Photoshoot(): EventType { return "Photoshoot"; },
    get BookingMeeting(): EventType { return "Booking Meeting"; },
    get PostShootMeeting(): EventType { return "Post Shoot Meeting"; },
    get Purchase(): EventType { return "Purchase"; },
    get Print(): EventType { return "Print"; }
}

answered Jul 12, 2017 at 12:33

Rodris

2,8882 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

String enums in typescript

3 Answers 3

3 Comments

Update for TS 2.4 - 2017+

Further Reading

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Update for TS 2.4 - 2017+

Further Reading

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related