JavaScript大好きの皆様ごきげんよう。

今回は、JavaScriptのスーパー強い版であるTypeScriptとVSCodeの組み合わせがとても快適である！という記事をお送りします。

JavaScript

JavaScriptは、RubyやPHPなどと同じ、いわゆる動的型付け言語です。

const hoge = (arg) => console.log(arg + 1)
hoge(1) // 2
hoge('1') // 11
hoge([1, 2]) // 1,21

この hoge という関数は引数 arg に、数字、文字、配列などどういう型のデータでも突っ込めますが、配列を入れた場合の挙動とか、誰得な感じがするので、数字だけを入れたいとします。

const hoge = (arg) => {
  if (typeof arg === 'number') {
    console.log(arg + 1)
  }
}
hoge(1) // 2
hoge('1') // 何も表示されない
hoge([1,2]) // 何も表示されない

JavaScript ではこのように arg 変数が number 型かどうかを判定するようなコードが必要になります。

TypeScript

TypeScriptは静的型の機能をJavaScriptに追加したもので、コンパイルする言語です。（自分でコンパイルをしなくても動くts-nodeというパッケージもあります。実際には内部で勝手にコンパイルしてくれてるのですが…。）

const hoge = (arg: number) => console.log(arg + 1)
hoge(1) // 2
hoge('1') // コンパイル時にエラーが発生する

このコードをコンパイルすると、error TS2345: Argument of type '"1"' is not assignable to parameter of type 'number'.  というエラーが出ます。

じつはコンパイル時に型をチェックするだけなのと、JavaScript的なゆるさにより、抜け道はいろいろとあります。もしそれを厳密にチェックしたければ、先ほどのJavaScriptのコードのように typeof arg === 'number' のようなチェックは必要になります。

とはいえど、コンパイル時に型を確認してくれるだけでも便利です。特にVSCodeを使えば、編集中にリアルタイムで型のチェックをしてくれます。

VSCode

VSCode は JavaScriptをはじめよう #2 VSCodeを使ってみよう の記事で解説したIDEです。下手なテキストエディタよりも遙かに動作が軽いことと、IntelliSense などの Visual Studio 譲りのIDE機能が特徴です。

これはさっきのコードをVSCodeで入力してみたものです。エラーが発生する部分に赤い波線が引かれています。ここにマウスカーソルを持って行くとエラー情報を出してくれます。

これがリアルタイムで動きます。

そもそも hoge( までを打ち込むとヒントがでてきます。

hoge は number 型の引数を1つとり、戻り値がない（void型）であるという説明です。

ライブラリを使う

自分たちで書いたコードは、ある程度までは把握できていることでしょう。問題は既存のライブラリなどです。

これは Node.js の API である path.join 関数の説明です。 path.join は引数に指定した文字列をWindowsなら \ で、MacやLinuxなら / で結合するものです。WindowsとMacではパス区切りの文字が違うので、こういう関数を使うのです。

JSDocというJavaScriptやTypeScriptのソースコードの中にドキュメントを埋め込む機能を使っている、あるいはTypeScriptなどの型情報を提供しているものであればこのような表示が可能です。

npm i @types/node -D

@types/なんとか は型情報を補完するためのパッケージ群です。 @types/node は Node.js API の型情報です。

fs.readFileSync はファイルを読み込む API ですが、1つめの引数はファイル名でわかりやすいものの、2つめの引数であるオプションは、どういうオプションがあるのかを、いつもいつも、いちいちウェブのドキュメントを読みに行くのは面倒です。（大まかなことは覚えてても詳細を忘れたときとか）

VSCodeでは1文字目を打ち込むとその文字が含まれる要素をサジェスト（推奨）してくれます。この例だと (property) encoding?: string というポップアップがでています。これはオプションのパラメータに、encoding という文字列で指定するものがある（? は必須ではないことを指す）というものです。

コツ

たとえば hoge というようなパッケージをインストールして型情報が出てこない場合は、@types/hoge のインストールを試してみるといいでしょう。@hoge/fuga のようなパッケージの場合は、@types/hoge__fuga です。

まとめ

TypeScriptはJavaScriptに型を追加してくれるもので、VSCodeと合わさるととても快適にプログラミングができます。

レッツ快適プログラミングライフ！