TypescriptでENUM日本語化

背景

フロント→サーバー間でのやり取りで起きた事象。
ドロップダウンの選択肢での問題frontでの表示は日本語だがサーバーにリクエストする際は英語にしなくてはいけない場面があり
文字列一致でベタがきするのは非常にコード量も多くなるし、可読性低いので何かいい方法ないか探してた

実装するにあたっての前提

選択肢はフロントとしてはEnumで管理したい

Typescript公式

なんかないかなと探していると、公式に静的メソッドをEnum内で定義するExample発見!!

宣言enumとnamespaceを合体させて、静的メソッドを列挙型に追加することができます

上記を参考に実装してみる

enum Sample {
  TOP = 'top',
  BOTTOM = 'bottom'
 }

namespace Sample {
  export default toJapanese(val: string) {
    switch(val) {
      case Sample.TOP:
        return '上';
      default:
        return '下';
    }
  }
}

export default Sample;

みたいに実装してみた。

処理的には問題なさそうだったんですが、build時に ts-lint に怒られる始末。。

内容
‘namespace’ and ‘module’ are disallowed.
「名前空間とモジュールは使っちゃダメだよっ」ということらしい。

なぜに？

エラー文で検索すると、ts-lintの公式サイトに載ってた。

書き直し

結局Enum風のクラスを定義してそこに静的メソッドを追加

export default class Sample {
  public static TOP: string = 'top';
  public static BOTTOM: string = 'bottom';

  public static toJapanese(val: string): string {
    if (val === Sample.TOP) {
      return '上';
    } else {
      return '下';
    }
  }
}

処理的には問題ない

ts-lint通るか。。。

通った〜!!!

結論

どうやら名前空間とモジュールというのは、JavaScriptで最近定義されたモジュール化の書き方からかけ離れているのでダメ、ということらしい。
きちんとJavaScript（ECMAScript6）のimport / exportの書き方に則って書きなさいだってさ