Javascript ES6 - 在类内部使用的枚举就像静态枚举一样在外部使用

Javascript ES6 - Enums inside classes used outside like a static enum

提问by Maxime M.

I'd like to ask if it's possible to add an enum similar to:

我想问一下是否可以添加类似于以下内容的枚举：

STATES = {
    WIP: "Work in progress",
    ONLINE: "Online",
    ONLINE_MODIFIED: "Online, modified",
    HIDDEN: "Hidden"
}

inside a Class, and be able to use it in some other file with something similar to: object.updateState(Class.STATES.HIDDEN)without having to construct a new object like boxObject.updateState(new Box().STATES.HIDDEN)

在一个类中，并且能够在其他一些文件中使用它，类似于：object.updateState(Class.STATES.HIDDEN)而不必构造一个新对象，如boxObject.updateState(new Box().STATES.HIDDEN)

Thank you.

谢谢你。

采纳答案by n00dl3

like this :

像这样 ：

export class Foo{}
Foo.SomeStaticEnum={BAR:"bar"};

but exporting a const seems more appropriate...

但是导出 const 似乎更合适...

export const FOO={BAR:"bar"};

回答by pablogq

You can achieve static data properties in multiple ways:

您可以通过多种方式实现静态数据属性：

Use assignment:

使用赋值：

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {};

Box.STATES = STATES;
console.log(Box.STATES.WIP); // Work in progress is the output

Use Object.defineProperty:

使用 Object.defineProperty：

When you use Object.definePropertyyou could make it read-only

当您使用Object.defineProperty 时，您可以将其设为只读

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {};

Object.defineProperty(Box, 'STATES', {
  value: STATES,
  writable: false, // makes the property read-only
});

console.log(Box.STATES.WIP); // Work in progress is the output

Use static getter:

使用静态吸气剂：

You can use ES6 static getter syntax to add the property in the class definition. You can make it read-only too defining just the getter.

您可以使用 ES6 静态 getter 语法在类定义中添加属性。您也可以将其设为只读，仅定义 getter。

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {
  static get STATES() {
    return STATES;
  }
}

console.log(Box.STATES.WIP); // Work in progress is the output

All that being said, I agree with n00dl3. If you are using ES6 modules, using a named export seems more appropiate:

尽管如此，我同意n00dl3。如果您使用 ES6 模块，使用命名导出似乎更合适：

export const BOX_STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

export default class Box {};

So you can import it like this:

所以你可以像这样导入它：

import { BOX_STATES } from './path-to-box';

console.log(BOX_STATES.WIP); // Work in progress is the output

回答by Anandaraja_Srinivasan

If you don't need pure ES6 and can use Typescript, please prefer it. Typescript has a nice ENUMwith export options

如果你不需要纯 ES6 并且可以使用 Typescript，请选择它。Typescript 有一个很好的ENUM，带有导出选项

Example:

例子：

export enum STATES
{
        WIP = "Work in progress",
        ONLINE = "Online",
        ONLINE_MODIFIED = "Online, modified",
        HIDDEN = "Hidden"
}

export class SocialMedia
{
    static state: STATES = STATES.HIDDEN;
}


console.log(SocialMedia.state);
SocialMedia.state = STATES.WIP;
console.log(SocialMedia.state);

Result:

结果：

Hidden
Work in progress

回答by Mohamed Salem Lamiri

Another simple way of doing this without the need of class

另一种无需上课的简单方法

const BOX_STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

module.exports = BOX_STATES;

console.log(BOX_STATES.WIP);

Make sure you import or require your file, as shown above.

确保您导入或需要您的文件，如上所示。