【TS】TypeScriptを実行する環境を作る

Viteやreact-appなどの便利さに頼り切っていたので、いざTypeScriptを実行したいってなっても、各作業の意味を理解できていないので、メモ。

ノードバージョンマネージャ（NVM）のインストール

ノードバージョンマネージャ（NVM）とはノード・バージョン管理ツールのことで、これがあれば1つの環境の中に複数のバージョンのNode.jsをインストールできて、必要に応じて切り替えができる。

1.NVMのGitリポジトリにアクセス

2.バージョン横の「Latest」をクリック。

3.「nvm-setup.exe」をダウンロードし、実行。（すべて初期値のまま）

Node.jsのインストール

1.Powershellを管理者権限で起動

2.まだNode.jsがインストールされていないことを確認するため、nvm lsコマンドを実行。

# インストールされているNode.jsの一覧を表示するコマンド
nvm ls

# No installations recognized.　と出ればOK

3.インストールするNode.jsのバージョンを公式サイトから確認

4.インストールを実行

Node.jsのインストール

# インストールコマンド（22.12.0はインストールしたいバージョン）
nvm install 22.12.0

上記コマンドを実行し、以下メッセージが表示されればOK。 Node.jsと一緒にnpm（v10.0.9）もインストールされている。

インストールコマンド実行結果メッセージ

Downloading node.js version 22.12.0 (64-bit)...
Extracting node and npm...
Complete
npm v10.9.0 installed successfully.

Installation complete. If you want to use this version, type

nvmでインストールした場合、node.exeは以下パスに配置される。
C:\Users\{user}\AppData\Roaming\nvm\{version}\node_modules\npm\bin

5.使用するnode.jsのバージョンを指定する
このコマンドは実行しないと、node.exeのパスが環境変数に登録されず、nodeコマンドが使えない。

環境変数にnode.exeのパスを登録

# 使用するnode.jsのバージョンを指定
nvm use 22.12.0

システム環境変数上でnode.exeの参照パスとして%NVM_HOME%が登録されている

6.ターミナルを開いてnode -vコマンドとnpm -vでバージョンが取得できればOK。

TypeScriptのインストール

1.Package.jsonの作成

npm init -y

2.TypeScriptとts-nodeのインストール

Node.jsはJavaScriptを実行できるが、TypeScriptを直接実行できない。TypeScriptのままNode.jsを実行できるようにするためts-nodeパッケージもインストール。

npm install typescript ts-node

3.Node.jsの型定義ファイル作成

Node.js内のメソッドや変数やクラスをTypeScriptを検知できず、コンパイルエラーになる。そこで、Node.jsの型定義ファイル(.d.ts)を作成し、TypeScriptがNode.jsのメソッドなどを検知できるようにする。

npm install @types/node -D

4.tsconfig.jsの作成

package.jsonのdependencies(devDependencies)にtypescriptがに入っていることを確認した状態で、以下コマンドを実行。

npx tsc --init

5.nodemonのインストール

ホットリロードできるようにするため、インストール

npm install nodemon --save-dev

6.package.jsonを更新

tsファイルを更新する度にホットリロードされるようのコマンドを登録

package.json

"scripts": {
　"test": "echo \"Error: no test specified\" && exit 1",
+ "start": "nodemon --watch src --ext ts,tsx --exec ts-node --ignore '*.test.ts' --delay 3 src/index.ts"
}

• srcディレクトリ配下を監視（--watchオプション）
• .tsと.tsxが監視対象（--extオプション）
• .test.ts接尾辞の付いたファイルは監視対象外（--igonreオプション）
• ts-nodeを使用してsrc/index.tsを実行（--execオプション）
• ファイル変更後、3秒間待機してホットリロード実行（--delayオプション）

tsファイルを実行する

1.tsファイル作成

プロジェクト直下にsrc/index.tsファイルを作成。

src/index.ts

console.log('Hello! world');

2.ホットリロード監視の実行

以下コマンドを実行。ターミナルにHello! worldが表示されればOK

npm run start

個別にtsファイルを実行する

npx ts-node other/app.ts