Is it possible to create a typescript type from an array?

Question

I often use code such as

export type Stuff = 'something' | 'else'
export const AVAILABLE_STUFF: Stuff[] = ['something', 'else']

This way I can both use the type Stuff, and iterate over all the available stuffs if need be.

This works, but it feels like repeating twice the information. And you have to be careful because an update of either Stuff or AVAILABLE_STUFF also requires an update of its counterpart.

Is there a better way to define the type from the Array, or even to somewhat use the array to type some data ?

Do you want to fill the array with the types or what exactly is the use case to use the array like that? — Murat Karagöz
– Murat Karagöz, Commented Mar 6, 2019 at 10:00
@MuratKaragöz kind of. I would like to be able to profit from the benefits of both const x: Stuff and AVAILABLE_STUFF.forEach(stuff => ...) with only one declaration. I don't care if I have to declare an array, a type, or whatever else that I yet don't know about :) — aherve
– aherve, Commented Mar 6, 2019 at 10:02
Have you considered using a string enum? That looks like it should do what you want. It is a type, and you can iterate the values. — sleske
– sleske, Commented Mar 6, 2019 at 10:03

ivanjermakov · Accepted Answer · 2022-06-07 18:50:39Z

47

With TypeScript v3.4 const assertions:

export const AVAILABLE_STUFF = <const> ['something', 'else'];
export type Stuff = typeof AVAILABLE_STUFF[number];

edited Jun 7, 2022 at 18:50

ivanjermakov

1,35015 silver badges24 bronze badges

answered Jan 21, 2021 at 15:47

Archit Garg

3,3172 gold badges16 silver badges22 bronze badges

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

3 Comments

Norfeldt Over a year ago

Why does it have to be AVAILABLE_STUFF[number] and not just AVAILABLE_STUFF[] ?

Pierre Criulanscy Over a year ago

Because the "keys" in arrays are number.

Steve Chambers Over a year ago

This nearly worked for me but I had to do ['something', 'else'] as const (as const instead of <const>) and then (typeof AVAILABLE_STUFF)[number] (added brackets).

Titian Cernicova-Dragomir · Accepted Answer · 2019-03-06 10:27:47Z

16

One built-in option would be to use an enum instead of the type and array approach.

export enum Stuff {
    something = 'something',
    else = 'else',
}

export const AVAILABLE_STUFF: Stuff[] = Object.values(Stuff);

Another option is to extract the type from the type of AVAILABLE_STUFF. To do this we must force the compiler to infer a tuple of string literals for AVAILABLE_STUFF. This can be done in 3.4 with as const or before 3.4 using an extra function. After AVAILABLE_STUFF is a tuple type we can just use a type query to get the type of the elements:

export const AVAILABLE_STUFF = (<T extends string[]>(...o: T)=> o)('something', 'else'); // typed as ["something", "else"]
// export const AVAILABLE_STUFF = ['something', 'else'] as const; // typed as ["something", "else"]  in 3.4
export type Stuff = typeof AVAILABLE_STUFF[number] //"something" | "else"

A few explanations of the above code. typeof AVAILABLE_STUFF gives us the type of the constant (["something", "else"]) to get the [number] is called a type query and will give us the type of an item in the tuple.

The (<T extends string[]>(...o: T)=> o) is just an IIFE we use to force the compiler to infer a string literal tuple type. It has to be generic as the compiler will only infer literal types and tuples in certain cases (a type parameter with a constraint of string being one of them). The as const version is what I would recommend using when it becomes available as it is more readable.

edited Mar 6, 2019 at 10:27

answered Mar 6, 2019 at 10:06

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

6 Comments

Paleo Over a year ago

In the second solution, I see that the type Stuff is correctly inferred but I don't understand the syntax. What is the role of [number] in typeof AVAILABLE_STUFF[number]?

Titian Cernicova-Dragomir Over a year ago

@Paleo added some explanations let me know if it is clearer now.

aherve Over a year ago

Second option works for me, but I'm still puzzled about enum. when I try const x: Stuff = 'something' I get an error Type '"something"' is not assignable to type 'Stuff'. Am I doing something wrong ?

Titian Cernicova-Dragomir Over a year ago

@aherve it is not a perfect replacement. you will need to use let a: Stuff = Stuff.something in TS code. At runtime the value of a will be something

Titian Cernicova-Dragomir Over a year ago

@MoshFeu This should work: typescriptlang.org/play/…

|

Paleo · Accepted Answer · 2019-03-06 10:09:53Z

8

Another possibility is to create an object and use keyof. I recommend that way only if you have anything useful to store as values (in replacement of null in the code below).

const stuffDict = {
  something: null,
  else: null,
}

type Stuff = keyof typeof stuffDict
const AVAILABLE_STUFF = Object.keys(stuffDict) as Stuff[]

answered Mar 6, 2019 at 10:09

Paleo

24k5 gold badges74 silver badges84 bronze badges

Collectives™ on Stack Overflow

Is it possible to create a typescript type from an array?

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest