Typescript is a typing system to turn Javascript into a typed language during development. This can be a lifesaver if we can get over the learning curve.
One of the things Typescript gives us is an enum, which allows us to define a set of named constant values. We can use enums for lots of different things, and one way we can use them is for configuration via environment:
Let’s say we have a system we are working on and we have 4 different URLs depending on which environment we are in:
Here is how we setup our enum in Typescript:
export enum Environment {
LCL = "http://localhost"
DEV = "http://dev.example.com.com",
STG = "https://stg.example.com.com",
PRD = "https://prd.example.com"
}
## Getting an enum value from a string
Now, let's say we read a string from the environment in our application (we use the *getValueFromEnvironment* method that
returns a *string*), and we need to make sure it is a valid value for the enum:
value for the enum:
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-typescript" data-lang="typescript"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">environmentValue</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getValueFromEnvironment</span>(<span style="color:#e6db74">"APP_ENV"</span>)
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">env</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Environment</span>[<span style="color:#a6e22e">environmentValue</span> <span style="color:#66d9ef">as</span> <span style="color:#a6e22e">keyof</span> <span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">Environment</span>]
</code></pre></div>
## Iterating through all enum values
Finally, during testing it can be helpful to iterate through all values of an enum. We might have a method that
accepts the enum as an argument and we want to test every possible enum value with that method.
We might hard-code each value, but this is painful and error-prone. We have to remember to update the test each
time we add an enum value.
We can do better than that. Each enum is also a Javascript *Object*, so we can use *Object.keys* to get all of
the key values as strings. Knowing our trick from above, we can easily iterate through the enum values and test
all of them. This lets us add enum values as we need to without needing to update the test code to cover the new
values!
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-typescript" data-lang="typescript">Object.<span style="color:#a6e22e">keys</span>(<span style="color:#a6e22e">Environment</span>).<span style="color:#a6e22e">forEach</span>((<span style="color:#a6e22e">environmentKeyValue</span>) <span style="color:#f92672">=></span> {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">env</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">Environment</span>[<span style="color:#a6e22e">environmentKeyValue</span> <span style="color:#66d9ef">as</span> <span style="color:#a6e22e">keyof</span> <span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">Environment</span>]
<span style="color:#75715e">// env is now equivalent to Environment.PRD, Environment.STG, Environment.DEV, or Environment.LCL
</span><span style="color:#75715e"></span> <span style="color:#75715e">// expect(myFancyTest(env)).toEqual(...)
</span><span style="color:#75715e"></span>}
</code></pre></div>
## Conclusion
In this article, we saw a trick with Typescript enums that can make life much easier - how to convert a string
to an enum value and how to use *Object.keys* to iterate over all the values.