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

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


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

1.[NVM](https://github.com/coreybutler/nvm-windows/releases)のGitリポジトリにアクセス
<br>

2.バージョン横の「Latest」をクリック。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943997/cca0cf7c-5356-c4c7-b437-ad17df244e46.png)
<br>

3.「nvm-setup.exe」をダウンロードし、実行。（すべて初期値のまま）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943997/1694999b-504a-fad2-1966-2fd95ee5e96d.png)

### Node.jsのインストール
1.Powershellを管理者権限で起動<br>
2.まだNode.jsがインストールされていないことを確認するため、`nvm ls`コマンドを実行。
```powershell

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

# No installations recognized.　と出ればOK
```
<br>

3.インストールするNode.jsのバージョンを[公式サイト](https://nodejs.org/en/)から確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943997/fa902b9f-4a8c-87eb-ed82-5671fa09bc01.png)
<br>

4.インストールを実行
```powershell:Node.jsのインストール
# インストールコマンド（22.12.0はインストールしたいバージョン）
nvm install 22.12.0
```

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

```bash:インストールコマンド実行結果メッセージ
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
```

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


<br>

5.使用するnode.jsのバージョンを指定する
このコマンドは実行しないと、node.exeのパスが環境変数に登録されず、nodeコマンドが使えない。
```powershell:環境変数にnode.exeのパスを登録
# 使用するnode.jsのバージョンを指定
nvm use 22.12.0
```
:::note info
システム環境変数上でnode.exeの参照パスとして`%NVM_HOME%`が登録されている
:::

<br>

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


### TypeScriptのインストール

#### 1.Package.jsonの作成
```powershell
npm init -y
```

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

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

```powershell
npm install @types/node -D
```
 #### 4.tsconfig.jsの作成
 package.jsonのdependencies(devDependencies)にtypescriptがに入っていることを確認した状態で、以下コマンドを実行。
 ```powershell
npx tsc --init
```

#### 5.nodemonのインストール
ホットリロードできるようにするため、インストール
 ```powershell
npm install nodemon --save-dev
```

#### 6.package.jsonを更新
tsファイルを更新する度にホットリロードされるようのコマンドを登録
```diff_json: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`ファイルを作成。

```typescript:src/index.ts
console.log('Hello! world');
```

#### 2.ホットリロード監視の実行
以下コマンドを実行。ターミナルにHello! worldが表示されればOK
```powershell
npm run start
```


#### 個別にtsファイルを実行する
```powershell
npx ts-node other/app.ts
```