TypeScriptを初めて触った時のメモ(その1: 初期セットアップ編)

node.jsのセットアップ

まず、前提としてJavaScriptの実行環境としてnode.jsをセットアップする。
基本は、以下のnode.js公式ページの手順に従ってセットアップする。

• Node.js — Download Node.js®

インストール例(最新バージョンでの実行コマンドは上記リンク先を参照)

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 22

# Verify the Node.js version:
node -v # Should print "v22.14.0".
nvm current # Should print "v22.14.0".

# Verify npm version:
npm -v # Should print "10.9.2".

ここで、node.js、nvm、npmの3つのツールがセットアップされる。この３つが何者かを一言でまとめると以下の通り。

• node.js : JavaScriptの実行環境の一つ
• nvm : node.jsのバージョン管理ツール
  • node.jsそのものの管理用のコマンド。最新バージョンや指定したバージョンのnode.jsをインストールしたり、複数のバージョンのnode.jsをインストールしている時に、使いたいバージョンのnode.jsを切り替えたりするのに使うコマンド。
• npm : node.jsのパッケージ管理ツール
  • node.jsで動かすJavaScriptで作られたさまざまなパッケージを管理するためのツール。TypeScriptもnpmコマンドでこの後インストールする。

ちなみに、nvmとnpmは最初に実行するシェルでインストールし、node.js は、3つ目のnvm install 22でインストールされる。

開発用のフォルダを準備する

任意のディレクトリを用意する。ここでは、TypeScriptPracticeというディレクトリを利用する前提とする。
GitHubなどで空のリポジトリを作成してgit coneしても良い。

mkdir TypeScriptPractice && cd TypeScriptPractice && pwd

npmパッケージ管理の初期化

開発するディレクトリでnpmの初期化を行う

npm init --yes

そもそもなぜnpmの初期化を行うのか？
npmのパッケージインストール方法は以下の2種類がある。そして通常は、プロジェクト間でnpmパッケージが干渉し合わないようにするために、ローカルモードでパッケージをインストールするのが推奨ということらしい。このローカルモードでインストールする際に、「このディレクトリから独立した領域ですよ」というふうにするためにnpmの初期化を行うようである。

npmのインストールモード

1. ローカルモード :
   • npm initによる初期化を実行したディレクトリでのみ有効なパッケージとしてインストールされるモード
   • npm initを実行したディレクトリ直下に作成される、./node_modulesディレクトリにパッケージをインストールする。
   • npm installのデフォルトのモード。
2. グローバルモード :
   • npm initによる初期化に関係なく、実行可能なglobalとしてインストールするモード
   • ~/.nvm/versions/node/vXX.XX.X/lib/node_modulesディレクトリにパッケージがインストールされる
   • 環境変数PATHにも追加されるため、ユーザーはディレクトリを意識することなくインストールしたパッケージを実行できる。
   • グローバルモードでインストールする場合は、npm install -g パッケージ名と、オプションを明示的に指定する必要がある。

TypeScriptのセットアップ

• typescript, @types/node, ts-nodeの3つのモジュールのインストール

npm install --save-dev typescript @types/node@22 ts-node

• TypeScriptの動作テスト

以下のコマンドを打って、tscコマンドのバージョンが表記されればTypeScriptのインストールは成功である。

npx tsc --version

インストールするパッケージの説明

npm installの--save-devオプションについて
開発だけでなく本番環境でも使うパッケージなのか、開発環境だけで良いパッケージなのかを指定する。違いはpackage.jsonでDependenciesに登録されるかdevDependenciesに登録されるかが異なる。

xpnコマンドについて

xpnは、ローカルモードでインストールしたまたはリモートのパッケージを実行するためのコマンド。
例えばTypeScriptのコードをコンパイルするtscコマンドについて、グローバルモードでインストールした場合はPATHが設定されているためプロンプトでtscと打てば実行できるが、ローカルモードでインストールした場所にはPATHがないため、そのままでは実行できない。そのため、xpnコマンドを利用して、パッケージを実行する。 npm execと同様の動きになる。

tscの初期化

TypeScriptコンパイラのtscの設定ファイルであるtsconfig.jsonを生成する。
この設定ファイルを編集することでコンパイラの動作をチューニングすることができるが、まずはデフォルトのままで利用する。

npx tsc --init

前提のTypeScritp環境のセットアップ

# npmの初期化
npm init --yes

# パッケージのインストール
npm install --save-dev typescript @types/node@22

# tscの初期化
npx tsc --init

とりあえずTypeScriptを動かしてみる

こちらのblogの内容を参考に動かしてみた。

• ./ts_practice/sample1.tsに以下のスクリプトを作成

console.log("Hello! Node.js × TypeScript");

• 手動でコンパイルしてみる

npx tsc --build

• メモ
  • コンパイルしたJavaScriptは、.js拡張子で保存される
  • tscはデフォルトでは、プロジェクトのrootディレクトリ配下(=npx tsc --initを実行しtsconfig.jsonファイルがあるディレクトリ) で.tsを探してコンパイルするように見える
• 手動で実行してみる

node ./ts_practice/sample1.js

• 生成された ./ts_practice/sample1.jsファイルを削除する

npx tsc --build --clean

• ts-nodeで実行してみる

npx ts-node ./ts_practice/sample1.ts

• ポイント
  • tscコマンド、nodeコマンドを実行せず、ts-nodeコマンド一つでTypeScriptをnode.jsで実行可能
  • この場合はJavaScriptにコンパイルされた.jsファイルの書き込みは発生しない

node.jsのhttpモジュールを使って簡易httpサーバを動かしてみる

引き続き、こちらのblogの内容を参考に動かしてみた。

• ./ts_practice/sample2.tsに以下のスクリプトを作成

import * as http from "http";

const port = 8989; // ポート番号

// httpサーバーを設定する
const server = http.createServer(
  (request, response) => {
    // サーバーにリクエストがあった時に実行される関数
    response.end("Hello! Node.js with TypeScript");
  }
);
// サーバーを起動してリクエストを待ち受け状態にする
server.listen(port);
// ログを出力する
console.log(`http://localhost:${port} へアクセスください`);

• 実行してみる

npx ts-node ./ts_practice/sample2.ts

• 別のターミナルを開いてアクセスしてみる

curl http://localhost:8989