MacのVSCodeでTypeScriptのデバッグ環境を作成する

# はじめに
10年くらい前に`Windows`上で`TypeScript`を組んでいたことがありましたが、そこから離れていました。
作りたいものが出来たので、`JavaScript`ではなく`TypeScript`で最初から組もうするも環境構築からハマりました。10年経ってるんだから簡単になっていると思いきや意外と難しい。

そもそも仕組みを理解する必要がありますね。

# node.jsの用意
下記サイトを参照に始めました。

https://qiita.com/tkek321/items/6147c8b8b410ea9fdfae

node.js と npm がインストールされているかを確認し、最新に近いところまで バージョンアップ しました。

```
% node -v
v22.12.0
```

```
% npm -v
10.9.0
```

# TypeScriptをインストール
## 1.適当な場所にディレクトリを作成
筆者は`workspace`フォルダに色々なプロジェクトを作成しているので、今回はその中に`test`フォルダを作成します。　

```
% mkdir test
```

## 2.作成したディレクトリの中で npm initを実行
実行したときに色々聞かれる、そのままひたすらエンターでも良さそう。

```
% cd test
test % npm init 
```

これで、`package.json` が作成されます。

```json:package.json
{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.7.2"
  }
}
```

## 3.ローカルにTypeScriptをインストール
```
test % npm install --save-dev typescript
```

これにより、`test`フォルダ配下に`node_modules` フォルダが作成されます。

```
test % tsc -v                           
Version 5.7.2
```

## 4.tsconfig.jsonを作成
```
test % node_modules/.bin/tsc --init
```

生成された`tsconfig.json`は、コメントアウトされたパラメータまで記載されていて、ここに記載するには長過ぎるため、有効なパラメータのみ記載する。

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
```

# VSCode
VSCode で TypeScript を使うには、拡張機能「JavaScript and TypeScript Nightly」を追加する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/63eb882c-b951-32c3-b620-56c25f8d9d3a.png)

## インデント
vscodeを起動し「Ctrl + Shift + p」でコマンドパレットを開きます。
コマンドパレットで「Preferences: Configure … 」と入力し、選択肢に表示される
「基本設定：言語固有の設定を構成します…」を選択します。

言語を選択します。今回は「TypeScript」の設定をします。

`setting.json`ファイルが開くので、下記の設定を加えます。
`tabSize`に字下げする文字数を指定します。今回は`2`にしました。
`insertSpaces`に`true`を指定すると、タブキーでスペースを挿入します。

```json:setting.json
"[typescript]": {
  "editor.tabSize": 2,
  "editor.insertSpaces": true        
}
```

## 作業ディレクトリ直下にtsファイルを作成
テストプログラムは、Hello Worldよりは実践的としてフィボナッチ数列にしてみました。

```typescript:test.ts
const fib = (n: number): number => {
  if (n <= 2) {
    return 1;
  }
  return fib(n - 2) + fib(n - 1);
};

for (let i = 1; i <= 10; i++) {
  console.log(fib(i));
}
```

## ビルド設定
VSCodeでデバッグしたい場合、`tasks.json`と`launch.json`を作成する必要がある。

### tasks.jsonの作成
この段階では、まだタスクが作成されていないため、メニューバーのターミナルから「既定のビルドタスクの構成」を選択します。テンプレートから`tasks.json`を作成します。

```jsonc:tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
          "label": "Compile TypeScript",
          "type": "typescript",
          "tsconfig": "tsconfig.json",
          "problemMatcher": ["$tsc"]
        }
      ]
}
```

作業フォルダに`.vscode`フォルダが作成され、`tasks.json`ファイルが保存されます。

### launch.jsonの作成
サイドバーの「実行とデバッグ」をクリックします。
「`launch.json`ファイルを作成します。」をクリックします。どの環境の`Project`であるか？を聞かれるので、`Node.js`を選択しました。

```jsonc:launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}
```

`.vscode`フォルダ配下に`launch.json`ファイルが保存されます。

## デバッグ
`console.log`にブレークポイントを付けて、「▷Launch Program」をクリックします。

### エラーで実行できない
「ビルド タスクを実行」をすると出力には下記エラーがでます。

```
エラー: typescript タスクの検出は、次の構成のタスクに貢献しませんでした:
{
    "label": "Compile TypeScript",
    "type": "typescript",
    "tsconfig": "tsconfig.json",
    "problemMatcher": [
        "$tsc"
    ]
}
そのタスクは無視されます。
```

#### tasks.jsonの修正
ネットで検索して`tasks.json`を比較し、`group`が不足していたため追加して「ビルド タスクを実行」をすると上記エラーは出なくなり、`test.js`が生成されるようになりました。

* [VSCodeでTypescriptのデバッグを体験してみる](https://zenn.dev/byebyeworld/articles/vscode-typescript-debug)

```jsonc:tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
          "label": "Compile TypeScript",
          "type": "typescript",
          "tsconfig": "tsconfig.json",
          "problemMatcher": ["$tsc"],
          "group": {
			"kind": "build",
			"isDefault": true
		  }        
        }
    ]
}
```

### デバッグできない
ブレークポイントでも止まりません。デバッグなしで実行しても結果が表示されません。
まだ何か足りていないようです。

デバッグ コンソールにはエラーが出ています。

```
 /usr/local/bin/node ./test.ts
 Process exited with code 1
>Uncaught /workspace/ccc/test.ts:1
```

#### tsconfig.jsonの修正
`sourceMap`を`true`を指定することで、出力されたJavaScriptファイルが実際に動作させるとき、デバッガーが元のTypeScriptソースファイルを表示できるようになるため、`sourceMap`を追加しました。 

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "sourceMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
```

これで「ビルド タスクを実行」後に、「▷Launch Program」をクリックすることで、ブレークポイントの`console.log`で止まり、デバッグができるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/ba0d1154-0ade-642b-caf7-7e4f7f5f0bbd.png)

最終結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/4ab0d6b8-2226-bf1b-01b8-9c923813b067.png)

# 最後に
あとは、下記サイトのように別ファイルの`import`を使った場合でも出来るかを確認したい。

https://tech.bitbank.cc/20230216/