[TypeScript] 列舉型別 ( Enumerate)

Charlie H.
3 min readSep 2, 2017

--

Hi 大家好,我是 Charlie 。 自去年退伍之後到新公司到職已經一陣子了,因為公司產品第一次接觸 React.js ,也同時接觸 TypeScript ,對我來說是一個全新的挑戰。 微不起眼的小弟我受關注度實在是太低了,所以最近要求 Teammate 可不可以給我點功課,讓我知道自己究竟有多無知。 透過去尋找、去了解的過程,順便將我所學習到的一併記錄在 Medium 上。

首先,確保我們都站一樣的基準點上,請知道 TypeScript 當初的誕生解決了許多 JavaScript 為人詬病的特性( Ex. 欠缺強型別、結構難以掌握、似有若無的介面規範…等等)。 TypeScript 完全基於 JavaScript 語法,在編譯後會生成*.js 的程式碼以供使用。

Enumerate

Enum 的用法我想接觸過 C# / C / Java 的人都十分了解,它能夠把變數的範圍限制在某些限制下進行存取並賦予其定義,除了可讓程式碼更好維護之外更增加程式可讀性。But , 沒有 Enum 這個 data type 的 JavaScript 才不鳥我們呢… 好險 TypeScript 大大替我們解圍,以下是基本的宣告範例enum.ts:

而經過 TypeScript 編譯器的編譯之後,會產生出 enum.js :

我們可以看到 TypeScript 的編譯器會把 *.ts 內的內容轉換成 *.js 能夠執行的樣子,以 *.js 本有的規則將 Enum 的功能實現,讓我們用 Week[5] 指到 "Friday" 且用 Week[“Friday”] 能夠指到 5 。 從範例裡來看,雖然我們用 ( today == 5 ) 也能達到一樣的效果,但是假使有一個沒有參與開發的人來看這行 code 是不能直覺上就了解程式想傳達的涵義,而我們用了 Enum 之後就能解決此問題。

More About Enumerate

除了上述的用法之外, Enum 其實還能有更多的活用:

Enumerate with Const

假使當我們在設計程式時必須有效能上的考量,或者是設計完的 Enum 並不會在之後執行時被引用但卻又希望能夠保留其可讀性及易於維護的特性,我們可以使用 const enum :

在 TypeScript 這端似乎感受不到差別,只是會在 :18 行那端看到 error msg 。

為什麼呢? 讓我們先看看如果拿掉那行 error 之後,再經過 TypeScript 編譯器編譯過後的樣子吧!

我並無手動刪去任何程式碼, const enum 會再編譯階段被拔除,然後你那些有參照到 const enum 的變數們會被直接被值指派。所以, *.ts 那端被丟出 error msg 的那行程式碼是因為在編譯後我們並無從得知必須去哪裡找參照值。透過這樣的運用我們保留了 enum 的易讀特性,也能夠省去 JavaScript 去尋找某個 Object 內值的步驟以追求性能上的提升,同時避免不想要的間接引用。

結語

恭喜你,現在你已經會使用 Enum 了。

參考:

  1. TypeScript Documentation
  2. GitBook: TypeScript Deep Dive

--

--