Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript derive union type from tuple/array values

Tags:

typescript

Say I have list const list = ['a', 'b', 'c']

Is it possible to derive from this value union type that is 'a' | 'b' | 'c'?

I want this because I want to define type which allows only values from static array, and also need to enumerate these values at runtime, so I use array.

Example how it can be implemented with an indexed object:

const indexed = {a: null, b: null, c: null}
const list = Object.keys(index)
type NeededUnionType = keyof typeof indexed

I wonder if it is possible to do it without using an indexed map.

like image 855
WHITECOLOR Avatar asked Jul 22 '17 06:07

WHITECOLOR


5 Answers

UPDATE Feb 2019

In TypeScript 3.4, which should be released in March 2019 it will be possible to tell the compiler to infer the type of a tuple of literals as a tuple of literals, instead of as, say, string[], by using the as const syntax. This type of assertion causes the compiler to infer the narrowest type possible for a value, including making everything readonly. It should look like this:

const list = ['a', 'b', 'c'] as const; // TS3.4 syntax
type NeededUnionType = typeof list[number]; // 'a'|'b'|'c';

This will obviate the need for a helper function of any kind. Good luck again to all!


UPDATE July 2018

It looks like, starting with TypeScript 3.0, it will be possible for TypeScript to automatically infer tuple types. Once 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 list = tuple('a','b','c');  // type is ['a','b','c']
type NeededUnionType = typeof list[number]; // 'a'|'b'|'c'

Hope that works for people!


UPDATE December 2017

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 list = tuple('a','b','c');  // type is ['a','b','c']
type NeededUnionType = typeof list[number]; // 'a'|'b'|'c'

Good luck!


ORIGINAL July 2017

One problem is the literal ['a','b','c'] will be inferred as type string[], so the type system will forget about the specific values. You can force the type system to remember each value as a literal string:

const list = ['a' as 'a','b' as 'b','c' as 'c']; // infers as ('a'|'b'|'c')[]

Or, maybe better, interpret the list as a tuple type:

const list: ['a','b','c'] = ['a','b','c']; // tuple

This is annoying repetition, but at least it doesn't introduce an extraneous object at runtime.

Now you can get your union like this:

type NeededUnionType = typeof list[number];  // 'a'|'b'|'c'.

Hope that helps.

like image 127
jcalz Avatar answered Sep 26 '22 17:09

jcalz


Update for TypeScript 3.4:

A new syntax called "const contexts" that will arrive in TypeScript 3.4 will allow for an even simpler solution that doesn't require a function call as demonstrated. This feature is currently in review as seen in this PR.

In short, this syntax allows for the creation of immutable arrays that have a narrow type (i.e. the type ['a', 'b', 'c'] instead of ('a' | 'b' | 'c')[] or string[]). This way, we can create union types from literals as easy as shown below:

const MY_VALUES = <const> ['a', 'b', 'c']
type MyType = typeof MY_VALUES[number]

In alternative syntax:

const MY_VALUES = ['a', 'b', 'c'] as const
type MyType = typeof MY_VALUES[number]
like image 24
ggradnig Avatar answered Sep 25 '22 17:09

ggradnig


I assume you are living on TypeScript after March 2019 now. (It's November 2021)

I'm just extending the top answer with an exportable utility function:

// Your handmade utils' library file
export type UnionOfArrayElements<ARR_T extends Readonly<unknown[]>> = ARR_T[number];
// Usage
const a = ["hi", "bye", 3, false] as const;
type ta = UnionOfArrayElements<typeof a>; // false | "hi" | "bye" | 3

const b = [4, 5, 6];
type tb = UnionOfArrayElements<typeof b>; // number

like image 38
Aidin Avatar answered Sep 23 '22 17:09

Aidin


It is not possible to do this with Array.

The reason is, even if you declare the variable as const, the content of an array can still change, thus @jonrsharpe mention this is runtime.

Given what you want, it may be better to use interface with keyof:

interface X {
    a: string,
    b: string
}

type Y = keyof X  // Y: 'a' | 'b'

Or enum:

enum X { a, b, c }
like image 39
unional Avatar answered Sep 25 '22 17:09

unional


If using a an object for storing "constants", this is a way to implement the same idea:

(Note the 'as const' to change the type of keyOne and keyTwo from string to literal.)

const configObj = {
  keyOne: 'literalTypeValueOne' as const,
  keyTwo: 'literalTypeValueTwo' as const,
};

const typeValues = [configObj.keyOne, configObj.keyTwo] as const;
type MyType = typeof typeValues[number];
like image 21
Bjørnar Hvidsten Avatar answered Sep 25 '22 17:09

Bjørnar Hvidsten