This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Collect Related Strings in a String Enum in TypeScript

    Marius SchulzMarius Schulz

    As of TypeScript 2.4, it is now possible to define string enums, or more precisely, enums with string members. Just like any other numeric enum, string enums can be made constant using the const modifier so that they disappear entirely from the generated JavaScript; in this case, all enum values will be inlined into the output.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Let's say we want to use fetch to load some data from a remote JSON API. The first thing we want to do is specify an HTTP accept header of application JSON, the JSON media type. In this setup, I have the TypeScript compiler running in the background. If I save the file on the left, we can immediately see the output on the right.

    Right now, I'm specifying this media type inline, but I'd rather collect all media types in a central location. As of TypeScript 2.4, we can create string enums or technically enums with string members.

    I'll go ahead and create an enum media types. Within it, I'm going to define a member called JSON that maps to the application JSON media type. Down in our header subject, I can now reference the enum and replace the inline value. Let's now save this file and take a look at the compiled output.

    The compiler has generated a mapping object called media types. Below that declaration, it has inserted a function in which it assigns all the values to the keys. For example, here we have the key JSON, and we sign the value application JSON to it. We get a mapping from key to value.

    Notice that we're lacking a reverse mapping here. We're not mapping from application JSON to the key JSON. With other enum types in TypeScript that would be the case. If we had a numeric enum, for example, something like ports where we map the SSL port to 443, we can see that we get a generated output with two mappings. We're mapping from SSL to 443, and from 443, we map to SSL.

    Note that the usage looks exactly like it does in TypeScript. We simply reference the media types object and then its JSON property. Just like with any other enum in TypeScript, we can make our string enum a const enum by adding the const modifier.

    If we now compile the fie again with a const modifier in place, the generated output looks pretty different. First of all, you'll notice that it's smaller than before. This is especially important on the Web where we want to minimize the time spent transferring and parsing our JavaScript files. Second, we no longer have a runtime manifestation of the media types enum. Our application JSON string has been inlined into the output.

    The compiler also leaves a little comment there and tells us which enum case we used. This is not a problem for file size because if you use the minifier later, this comment will disappear.

    Note that because of the const modifier, we don't have a runtime manifestation of the media types enum right now. In JavaScript land, nobody can say media types dot and then use our enum. If you want your compiled code to contain the media types enum, you can either remove the const keyword or you can leave the const keyword in and change your TypeScript compiler configuration.

    Head over to your TS config JSON file, and set the preserve const enums option to true. With this configuration in place, the compiler will still do the inlining, but it will also emit the enums into the generated JavaScript code.

    Discuss

    Discuss