Node.jsをインストール

公式から直接インストールすることもできますが、一般的にはバージョン管理ツールを使用することが推奨されているので、ここでは代表的なバージョン管理ツールであるnvmを使ってインストールします。

nvmをインストール

nvmの公式に従ってコマンドを打っていきます。環境に合わせて以下のどちらかを実行します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

以下は実行結果の最後のほうの抜粋です。

=> Appending nvm source string to /home/test/.bashrc
=> Appending bash_completion source string to /home/test/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

nvmを使うにはターミナルを再度開くか、最後の三行のスクリプトを実行する必要があるとのことなのでどちらかを実行します。

実行できたら以下の確認用コマンドを打ちます。nvmと返ってくればインストール成功です。

command -v nvm

nvmを使ってNode.jsをインストール

nvmをつかってNode.jsをインストールしていきます。ここでは直近のLTS(Long Time Support)をインストールします。2023年11月現在、LTSはv20.10.0です。

nvm install --lts

インストールできたら下記コマンドで確認します。バージョン情報が出力されればインストール成功です。

node -v

npm -v

TypeScriptをインストール

nvmでNode.jsがインストールできたらTypeScriptをインストールしていきます。今回はローカルインストールを行います。

初期設定

まずTypeScriptをインストールしたいディレクトリに移動します。ない場合はmkdirで作成してください。ここでは事前に用意しておいたts_testに移動します。

cd ts_test

移動できたらpackage.jsonを作成します。作成しなくてもインストールはできますが管理が難しくなるため作成したほうがよいでしょう。下記コマンドを実行してください。

npm init -yes

ここでは全てデフォルトで作成するので-yesを付けています。

TypeScriptのインストール

package.jsonが作成できたらTypeScriptをインストールします。ここではローカルインストールのため--save-devを付けます。

npm install typescript --save-dev

インストールできたか確認します。ローカルインストールしているのでコマンドの前にnpxを付けます。バージョン情報が出力されれば成功です。

npx tsc -v

設定ファイルの作成

最後にTypeScriptの設定ファイルであるtsconfig.jsonを作成します。

npx tsc --init

ここではデフォルトで進めますが、詳細を確認したい場合は以下の記事などを参考にしてください。

TypeScriptを使ってみる

TypeScriptをインストールしたディレクトリに以下のような簡単な内容のファイルを作成してください。

vi index.ts

index.ts

const hello: string = 'Hello, World!'
console.log(hello)

作成できたらtscコマンドでJavaScriptファイルにコンパイルして実行します。

npx tsc index.ts

node index.js

Hello, World!が出力されれば成功です。

便利なパッケージ

ts-node

TypeScriptファイルをJavaScriptファイルにコンパイルせずに直接コンソールに出力できます。

インストール

npm install ts-node --save-dev

実行

npx ts-node index.ts

ts-node-dev

TypeScriptファイルの変更を監視し、変更があったら自動で直接コンソールに出力してくれます。

インストール

npm install ts-node-dev --save-dev

実行(ctrl+c/command+cで中止)

npx ts-node-dev --respawn index.ts

実行文が長いのでショートカット作成
package.jsonのscriptsの欄に以下のように追記してください。

package.json

  "scripts": {
    "dev": "ts-node-dev --respawn"
  }

実行

npm run dev index.ts

エディタでTypeScriptファイルを変更し、保存するとコンソールの出力結果も変わるはずです。