Help us understand the problem. What is going on with this article?

TypescriptでENUM日本語化

背景

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

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

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

Typescript公式

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

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

https://typescript-jp.gitbook.io/deep-dive/type-system/enums#wotsuenum-with-static-functions

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

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の書き方に則って書きなさいだってさ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした