How do I compose an enum from another enum in Typescript?

Answering my own question in case others are looking to accomplish something similar. . .

While it doesn't seem to be possible to accomplish this task with enums, I have managed something in the same spirit with 'Template Literal Types'.

type Element =
  | "Air"
  | "Fire"
  | "Earth"
  | "Water";

type Skills =
  | "Unarmed"
  | "LightArmor"
  | `${Element}Magic`;

This yields a string union type like so: "Unarmed" | "LightArmor" | "AirMagic" | "FireMagic" | "EarthMagic" | "WaterMagic"

Resources

https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

https://www.typescriptlang.org/play?#code/C4TwDgpgBAogNhAthAdsAKuaBeKAiAQQEsAnPKAH3wDFSJyq8YBDE4ACwfwHVngIyAbgCwAKDGhIUAMoBrInDgBnKLjwBVFK2QATLngAyRAObtgBEogD2ZSlAAGAEgDe8JKgxYAvgFlmxogBjexFxUQAzAFcUQOAiKxQofiVgAAoleUUALhlM5QBKKGcxKChAhKUrBAA6OCtjdLz8sS8xMQB6dqhMKWYoFJIiFGModgFocJsoZkjgK3LEMAQ4hOqJCBTUwlI-AMC8ZrCgA

Basically you're asking to compose and extend enum with each other, like extending and composing their inner members, at compile time and with simple set operations.

Shortly: you can't.

Since enums are defined at compile time, their set of member is static and can't be derived from other enums. You can have computed members, but that's for the value they hold in.

For you to access the enum and manipulate like you've asked in the question, you'd need access to metaprogramming onto your enums, i.e. using decorators onto them. But that's currently not possible in Typescript.

My advice would be to use a class and / or a type. Refer to this answer for more.

See the working example on TypeScript Playground. (Quick & Dirty)

While there might be other solutions more suitable for your case, it is indeed possible to solve this your way, but it requires advanced TypeScript. Whether it's worth the effort is up to you.

Solve eventual name conflicts

First you need to rename Element to ElementType as it could conflict with the built-in DOM element (e.g. in a browser application). I wanted to execute it on the TypeScript playground, and had to rename it there:

enum ElementType {
  Air,
  Fire,
  Earth,
  Water,
}

Map Enum Keys by Adding a Suffix

And at this point it is getting a little bit complicated. You need a so called utility function to map enum keys with a suffix and add additional keys like in your case. We create first a type for this mapped enum:

type MappedEnumType<
  T extends Record<string, string | number>,
  Suffix extends string,
> = {
  [key in keyof T as `${string & key}${Suffix}`]: number;
} & Record<string, number>;

Implement the Utility Function

Now we can begin with our utility function:

function createSkillsEnum<
  T extends Record<string, string | number>,
  Suffix extends string,
>(enumObj: T, suffix: string): MappedEnumType<T, Suffix> {
  // Second Enum keys
  const result: Record<string, number> = {
    Unarmed: 100,
    LightArmor: 101,
  };

  // Firs Enum Keys incl. Suffix
  for (const key in enumObj) {
    if (!isNaN(Number(key))) {
      // Filter numeric keys
      const value = enumObj[key];
      if (typeof value === 'string') {
        result[`${value}${suffix}`] = Number(key);
      }
    }
  }

  return result as MappedEnumType<T, Suffix>;
}

Create the new Enum

The rest is easy now, just create the new SkillsEnum with MappedEnumType Keys

const Skills = createSkillsEnum(ElementType, "Magic");

Usage

console.log(Skills);
// Output: { Unarmed: 100, LightArmor: 101, AirMagic: 0, FireMagic: 1, EarthMagic: 2, WaterMagic: 3 }
console.log(Skills.AirMagic); // Output: 0
console.log(Skills.FireMagic); // Output: 1
console.log(Skills.Unarmed); // Output: 100
console.log(Skills.LightArmor); // Output: 101

Handling TypeScript Warnings/Errors

If you get (due to your tsconfig.json settings) an error or a warning line Property 'AirMagic' comes from an index signature, so it must be accessed with ['AirMagic'].ts(4111), and you have to do additional checks:

type SecondEnumType = {
  Unarmed: number;
  LightArmor: number;
};

type MappedEnumType<
  T extends Record<string, string | number>,
  Suffix extends string,
> = {
  [key in keyof T as `${string & key}${Suffix}`]: number;
} & SecondEnumType;

And change the usage a little bit:

// Usage
console.log(Skills);
// Output: { Unarmed: 100, LightArmor: 101, AirMagic: 0, FireMagic: 1, EarthMagic: 2, WaterMagic: 3 }
console.log(Skills['AirMagic']); // Output: 0
console.log(Skills['FireMagic']); // Output: 1
console.log(Skills.Unarmed); // Output: 100
console.log(Skills.LightArmor); // Output: 101