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
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の欄に以下のように追記してください。
"scripts": {
"dev": "ts-node-dev --respawn"
}
実行
npm run dev index.ts
エディタでTypeScriptファイルを変更し、保存するとコンソールの出力結果も変わるはずです。