ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

JavaScriptにTypeScriptの型チェックを導入してみる

TypeScript: Handbook - Type Checking JavaScript Files
このようなサイトを見つけたので試してみました。公式なので当然かもしれませんが、上記のサイトに書いてあるようなJavaScriptファイルにTypeScriptの型チェックをできました。

以下、やったことのメモ書きです。

前提条件

Win10 + Visual Studio CodeJavaScript(TypeScript)の実行環境はVisual Studio CodeのRemote Containersとしました。ですが、Remote Containers以外はOS、エディタに関わらずできるはずです。

環境構築

JavaScriptの実行環境として「vscode-remote-try-node」をgit cloneし、Visual Studio CodeのRemote Containersで起動します。この時点でコンテナにはnode、npmがインストールされており、JavaScirptがデバッグ実行できるはずです。

次にTypeScriptを導入するために、以下のコマンドを実行します。

$ npm install -g typescript
$ tsc --init

tsc --init」で「tsconfig.json」が作成されますが、今回はJavaScriptに対してtscでのチェックを行いたいので、ファイル名を「jsconfig.json」に変更します。JavaScriptに対応させるため「jsconfig.json」を以下のように変更しました。(コメントは変更した理由など)

{
  "compilerOptions": {
(中略)
    "checkJs": true, // JavaScirptのチェックを行う
(中略)
    "noImplicitAny": false, // メソッドの引数でany型を指定していない場合のエラーを回避する
(中略)

tscコマンドを実行するか、Visual Studio CodeならTypeScript用のプラグインを入れることで、型チェックが行われて(エラーがあれば)適切なエラーが表示されると思います。

とりあえず最初に紹介した公式のサンプルソースで試してみましたが、「this.constructorOnly」の型エラーは表示されることを確認しました。またメソッドに引数を追加してみたところany型を指定していない旨のエラーとなったので、これについては表示されないようjsconfig.jsonを修正しています。

色んなパターンのJavaScriptのプログラムを試したわけではありませんが、一応、TypeScriptの型チェックがJavaScriptファイルに対してできたみたいです。