How to Create a Union Type From an Array

There reaches a point in everyone's TypeScript journey when they try to use types at run-time. In my case, I wanted to map over each key in a Union to create a list:

type Item = "orange" | "apple" | "pear";

const Food: React.FC = () => (
  <ul>
    {/**
     * ❌ error:
     *   'Item' only refers to a type,
     *   but is being used as a value here
     */}
    {Item.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

Solution

Fortunately, as const is here to help:

// `as const` allows us to define `items` as a readonly array,
// with a type of its *actual* values (i.e. not string[])
const items = ["orange", "apple", "pear"] as const;

type Items = typeof items; // readonly ['orange', 'apple', 'pear']

type Item = Items[number]; // 'orange' | 'apple' | 'pear'

const Food: React.FC = () => (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);