Extending Enums in Typescript: A Comprehensive Guide

Question

Extending Enums in Typescript: A Comprehensive Guide

How can you work with a list of constants or Enum? Here is an example:

enum MyList
{
    A,
    B
}

enum MyList2
{
    C
}


function process<T>(input:MyList | T):void
{

}

process<MyList2>(123) // The compiler does not recognize that 123 is not supported

typescript

Answer 1

Answer №1

This issue has been around for a while, especially with numeric enums. It seems that due to some backwards compatibility concerns, a number can be assigned to a numeric enum without triggering an error:

enum E {
  V = 100
}
const num = 100;
const e: E = num; // no error 🤔

In addition, numeric enums are designed to function as bit fields, which means they do not restrict the values to only those declared in the enum:

enum Color {
  RED = 1,
  GREEN = 2,
  BLUE = 4
}
const red: Color = Color.RED; // 1
const yellow: Color = Color.RED | Color.GREEN; // 3 🤔
const white: Color = Color.RED | Color.GREEN | Color.BLUE; // 7 🤔
const octarine: Color = Math.pow(Color.BLUE - Color.RED, Color.GREEN); // 9 🤪

It's quite strange that you can perform any mathematical operation with a numeric enum. Essentially, any number can be assigned to any numeric enum, and vice versa.

To avoid this behavior, you might want to consider creating your own types and values with controlled behavior instead of using enums. While more verbose, it can help meet your requirements:

const MyList = {
  A: 0,
  B: 1
} as const;
type MyList = typeof MyList[keyof typeof MyList]

const MyList2 = {
  C: 0
} as const;
type MyList2 = typeof MyList2[keyof typeof MyList2]

These custom types behave similarly to enums but are much stricter about their behavior:

function test<T>(input: MyList | T): void {}

test(0); // okay
test(1); // okay
test(2); // okay, 2 is inferred as T
test<MyList2>(123); // error! 123 is not assignable to 0 | 1

I hope this information is helpful. Best of luck!

Link to code

Answer 2

This issue has been around for a while, especially with numeric enums. It seems that due to some backwards compatibility concerns, a number can be assigned to a numeric enum without triggering an error:

enum E {
  V = 100
}
const num = 100;
const e: E = num; // no error 🤔

In addition, numeric enums are designed to function as bit fields, which means they do not restrict the values to only those declared in the enum:

enum Color {
  RED = 1,
  GREEN = 2,
  BLUE = 4
}
const red: Color = Color.RED; // 1
const yellow: Color = Color.RED | Color.GREEN; // 3 🤔
const white: Color = Color.RED | Color.GREEN | Color.BLUE; // 7 🤔
const octarine: Color = Math.pow(Color.BLUE - Color.RED, Color.GREEN); // 9 🤪

It's quite strange that you can perform any mathematical operation with a numeric enum. Essentially, any number can be assigned to any numeric enum, and vice versa.

To avoid this behavior, you might want to consider creating your own types and values with controlled behavior instead of using enums. While more verbose, it can help meet your requirements:

const MyList = {
  A: 0,
  B: 1
} as const;
type MyList = typeof MyList[keyof typeof MyList]

const MyList2 = {
  C: 0
} as const;
type MyList2 = typeof MyList2[keyof typeof MyList2]

These custom types behave similarly to enums but are much stricter about their behavior:

function test<T>(input: MyList | T): void {}

test(0); // okay
test(1); // okay
test(2); // okay, 2 is inferred as T
test<MyList2>(123); // error! 123 is not assignable to 0 | 1

I hope this information is helpful. Best of luck!

Link to code

Extending Enums in Typescript: A Comprehensive Guide

Answer №1

Similar questions

Compatibility issues arise with static properties in three.d.ts when using the most recent version of TypeScript

Issues with Typegoose and Mongoose Enums when utilizing an array of strings

Utilize string variables within TypeScript's enumeration feature

Determine the full location information with the help of Google Maps SDK without the need

Issues encountered when attempting to use @rollup/plugin-json in conjunction with typescript

Navigating a vast JSON dataset containing identical key names: A step-by-step guide

Module not found in Typescript

What are the steps to resolve routing issues within an Angular component integrated into an ASP.NET Core web application?

Issue with Angular 4 Routing: Links are opening in new window instead of within router-outlet

Search for an element deep within a tree structure, and once found, retrieve the object along with the specific path leading to

How to import a page from a different component in the Next.js application router

Guide to incorporating ThreeJS Collada loader with TypeScript / Angular CLI

Encountering an issue during the initialization of the Google Passportjs

Determining the generic type argument of a class can be unsuccessful due to the specific properties within that class

The function with which you are trying to use 'new' does not have a call or construct signature

Implementing service injection within filters in NestJS

Deactivate the button until the input meets validation criteria using Angular

Deciding between bundling a Typescript package and using tsc: When is each approach the best choice

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

I seem to be missing some properties in the request body schema. Why am I receiving an incomplete model for