最小限の手順でTypeScriptが動作する環境を構築する

この記事では、「TypeScriptが動作する環境をサクッと構築する方法」をご紹介します。

少しでもこれからTypeScriptの学習を始める方の参考になれば幸いです。

※TypeScriptが動作する環境を作る方法は色々あるので、ここで紹介するのはあくまで一例と捉えてください

環境情報

macOS Mojave 10.14.6
Homebrew 4.1.4
Bash 3.2.57

TypeScriptが動作する環境をサクッと構築する方法

では早速、TypeScriptが動作する環境を構築する方法をお伝えしていきます。

まずは、以下のコマンドでasdfをダウンロードして下さい。

brew install asdf

asdfとは、複数の言語に対応したバージョン管理システムです。

バージョン管理したい言語のプラグインをインストールすることで、その言語のバージョン管理ができるようになります。

利用可能なプラグインの一覧はこちらです。

似たようなツールとしては、anyenvなどもありますが、anyenvよりシェルの起動が早いのが特徴です。

また、インストールした言語は、共通のコマンド（asdf）で扱うことが可能なので、言語ごとにコマンドを覚えなくていいのもメリットの一つです。

ダウンロードできたら、以下のコマンドでasdfのパスを通します。（インストール）

echo -e "\n. \"$(brew --prefix asdf)/libexec/asdf.sh\"" >> ~/.bash_profile

asdfコマンドの補完を効かせたい場合は、以下のコマンドも実行してください。

echo -e "\n. \"$(brew --prefix asdf)/etc/bash_completion.d/asdf.bash\"" >> ~/.bash_profile

この辺りの手順は、利用しているパッケージ管理システムやshellによって異なるので、こちらも参考にしてください。

インストールしたら、以下のコマンドで設定を反映させます。（もしくはターミナルの再起動でもOKです）

source ~/.bash_profile

次に、asdfでNode.jsを扱うために、Node.jsのプラグインをインストールします。

asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git

インストールできたら、実際にasdfを使って指定したバージョンのNode.jsをインストールします。

今回は18系をインストールするので、18系のリストを確認した後に、18.2.0をインストールします。

asdf list all nodejs 18

asdf install nodejs 18.2.0

18系限定ではなく、全てのバージョンを確認したい場合はasdf list all nodejsを実行してください！

ここまででNode.jsのインストールは完了しました。

次に、特定のディレクトリのNode.jsのバージョンを指定する方法ついて説明します。

asdfでインストールしたパッケージのバージョン管理は.tool-versionsで行います。

特定のディレクトリのバージョンは、そのディレクトリから遡って最初に見つかる.tool-versionsの設定が適用されます。

例えば、hoge/hugaというディレクトリがあり、hogeに.tool-versionsがあり、そこにnodejs 18.2.0と書かれている場合、hugaディレクトリではバージョン18.2.0のNode.jsが利用されます。

もちろん、hugaに.tool-versionsがある場合は、hugaディレクトリではその.tool-versionsのバージョンが適用されます。

現在のディレクトリでどの.tool-versionsが適用されているかは、以下のコマンドで確認できます。

asdf current

そして、実際に特定のディレクトリでNode.jsのバージョンを指定するには、対象のディレクトリに移動した上で以下のコマンドを実行します。

asdf local nodejs 18.2.0

これにより対象のディレクトリに.tool-versionsが作成され、Node.jsがバージョン管理されるようになります。

ちなみにasdf local nodejs 20.1.0のようにインストールしていないバージョンを指定すると、以下のようなエラーになります。

version 20.1.0 is not installed for nodejs

この場合は、指定したバージョンをインストールするようにしましょう。

asdf install nodejs 20.1.0

これでバージョン20.1.0を指定できるようになります。

また、特定のディレクトリに関係なく、グローバルに特定のNode.jsバージョンを指定したい場合は以下のコマンドを実行します。

asdf global nodejs 18.2.0

これにより、$HOMEディレクトリ配下に.tool-versionsが作成され、特定のディレクトリに.tool-versionsが存在しない場合はこの設定が適用されます。

ここまでで、Node.jsのインストールとバージョン指定は完了です。

最後に、以下のコマンドで対象のリポジトリにTypeScriptをインストールします。

npm install typescript

npm show typescript versionもしくはpackage.jsonでインストールしたTypeScriptのバージョンを確認できます。

インストールしたプラグイン（asdf-nodejs）には、Node.jsバージョンをインストールした直後にnpmパッケージのデフォルトセットを自動的にインストールする機能が付いているので、この段階でnpmは使用できるようになっています。

以上でTypeScriptが動作する環境を作ることはできました。

実際にTypeScriptを動かす際には、ts-nodeなどを使えばサクッと実行できるので便利です。

実際に試してみましょう。

まずは、以下のコマンドでts-nodeをインストールします。

npm install ts-node

そして、任意のディレクトリ配下で以下のような適当なコードを記述します。

const hoge = () => {
    console.log('hogeです');
};

hoge();

そして、ts-nodeで実行します。

./node_modules/.bin/ts-node my-project/hoge.ts

ターミナルに「hogeです」と表示されたらOKです。

ts-nodeのコマンドはpackage.jsonで"ts": "./node_modules/.bin/ts-node"のように登録しておくよ良いでしょう。そうすればnpm run ts my-project/hoge.tsでTypeScriptを実行することができます。