How to create Class-based Enums in Javascript/Typescript

Question

I have this python code that I'm trying to convert to Javascript/Typescript

import enum

class Shape(enum.Enum):
    RECTANGLE = 0
    CIRCLE = 1
    TRIANGLE = 2
    OTHER = 3

print(isinstance(data, Shape))

In Typescript, I can use enums, but this is not what I'm looking for. I need the ability to do this:

const data = new Shape().RECTANGLE;
console.log(data instanceof Shape); // should return true

which wouldn't be possible to do using enums or objects.

EDIT: What's the syntax to build such a class-based enum in Typescript?

Can you explain more? `new Shape()` is obviously an `instanceof Shape`, but why would `someShape.RECTANGLE` also be an `instanceof Shape`? How is this used? — Alex Wayne, Jan 26 '21 at 17:34
@AlexWayne I'm trying to get the syntax for creating such a "class-based enum" in typescript — Bassem, Jan 26 '21 at 17:44
Something like `const Shapes = {RECTANGLE: "RECTANGLE", OTHER: "OTHER"}; const data = Shapes.OTHER; console.log(data in Shapes);` — Charlie Bamford, Jan 26 '21 at 17:55
So please explain what is a "class-based enum" means to you exactly? How is this used? — Alex Wayne, Jan 26 '21 at 17:56
Thanks @Alex, that works, but I'm still curious to see if there is a possibility to re-create the same python enum class in JS/TS — Bassem, Jan 26 '21 at 18:00
I looked at how typescript's enum transpiles. You can do `enum Shapes = {/* whatever*/} ` then do `"RECTANGLE" in Shapes` — Charlie Bamford, Jan 26 '21 at 18:08

DavidRR · Accepted Answer · 2021-01-26T22:06:56.730

There isn't a specific "syntax" in TypeScript for defining a class-based enum. But here's an example of a class named Shape that recognizes four types of shapes.

Shape provides a constructor that accepts an argument shapeType. If shapeType is not a recognized type, create throws an exception.

class Shape {
  constructor(public shapeType: number) {
    if (!Shape.types.includes(shapeType)) {
      throw new Error(`Value ${shapeType} is not a valid shape type.`);
    }    
  }

  static readonly rectangle: number = 0;
  static readonly circle: number = 1;
  static readonly triangle: number = 2;
  static readonly other: number = 3;

  static get types(): number[] {
    return [
      Shape.rectangle,
      Shape.circle,
      Shape.triangle,
      Shape.other,  
    ];
  }
}

Usage:

const shape1: Shape = new Shape(Shape.triangle);
const isInstanceOf: boolean = shape1 instanceof Shape;
console.log(`Is Shape? ${isInstanceOf}; type is ${shape1.shapeType}`); // Is Shape? true; type is 2

try {
  const shape2: Shape = new Shape(42);
} catch (e) {
  console.log(e.message); // Value 42 is not a valid shape type.
}

For reasons why you might want to move from an enumeration to a class, see C# vs Java Enum (for those new to C#).

score 2 · Answer 2 · answered Jan 26 '21 at 18:23

2

Enums are a typescript concept, and are documented here. When you write an enum, typescript is creating a plain js object that matches the options of the enum, so the "in" operator can be used to check whether the provided value is a member of the enum.

Typescript enum.

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

What that is in javascript.

var Direction = {
  '0': 'Up',
  '1': 'Down',
  '2': 'Left',
  '3': 'Right',
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3
}

Checking to see if a value is a member of the enum can be done with

const foo = "Up";

// Unsafe, but quick and easy.
console.log(foo in Direction); // returns true.
console.log("toString" in Direction); // also returns true.

// Safe.
console.log(Direction.hasOwnProperty(foo)); // returns true.
console.log(Direction.hasOwnProperty(foo)); // returns false.

answered Jan 26 '21 at 18:23

Charlie Bamford

1,268
5
18

Thanks Charles. Although this does help, it's not exactly what I'm looking for. I'd rather see an example using a class instead of object. – Bassem Jan 26 '21 at 18:28
That's not how typescript does enums. You could roll your own implementation, but you would be on your own with that. – Charlie Bamford Jan 26 '21 at 18:34
I don't necessarily need to use `enum`, just a basic `class` instead – Bassem Jan 26 '21 at 18:41

score 0 · Answer 3 · answered Jan 26 '21 at 18:12

0

This is how you can create Enums in JS/TS -

const enum OneDBServerPermission {
  RECTANGLE = 0
  CIRCLE = 1
  TRIANGLE = 2
  OTHER = 3
}

If you want to use it in other classes you can use export keyword

export const enum OneDBServerPermission {
  RECTANGLE = 0
  CIRCLE = 1
  TRIANGLE = 2
  OTHER = 3
}

answered Jan 26 '21 at 18:12

Anjs

586
4
11

I know how to create enums in JS/TS, thanks. I'm looking for class-based enums though. – Bassem Jan 26 '21 at 18:26

How to create Class-based Enums in Javascript/Typescript

3 Answers3