String Union to string Array

by

Answer for TypeScript 3.4 and above

It is not really possible to convert a union to a tuple in TypeScript, at least not in a way that behaves well. Unions are intended to be unordered, and tuples are inherently ordered, so even if you can manage to do it, the resulting tuples can behave in unexpected ways. See this answer for a method that does indeed produce a tuple from a union, but with lots of caveats about how fragile it is. Also see microsoft/TypeScript#13298, a declined feature request for union-to-tuple conversion, for discussion and a canonical answer for why this is not supported.

However, depending on your use case, you might be able to invert the problem: specify the tuple type explicitly and derive the union from it. This is relatively straightforward.

Starting with TypeScript 3.4, you can use a const assertion to tell the compiler to infer the type of a tuple of literals as a tuple of literals, instead of as, say, string[]. It tends to infer the narrowest type possible for a value, including making everything readonly. So you can do this:

const ALL_SUITS = ['hearts', 'diamonds', 'spades', 'clubs'] as const;
type SuitTuple = typeof ALL_SUITS; // readonly ['hearts', 'diamonds', 'spades', 'clubs']
type Suit = SuitTuple[number];  // "hearts" | "diamonds" | "spades" | "clubs"

Playground link to code

Answer for TypeScript 3.0 to 3.3

It looks like, starting with TypeScript 3.0, it will be possible for TypeScript to automatically infer tuple types. Once that is released, the tuple() function you need can be succinctly written as:

export type Lit = string | number | boolean | undefined | null | void | {};
export const tuple = <T extends Lit[]>(...args: T) => args;

And then you can use it like this:

const ALL_SUITS = tuple('hearts', 'diamonds', 'spades', 'clubs');
type SuitTuple = typeof ALL_SUITS;
type Suit = SuitTuple[number];  // union type

Answer for TypeScript before 3.0

Since I posted this answer, I found a way to infer tuple types if you’re willing to add a function to your library. Check out the function tuple() in tuple.ts.

Using it, you are able to write the following and not repeat yourself:

const ALL_SUITS = tuple('hearts', 'diamonds', 'spades', 'clubs');
type SuitTuple = typeof ALL_SUITS;
type Suit = SuitTuple[number];  // union type

Original Answer

The most straightforward way to get what you want is to specify the tuple type explicitly and derive the union from it, instead of trying to force TypeScript to do the reverse, which it doesn’t know how to do. For example:

type SuitTuple = ['hearts', 'diamonds', 'spades', 'clubs'];
const ALL_SUITS: SuitTuple = ['hearts', 'diamonds', 'spades', 'clubs']; // extra/missing would warn you
type Suit = SuitTuple[number];  // union type

Note that you are still writing out the literals twice, once as types in SuitTuple and once as values in ALL_SUITS; you’ll find there’s no great way to avoid repeating yourself this way, since TypeScript cannot currently be told to infer tuples, and it will never generate the runtime array from the tuple type.

The advantage here is you don’t require key enumeration of a dummy object at runtime. You can of course build types with the suits as keys if you still need them:

const symbols: {[K in Suit]: string} = {
  hearts: '♥', 
  diamonds: '♦', 
  spades: '♠', 
  clubs: '♣'
}

Hope that helps.

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. Could not find a declaration file for module ‘module-name’. ‘/path/to/module-name.js’ implicitly has an ‘any’ type
  3. How to write PickByValue type?
  4. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  5. How to use moment.js library in angular 2 typescript app?
  6. Chaining RxJS Observables from http data in Angular2 with TypeScript
  7. How can I declare a global variable in Angular 2 / Typescript? [closed]
  8. How to test if two types are exactly the same
  9. Angular2 – Http POST request parameters
  10. How to get a subset of `keyof T` whose value, T[K] are callable functions in Typescript
  11. How do I check that a switch block is exhaustive in TypeScript?
  12. How to ‘map’ a Tuple to another Tuple type in Typescript 3.0
  13. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  14. What is target in tsconfig.json for?
  15. ES7 Object.entries() in TypeScript not working
  16. Why do subtypes need to be assigned to a variable before being used as a function argument?
  17. Typescript narrowing of keys in objects when passed to function
  18. ‘Property does not exist on type ‘never’
  19. Typescript type T or function () => T usage
  20. Flatten object with custom keys in Typescript
  21. TypeScript empty object for a typed variable
  22. ts An async function or method in ES5/ES3 requires the ‘Promise’ constructor
  23. How to declare a function that throws an error in Typescript
  24. Typescript: change function type so that it returns new value
  25. What does a TypeScript index signature actually mean?
  26. Why does a Typescript type conditional on `T extends undefined`, with T instantiated with `boolean`, resolve T to `never`?
  27. What exactly $event object do in Angular 2?
  28. new Typescript “satisfies” operator
  29. What are the differences between the private keyword and private fields in TypeScript?
  30. Narrowing a return type from a generic, discriminated union in TypeScript

Leave a Comment