VS CodeでJavascriptの型チェックを行う
VS CodeでJavascriptの型チェックを行う:
Qiita初投稿。ちょっと緊張するので、豆知識的な軽めな話題で始めてみます。
なんですが、以外にもQiitaでは記事を見かけなかった内容なので、誰かのお役に立てば。
VS Codeでは、jsファイルに
Type Checking JavaScript Files
皆さんJavascriptでの開発中に、しょうもない型間違いでエラーが出ることはないでしょうか。私はあります。
Javascriptは割と適当に書いても動くのは楽でいいんですが、真面目に書き始めると細々したエラーが出てうんざりします。簡単な型間違いぐらいは動かすまでに気づきたいです。
ESLintを使う、TypeScriptを使う等の方法はありますが、採用できないプロジェクトもあると思います。
そこで、VS Codeの機能を使って、Javascriptでも型チェックを行う方法をお勧めします。
使い方は非常に簡単で、チェックを行うjsファイルの先頭に
このコメントをつけるだけで、jsファイルをTypeScriptのように構文チェックを行ってくれます。
しかも、このコメントは、あくまでVS Codeのための目印というだけなので、エラーが残っていてもJavascript的にOKであれば普通に動きます。
既存のコードに適用する場合は全てのエラーを解決するのが難しかったりするので、この手軽さがちょうどよかったりします。
次から、実際のエラーチェックの例について書いていきます。
細かい使い方については公式の Type Checking JavaScript Files を確認してください。
以下のような馬鹿なコードを書いても動かすまではエラーを教えてくれません。まあ実際にやる人はいないでしょうが一番シンプルな例として
このファイルに対して
↑のようなチェックができてもそこまで嬉しくないですよね。
メインとなるのが関数の型チェックです。
JSDocを記述することで、関数の引数や返り値の型をチェックすることができます。
以下のように、
ただし、型チェックの元となる情報はJSDocのみなので、@paramや@returnsを記述しないとチェックしてくれないので注意してください。
もちろん、自分で定義したクラスに対しても型チェックが可能です。
コンストラクタ内でフィールド定義を行っていない変数を参照した場合は、存在しないフィールド参照としてエラーがでます。
また、フィールドの型定義は
単独ファイルだけでなく、複数のファイルにまたがった場合でも型チェックは可能です。
ただし、そのためには、ES6のモジュールシステムを使う必要があります。
scriptタグで読み込む場合はjsファイル間の連携ができないので注意してください。
JSDocを書いておくと
JSDocを書いておくことで変数の型が定義できるので、以下のようにVSCodeが補完してくれます。
このコード補完+型チェックで非常に楽にコードが書けるので、是非使ってみてください。これを知るまでのJavascriptの開発を考えると、感動するレベルの快適さでした。
どうだったでしょうか。
静的言語であれば当たり前にできる型チェックですが、Javascriptだと中々難しかったです。
型が欲しければTypescriptを使えというのはあるとは思いますが、
はじめに
Qiita初投稿。ちょっと緊張するので、豆知識的な軽めな話題で始めてみます。なんですが、以外にもQiitaでは記事を見かけなかった内容なので、誰かのお役に立てば。
結論
VS Codeでは、jsファイルに//@ts-check
のコメントを追加すると、TypeScriptとして型チェックをしてくれるType Checking JavaScript Files
VS CodeでJavascriptで型チェックを行う
皆さんJavascriptでの開発中に、しょうもない型間違いでエラーが出ることはないでしょうか。私はあります。Javascriptは割と適当に書いても動くのは楽でいいんですが、真面目に書き始めると細々したエラーが出てうんざりします。簡単な型間違いぐらいは動かすまでに気づきたいです。
ESLintを使う、TypeScriptを使う等の方法はありますが、採用できないプロジェクトもあると思います。
そこで、VS Codeの機能を使って、Javascriptでも型チェックを行う方法をお勧めします。
使い方は非常に簡単で、チェックを行うjsファイルの先頭に
//@ts-check
というコメントをつけるだけです。このコメントをつけるだけで、jsファイルをTypeScriptのように構文チェックを行ってくれます。
しかも、このコメントは、あくまでVS Codeのための目印というだけなので、エラーが残っていてもJavascript的にOKであれば普通に動きます。
既存のコードに適用する場合は全てのエラーを解決するのが難しかったりするので、この手軽さがちょうどよかったりします。
次から、実際のエラーチェックの例について書いていきます。
細かい使い方については公式の Type Checking JavaScript Files を確認してください。
単純なエラーチェック
以下のような馬鹿なコードを書いても動かすまではエラーを教えてくれません。まあ実際にやる人はいないでしょうが一番シンプルな例としてconst a = 0; const a = 1;
//@ts-check
をつけると、以下のように警告を表示してくれます。
関数の型チェック
↑のようなチェックができてもそこまで嬉しくないですよね。メインとなるのが関数の型チェックです。
JSDocを記述することで、関数の引数や返り値の型をチェックすることができます。
以下のように、
@param
に引数の型定義、@returns
に返り値の型定義を記述することで、型チェックをして、エラーを表示してくれます。ただし、型チェックの元となる情報はJSDocのみなので、@paramや@returnsを記述しないとチェックしてくれないので注意してください。
自作クラスの型チェック
もちろん、自分で定義したクラスに対しても型チェックが可能です。コンストラクタ内でフィールド定義を行っていない変数を参照した場合は、存在しないフィールド参照としてエラーがでます。
また、フィールドの型定義は
@type
のコメントを記述することで行うことができます。
複数ファイルにまたがった場合
単独ファイルだけでなく、複数のファイルにまたがった場合でも型チェックは可能です。ただし、そのためには、ES6のモジュールシステムを使う必要があります。
scriptタグで読み込む場合はjsファイル間の連携ができないので注意してください。
備考(JSDocによるコード補完)
JSDocを書いておくと//@ts-check
による型チェックがより便利になると書きましたが、JSDocを書いておくとコード補完の機能も強化されるので、これも非常におすすめです。。JSDocを書いておくことで変数の型が定義できるので、以下のようにVSCodeが補完してくれます。
このコード補完+型チェックで非常に楽にコードが書けるので、是非使ってみてください。これを知るまでのJavascriptの開発を考えると、感動するレベルの快適さでした。
まとめ
どうだったでしょうか。静的言語であれば当たり前にできる型チェックですが、Javascriptだと中々難しかったです。
型が欲しければTypescriptを使えというのはあるとは思いますが、
ts-check
であれば既存のjsファイルにコメントを追加するだけでチェック可能で、デメリットもないのでとりあえず有効にしておいてはどうでしょう。
コメント
コメントを投稿