TypeScriptを手軽に実行できるPlayground環境の作り方

みなさんこんにちは。小ネタですが、typescriptのコードを軽く試してみるときにこちらのプレイグラウンドなどを使っていたのですが、出力がぱっとできなかったりオンラインということで試したコードを保存することができなかったり、npmのパッケージをインポートして試すのには使えなかったりなどと、何か別のいい方法はないかと思っていたのですが、ts-nodeというパッケージを使えば気軽にローカルでtypescriptをトランスパイルなしで実行することができました。

ローカルでvscodeを使って補完機能を利用した上で簡単に実行でき、過去に試したコードもファイルとして残せるのでオンラインに比べてずいぶんと使いやすくなりました。方法をまとめましたのでみなさんの参考になれば幸いです。

ts-nodeの使い方

このts-nodeというnpmのパッケージを使えば、typescriptをトランスパイルする必要もなく、ローカルのnode環境で簡単に実行できます。

まずはインストール方法ですが、ドキュメントにある通りにts-nodeをtypescriptとともに-gをつけてグローバルにインストールします。

npm install -g typescript
npm install -g ts-node

これで、以下のコマンドをコンソールで入力するだけで.tsファイルを実行することができます。また、ファイルの拡張子の.tsは省略することもできます。

ts-node ファイル名.ts

グローバルにインストールしたくない場合は、以下のコマンドでインストールすることになります。(ちなみに-Dは–save-devと同じです)

npm install -D typescript
npm install -D ts-node

この場合はtypescriptの実行は以下のコマンドのように若干長くなりますので、コマンドが少々短くなってファイルのディレクトリに関係なく実行できるようになるグローバルインストールが個人的におすすめです。

npx ts-node ファイル名.ts

パッケージを試す方法

パッケージをインストールするには、実行したいtypescriptのファイルの場所でまずはpackage.jsonを作成します。（-yはinitするときの色々な質問を省略して全部yesにするというオプションで、さくっと作成するために追加しています）

npm init -y

これでpackage.jsonが作成されたので、試したいパッケージを自由にインストールしてみてください。ここではサンプルとしてmoment.jsをインストールしてみます。

npm install moment

// ファイル名：moment-test.ts

import * as moment from 'moment'
import { Moment } from 'moment'

const currentMoment: Moment = moment()

const currentHour: Number = currentMoment.hours()
const currentTime: String = currentMoment.format('HH:mm')

console.log(currentHour)
console.log(currentTime)

パッケージを試すだけのコードですが、以下のコマンドを実行すればコンソールに結果が出力されます。

ts-node moment-test

まとめ

ts-nodeというパッケージを利用するというだけなのですが、かなり手軽にTypescriptを実行することができました。個人的にはVScodeを使ってコードを書いて補完機能を利用してパッケージのソースを参照しながら実行できることが嬉しかったので、これからはこの方法で気軽にローカルで試していきたいと思います。