web-dev-qa-db-ja.com

Javascript ES6-静的列挙のように外部で使用されるクラス内の列挙

次のような列挙型を追加できるかどうかを確認したいと思います。

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

クラス内で、object.updateState(Class.STATES.HIDDEN)のような新しいオブジェクトを作成することなく、boxObject.updateState(new Box().STATES.HIDDEN)に似た他のファイルで使用できるようにします。

ありがとうございました。

9
Maxime M.

このような :

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

しかし、constをエクスポートする方が適切なようです...

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

静的データプロパティは、複数の方法で実現できます。

割り当てを使用

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

Object.definePropertyを使用

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

静的ゲッターを使用

ES6静的ゲッター構文​​を使用して、クラス定義にプロパティを追加できます。ゲッターだけを定義して、読み取り専用にすることもできます。

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

言われたことすべて、私は n00dl に同意します。 ES6モジュールを使用している場合、名前付きエクスポートを使用する方が適切だと思われます。

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

export default class Box {};

したがって、次のようにインポートできます。

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

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

クラスを必要とせずにこれを行う別の簡単な方法

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

module.exports = BOX_STATES;

console.log(BOX_STATES.WIP);

上記のように、必ずファイルをインポートするか、必要とします。