How do I create a type from a string array in TypeScript?

Question

What is the best way of making a TypeScript type based on an array of strings? I am on version 2.6.2. The array is long and I do not want to repeat myself by duplicating the string values in an Enum declaration.

What I want to do is something like this:

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
export type Color = convertStringArrayToType(colors);

The following solution (source) works fine, but feels hacky:

/** Utility function to create a K:V from a list of strings */
function strEnum<T extends string>(o: Array<T>): {[K in T]: K} {
  return o.reduce((res, key) => {
    res[key] = key;
    return res;
  }, Object.create(null));
}

/**
  * Sample create a string enum
  */

/** Create a K:V */
const Direction = strEnum([
  'North',
  'South',
  'East',
  'West'
])
/** Create a Type */
type Direction = keyof typeof Direction;

What's hacky about it ? Hard to understand maybe, but it uses standard advanced types in Typescript, I wouldn't change a thing — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jul 25, 2018 at 14:49
Note typescript also has string enums in recent versions enum Direction { North = 'North', South = 'South', East = 'East', West = 'West' } but it depends what you are trying to do — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jul 25, 2018 at 14:51
@TitianCernicova-Dragomir Yes, but I don't want to repeat the text unnecessarily, as I mentioned — Stewart
– Stewart, Commented Jul 25, 2018 at 14:54
Then it looks fine, what don't you like about the solution ? — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jul 25, 2018 at 14:59
Possible duplicate of Typescript derive union type from tuple/array values — jcalz
– jcalz, Commented Jul 25, 2018 at 15:29

Guido Dizioli · Accepted Answer · 2020-07-14 17:19:54Z

131

Since Typescript 3.4, you could use as const and generate a union type from an array as follows

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] as const;
export type Color = typeof colors[number]; // 'red'|'orange'|'yellow'|'green'|'blue'|'indigo'|'violet'

answered Jul 14, 2020 at 17:19

Guido Dizioli

2,3863 gold badges20 silver badges30 bronze badges

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

2 Comments

xaunlopez Over a year ago

What is the magic number thing which converts it to 'something' | .. from ['something'] ?

Guido Dizioli Over a year ago

Thats a good question. Basically you are creating a type Color which has the type of the array colors accessed at any index. Since number can take any numeric value, the type created is a union type of all the possible accessed entries of the array ('red'|'orange'|'yellow'|'green'|'blue'|'indigo'|'violet')

Sameera · Accepted Answer · 2021-06-22 05:43:45Z

3

Building on @guido-dizioli's answer, you can create a reusable function to create a type dynamically and still benefit from IntelliSense:

One catch is that the caller needs to define the array with as const:

const properties = [
    "prepare", 
    "loadSession", 
    "proceedBasedOnSession", 
    "fetchConnection"
] as const;

function createObject<T extends readonly string[]>(steps: T): Record<T[number], object> {
    const typed = {} as Record<string, string>;
    steps.forEach(step => typed[step] = step);
    return typed as unknown as Record<T[number], object>;
}

answered Jun 22, 2021 at 5:43

Sameera

1,1231 gold badge13 silver badges37 bronze badges

Collectives™ on Stack Overflow

How do I create a type from a string array in TypeScript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related