How can I iterate over a custom literal type in TypeScript?

TypescriptTypes

Typescript Problem Overview


I have defined a custom literal type in TypeScript:

export type Market = 'au'|'br'|'de';

Now I want to iterate over each possible Market without having to create an array of Market[] in the first place as it feels redundant and I may forget to add one option:

const markets: Market[] = ['au', 'br', 'de'];
markets.forEach((market: Market) => {
    console.log(market);
});

Is there a way to achieve that with TypeScript?

Typescript Solutions


Solution 1 - Typescript

For those of you visiting this question using TypeScript >= 3.4, I believe the best practice is now to create a constant array of strings and then use the type of operator.

Example:

export const markets = ['au', 'br', 'de'] as const;
export type Market = typeof markets[number];

markets.forEach((market: Market) => {
    console.log(market);
});

Solution 2 - Typescript

No, you can't do that, as pure type information like that doesn't exist at runtime.

It's hypothetically plausible to do the other way (define a normal list of strings, and then derive the 'au'|'br'|'de' type from that), but I don't think the TypeScript compiler (either 2.0 or 2.1) will currently infer that for you - as far as I know the type of markets will always be string[] normally.

The right answer to this is to use enums. They define a type with each of their values, and it's possible to get a list of all their string values: https://stackoverflow.com/questions/21293063/how-to-programmatically-enumerate-an-enum-type-in-typescript-0-9-5.

The one downside to enums is that their runtime representation is different (under the hood they're actually numbers, not strings). Your code can still treat them as nice readable values though, it's just you'll have to translate them to strings if do you ever you need them as string names at runtime. That's easy though: given enum MarketEnum and a value myEnumValue, MarketEnum[myEnumValue] is the value's name as a string).

Solution 3 - Typescript

Complete example for TypeScript 3.9 that I think is the easiest to follow:

enum SupportedLangugesEnum {
    'au' = 'au',
    'br' = 'br',
    'de' = 'de',
}

for (let entry in SupportedLangugesEnum) {
    if (isNaN(Number(entry))) {
        console.log(entry);
    }
}

for (let entry of Object.keys(SupportedLangugesEnum)) {
    console.log(entry);
}

for (let entry of Object.values(SupportedLangugesEnum)) {
    console.log(entry);
}

Will print:

enter image description here

Source:

https://stackoverflow.com/a/39372911/3850405

Solution 4 - Typescript

Here's an alternative way:

enum Market {
   'eu' = 'eu',
   'us' = 'us',
}

const all_possible_market_values = getStringValuesFromEnum(Market)

function getStringValuesFromEnum<T>(myEnum: T): (keyof T)[] {
   return Object.keys(myEnum) as any
}

The underlying representation is no longer numbers. It's the string.

"use strict";
var Market;

(function (Market) {
    Market["eu"] = "eu";
    Market["us"] = "us";
})(Market || (Market = {}));

const all_possible_market_values = getStringValuesFromEnum(Market);

function getStringValuesFromEnum(myEnum) {
    return Object.keys(myEnum);
}

Solution 5 - Typescript

Here's what I would do to create an array that contains all of your values at run-time and is checked at compile time:

export type Market = 'eu' | 'us'

export const MARKET_TYPES: Market[] = (() => {
   const markets: Market[] = ['eu', 'us']

   return markets.map((x: Market) => {
      if (x === 'eu') {
         return x
      } else if (x === 'us') {
         return x
      } else {
         const _exhaustive_check: never = x
         return _exhaustive_check
      }
   })
})()

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionk0pernikusView Question on Stackoverflow
Solution 1 - TypescriptkeithhackbarthView Answer on Stackoverflow
Solution 2 - TypescriptTim PerryView Answer on Stackoverflow
Solution 3 - TypescriptOgglasView Answer on Stackoverflow
Solution 4 - TypescriptJoseph AndaverdeView Answer on Stackoverflow
Solution 5 - TypescriptJoseph AndaverdeView Answer on Stackoverflow