【TypeScript】列挙型をTypeScriptで使う

こんばんは、葛の葉です。

現在、TypeScriptを勉強しています。

Enumesをちょっとだけ勉強しました。

ディレクトリ構成

├── app
│   └── enum.ts
└── enum.html

enum.html

/*./app/enum.tsじゃないよ*/
<script src="./app/enum.js"></script>

TypeScriptを書く

app/enum.tsをいじる。

enum Hoge {
    foo,
    bar,
    hoge,
    piyo,
    fuga
}

let tmp = Hoge.foo

console.log(tmp)

tsc app/enum.tsとしてjsにビルドします。そうするとapp/enum.jsが出来上がります。

app/enum.js

var Hoge;
(function (Hoge) {
    Hoge[Hoge["foo"] = 0] = "foo";
    Hoge[Hoge["bar"] = 1] = "bar";
    Hoge[Hoge["hoge"] = 2] = "hoge";
    Hoge[Hoge["piyo"] = 3] = "piyo";
    Hoge[Hoge["fuga"] = 4] = "fuga";
})(Hoge || (Hoge = {}));
var tmp = Hoge.foo;
console.log(tmp);

Chromeで表示してみる。

console.logの出力結果を見たいのでenum.htmlをChromeで開き、F12キーを押します。

Consoleタブを開くと画像のような感じに出力されていると思います。

f:id:Kuzunoha-NE:20190704153856j:plain — コンソールログで0と表示されている。

let tmp = Hoge.fooのfooとしたところが、数字0に相当するからです。

let tmp = Hoge.barにすると1と表示されます。

enum.tsをもう少しいじる。

TypeScriptといえば型宣言なのかなぁと思います。

tmpという変数に代入できる値を数字だけにしてみましょう。

enum Hoge {
    foo,
    bar,
    hoge,
    piyo,
    fuga
}

/* :numberは数値のみ代入を受け入れるということ */
let tmp: number = Hoge.foo

console.log(tmp)

これでもtsc enum.tsによってbuildは通るのです。

enumってただの数字ですから。

また、TypeScriptにはオブジェクト型宣言というのが使えますのでこちらを使ってみます。

enum Hoge {
    foo,
    bar,
    hoge,
    piyo,
    fuga
}

/* :HogeはHogeというオブジェクトのみ受け付けるということ */
let tmp: Hoge = Hoge.foo

console.log(tmp)

これでも通ります。

オブジェクト型宣言の方が用途がわかりやすい気がしますので、私はこっちを選びたいなぁと思いました。

ちなみに

let tmp: Hoge = Hoge.foo
tmp = 5

としても

let tmp: number = Hoge.foo
tmp = 5

としても

いずれもビルドは通りました。

ちょっとこんがらがってきたので、勉強を続けたいと思います。

Kuzunoha-NEのブログ

プログラミングなどの勉強をしてます