TypeScriptを最小構成で実行する

TypeScriptを導入してみたいものの、小規模案件だから面倒なのは嫌だ！という開発は結構あるんじゃないかなと思います。そこで最小構成でTypeScriptを開発・コンパイルする環境を作って見ました。
npm環境は構築済み、エディタはvsCodeとします。

インストール

まずvsCodeでターミナルを開き、typescriptに関する機能をインストール。

npm install -g typescript

※Windowsの場合、初期設定だとvsCodeのターミナルでtscを動かせないので、PowerShellの権限設定を変更する必要があります。
Win+Sで[Powershell]を検索、右クリックし[管理者として実行]を選択。下記コマンド実行。

Set-ExecutionPolicy RemoteSigned

表示される注意書きにあるように、セキュリティレベルを下げてしまうので注意してください。もしPowerShellを使わないのであれば、vsCodeとは別に毎回コマンドプロンプトを立ち上げる必要があるみたいです。

プロジェクトルートに設定ファイルを作成

プロジェクトルートに「tsconfig.json」というファイルを作成します。中身は以下をコピペ。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
   }
}

これを保存してください。

テストファイルの作成とコンパイル

コンパイルする際にtsファイルが1つもないとエラーになるので、先に作成しましょう。
プロジェクト内のどこでもいいのでindex.tsという名前でファイルを作成してください。
その後、ターミナルで以下のコマンドを実行します。

tsc

すると先ほど作成したtsファイルと同じディレクトリにindex.jsが作成されているはずです。

自動コンパイル設定

tscコマンドでプロジェクト内の全tsファイルがコンパイルされるとはいえ、毎回ターミナルでコマンド実行は面倒ですよね。
そこで、ターミナルにて

tsc -w

を実行します。すると、tsファイルを編集後に保存するたび、自動でコンパイルされます。
また上記コマンドを実行するとターミナルが占拠されたような状態になるので、ターミナルタブの右側にあるプラスボタンをクリックし、WindowsならPowerShellウインドウを新規作成してください。

補足：tsファイルにアクセスされないようにする

あまり意味はないかもしれませんが、.htaccessに記述を追加することで、tsファイルへのアクセスを拒否できます。

# AccessControl Extension
<Files ~ "(\.ts)$">
deny from all
</Files>

まとめ

軽くスクリプトも書くデザイナさんとゴリゴリなフロントコーダーがいる案件等で試してみたくなりますね。npmもほぼ無視したお手軽構成なのでぜひ試してみてください。