どうも、ぽっぽです。
以前から興味を持っていたTypeScriptについて調べたことを紹介します。まずは、特徴と私の取り掛かり方から説明します。
特徴
TypeScriptはJavaScriptのスーパーセットで、コンパイルしてJavaScriptを生成して利用するものだそうです。
見た目はJavaScriptそのものに機能が追加されたものという認識です。
コンパイルという手間が追加されてどうして便利なのかというと、コンパイルした段階でタイプミスなどのエラーを教えてもらえます。JavaScriptはブラウザなどで実行して初めてタイプミスがあると分かります。
TypeScriptを利用すると、JavaScriptだけ利用しているより早くエラーが発見できます。
実際はVisual Studio Code – コード エディター などのエディタを使うと、プログラムをタイプした直後に分かります。
開発時はこのような初歩のエラーを繰り返し修正する作業が連続するので、エラーがすぐに分かると開発効率が上がります。
その仕掛けは、静的型付けが出来ることです。
簡単な１例をあげると
type TabetaiMono = "wasyoku" | "yousyoku" | "chuka";
let tabeta: TabetaiMono;
tabeta="wasyoku";１行目のTabetaiMonoは型として和食・洋食・中華のそれぞれの文字列しか代入出来ません。２行目で変数tabetaの型を指定します。３行目で値を代入すると、宣言した文字列以外は波線などの表記によってエラーであることを示してくれます。
簡単に確かめるのに都合がいいのは、TypeScript Playgroundです。上記のコードをコピーしてリンク先の左半分の空白部分にコピーしてください。ちなみに、右半分はJavaScriptに変換した結果が表示されています。代入する値を編集するとどのように表示されるか確認出来ます。
取り掛かりとしてはじめたこと
まずは本家公式サイトのドキュメントを読むことから始めました。
英語を訳しながら読むのでとても時間がかかってしまいました。
まずは英語で読んでみて意味がわからない箇所を翻訳してを繰り返して読み進めました。
翻訳しても意味がわからないところがたくさんありました。後で気づくことになりますがそこが理解できていない箇所です。そこにあるキーワードを使って色んな人の説明を読んでいくと少しずつ理解できるようになります。
日本語訳のサイトでなく英語で理解しようとしたの理由は、
- 翻訳はバージョンが少し古いことがある。
- エンジニアをする上で調べる場合、英語で書かれた内容を読む機会が増える。
今はネットで翻訳してくれるので随分楽にはなったと思います。
ChromeにGoogle翻訳の拡張機能を追加して利用していました。ページ全体を翻訳する機能があることを一通り読み終えたときに知りました。ずっと翻訳したい箇所をマウスで選択していました。
