TypeScriptを動かす方法4選

2020.12.10

Introduction

TypeScriptは直近1年で最も使われているプログラミング言語第4位で、
いまとても勢いのある開発言語です。
ご存知のとおり、TypeScriptはMicrosoftが開発した言語で、JavaScriptのスーパーセットです。
先ごろv4.1がリリースされ、今後さらに使われていくと思われます。

本稿では、TypeScriptに興味をもった人が簡単に動かしてみるための方法をいくつか紹介します。

Use Playground

とにかくすぐTypeScriptを動かしたい場合、ブラウザでPlaygroundにアクセスすれば
そのまま動かすことができます。

ブラウザ上で補完もきくし、ts configを細かく設定したり
TypeScriptのバージョンも細かく指定できて便利です。
※むかし自分で書いてた

ちなみに、ここもPlaygroundとして使えます。(バージョンは多少古い)

Install local

他にモジュールをインストールしたり、
もう少し本格的に使いたい場合はNodeのnpmでTypeScriptをインストールします。
※Nodeはインストールしている前提

npmを使ってTypeScriptをインストールし、tsc --initで初期化します。

% mkdir path/your/ts-prj && cd path/your/ts-prj
% npm init
% npm install --save-dev typescript
% ./node_modules/.bin/tsc --init

適当なtsファイルを用意。

//main.ts
class User {
  constructor( public name: string) {}
}

const u = new User("taro");
console.log(u.name);

コンパイルしてnodeで実行。

% ./node_modules/.bin/tsc main.ts
% node main.js
taro

いちいちコンパイルして実行するのが面倒ならts-nodeモジュールを使います。

% npm install --save-dev ts-node

tsファイルから直接実行可能。

% ./node_modules/.bin/ts-node main.ts
% node main.js
taro

ちなみに、ローカルでのインストールについても以前書いてました。
「coffee scriptみたい」とかいってるところに時代の流れを感じます。

Use JupyterLab

JupyterLab(もしくはJupyter Notebook)にTypeScript pluginをインストールして使うこともできます。
JupyterLabとは、ブラウザ上で動作するプログラムの対話型実行環境です。
プログラムの実行と結果の確認、Markdownでのドキュメント記述なども可能で、
データ分析をおこなうときなどによく使用されます。

まずはJupyterLabのインストールをします。
python環境があれば下記コマンドでインストールできます。

% conda install -c conda-forge jupyterlab

# pipの場合は↓
# pip install jupyterlab

インストールできたら、下記コマンドを実行するとサーバが起動します。
http://localhost:8888/labにアクセスすればJupyterLabを利用可能です。

% jupyter lab

デフォルトだとTypeScriptでの記述ができないので、tslabというpluginを追加します。

% npm install -g tslab

listコマンドでtslabが表示されればインストール完了です。

% jupyter kernelspec list
Available kernels:
  jslab      /path/Jupyter/kernels/jslab
  tslab      /path/Jupyter/kernels/tslab

jupyter labコマンドでサーバを起動してアクセスしてみてください。
TypeScriptが選択できます。

Use Deno

DenoとはTypeScriptの実行環境で
ここでも紹介しています。
Denoをインストールすれば、そのままTypeScriptが動きます。  

Homebrewでdenoをインストール。

% brew install deno

deno runコマンドでそのまま実行。簡単ですね。  

deno run main.ts
Check file:///path/ts-prj/main.ts
taro

Summary

本稿ではTypeScriptを実行する方法について4つ紹介しました。
どれも簡単にセットアップできてTypeScriptを実行できますが、
自分はJupyterLabがお気に入りです。