TypeScript — スーパーパワーを持ったJavaScript — パート2

>こちらの記事は、[Indrek Lasn](https://medium.com/@indreklasn?source=follow_footer--------------------------follow_footer-) 氏により2018年 3月に公開された『 [TypeScript — JavaScript with Superpowers — Part II](https://medium.com/better-programming/typescript-javascript-with-superpowers-part-ii-69a6bd2c6842) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。
著者Twitter https://twitter.com/lasnindrek

![](https://miro.medium.com/max/1661/1*lrVNbYOEn_ni9NNRTY0r7w.png)
Enum(列挙型)を使用すると、わかりやすい名前で値をグループ化できます。

例えば名前のリストがあるとします。するとEnumの構造は次のようになります:

![](https://miro.medium.com/max/970/1*4qFIKpovAtDdkA0HkrqEVw.png)

そしてそのEnumからこのようにして値を取得できます:

![](https://miro.medium.com/max/924/1*KaoKC7ZCuXwLPR_1ntY9SQ.png)

でも待ってください...値のインデックスを表す整数が返されています。配列と同じくEnumはメンバーのインデックスは`0`から始まります。

`0`ではなく`"Indrek"`という値を取得するにはどうすればよいのでしょうか？


![](https://miro.medium.com/max/890/1*ymUuAzpdwzeMc3522yb0MA.png)


値が文字列として表示されているのに注目してください。

![](https://miro.medium.com/max/940/1*XnRIFhuCMpJFp8CmVUnf3g.png)


もう1つの素晴らしい例としては、アプリケーションの状態をEnumを使用して保存することです。

![](https://miro.medium.com/max/988/1*nOLoMIf6YLl0XbFoPWeHmw.png)

Enumの本質に迫った[素晴らしい回答](https://stackoverflow.com/a/28818850/5073961)を見つけたので、もしEnumについてもっと知りたいのなら参考にしてみてください。

![](https://miro.medium.com/max/1661/1*DKPVSnf7PVjrdDY_Fvz6EQ.png)

たとえば、APIからデータを取得したとします。データは常に取得できるものと考えていますが、仮に取得できない場合はどうすれば良いのでしょうか？

そんな時こそ`never`型を返しましょう(特殊なケースシナリオ):


![](https://miro.medium.com/max/1184/1*lkfWaSP6G8YfqWjoFWqh4w.png)

渡されたエラーメッセージに注目してください。

別の関数から`error`関数を呼び出すこともできます(コールバック):


![](https://miro.medium.com/max/1148/1*oZ4Ya3w5ypd6BM3AeF1nRA.png)

推測される戻り値の型は`never`に設定されているため、ここでは`void`ではなく`never`を使用しているのに注目してください。

![](https://miro.medium.com/max/1661/1*bgzesRZpes2KJYFRWRgFkw.png)

- `null` — 値が存在しない場合
- `undefined` — 変数が宣言されていても、値がまだ割り当てられていない場合

それ単体では特に使い道はありません:

![](https://miro.medium.com/max/986/1*PwsNVPPzy7qav43uRHKBRg.png)

デフォルトでは、`null`および`undefined`はその他のすべての型のサブタイプとなっています。つまり、`number`と言った型に`null`や`undefined`を割り当てることができるということです。


![](https://miro.medium.com/max/493/1*q6FsoxR0Qou54lG040J2KQ.jpeg)

[参照元情報はこちらにです。](https://stackoverflow.com/a/44388246/5073961)

Axel Rauschmayer博士によるnullとdefinedに関する[優れた記事](http://2ality.com/2013/04/quirk-undefined.html)があるのでぜひ読んでみてください。

![](https://miro.medium.com/max/1661/1*x3Y773t23Pc1VlhYWXB0TQ.png)

型アサーションとは通常、あるエンティティーの型がその現在の型よりも明確にになりえることがわかっている場合に使用します。

型アサーションは実行時には影響せず、コンパイラのみによって使用されます。型アサーションを使うと、TypeScriptはプログラマが必要な特別なチェックを実行したと仮定します。

簡単なデモをご紹介しましょう:

![](https://miro.medium.com/max/1054/1*LGa_fcmyWZSCzduOKqHgpw.png)

ブラケット`<>`を使った構文は[JSX](https://reactjs.org/docs/jsx-in-depth.html)と競合するため、代わりに`as`構文を使用します。

![](https://miro.medium.com/max/1126/1*GgrkjRVkPhwu7hHAacWwaQ.png)

[型アサーション](https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html)についての詳しい説明はこちら。

TypeScriptを詳しく学びたい人には、[この本](https://amzn.to/2lfpdeg)がおすすめです。

JavaScriptの自信がまだない方でもご心配なく！[JavaScriptをマスターするための本](https://amzn.to/2lJS62r)もあります！

# 他にもあるクールな機能やライブラリ

- [interfaces](https://basarat.gitbooks.io/typescript/docs/types/interfaces.html)
- [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)
- [unions](https://basarat.gitbooks.io/typescript/docs/types/discriminated-unions.html)
- [classes](https://www.typescriptlang.org/docs/handbook/classes.html)
- [awesome typescript](https://github.com/dzharii/awesome-typescript)

さあ、TypeScriptで早速何かすごいものを作ってみましょう！練習に最適な、開発するべき面白いアプリのリストは[こちら](https://medium.com/better-programming/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c)。


TypeScriptを深く掘り下げる準備ができていると感じたら、”[Programming TypeScript: Making Your JavaScript Applications Scale](https://amzn.to/315nW8Z)”という本を読むことから始めるのをお勧めします。


読んでくれてありがとう、お元気で！

#関連記事
- [TypeScript — スーパーパワーを持ったJavaScript](https://qiita.com/baby-degu/items/ca212fe345aae0600e70)

# 翻訳協力
Original Author:  **[Indrek Lasn](https://medium.com/@indreklasn?source=follow_footer--------------------------follow_footer-)** 
Thank you for letting us share your knowledge! 

この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当: yumika tomita
翻訳担当: siho1
監査担当: @nyorochan 
公開担当: asuma yamada

# ご意見・ご感想をお待ちしております
今回の記事は、いかがだったでしょうか？
・こうしたら良かった、もっとこうして欲しい、こうした方が良いのではないか
・こういったところが良かった
などなど、率直なご意見を募集しております。
いただいたお声は、今後の記事の質向上に役立たせていただきますので、お気軽にコメント欄へ投稿ください。
みなさまのメッセージをお待ちしております。