## 概要
[[TypeScript]]のコードやライブラリの動きを確かめたいとき、[[VSCode]]を使って試す方法。
## プロジェクト作成
[[ts-node]]を使う。[[ts-nodeを使ってTypeScriptのソースコードを直接実行できるプロジェクトを作成#Node js プロジェクトの作成]]を参考にプロジェクトを作成する。
## [[VSCode]]で読みこみ
[[VSCode]]で開く。
```console
code .
```
[[VSCode Extension]]の[[Prettier - Code formatter]]がインストールされていない場合はインストールする。そして、[[Prettier拡張でTypeScriptコードをフォーマット (VSCode)|Prettier拡張でTypeScriptコードをフォーマット]]できるように設定する。
## デバッグ不要の場合
ビルドタスクを使って実行する。[[VSCode]]で`既定のビルドタスクを構成する`を選ぶ。
![[Pasted image 20210714212743.png]]
先ほど作成した `dev` を選ぶ。
![[Pasted image 20210714212810.png]]
`tasks.json`ができる。
```json:tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "dev",
"problemMatcher": [],
"label": "npm: dev",
"detail": "ts-node index.ts",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
```
`ビルドタスクの実行` を選ぶ。
![[Pasted image 20210714213101.png]]
[[TypeScript]]コードが内部で[[JavaScript]]に変換され、実行した結果がターミナルに表示されればOK。設定すれば、[[ts-nodeを使ってTypeScriptのソースコードを直接実行できるプロジェクトを作成#ソースコード変更時に自動再実行|ソースコード変更時に自動再実行]]することもできる。
## デバッグが必要な場合
`launch.json`を作成する。中身は[ts-nodeのVisual Studio Codeレシピ]を参考にする。`package.json`の`scripts`は見ていないため消しても構わない。
```json:.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"runtimeArgs": ["-r", "ts-node/register"],
"args": ["${workspaceFolder}/index.ts"]
}
]
}
```
[ts-nodeのVisual Studio Codeレシピ]: https://typestrong.org/ts-node/docs/recipes/visual-studio-code
ブレークポイントをセットして`デバッグの開始`をすると、ブレークポイントでストップする。`デバッグなしで実行`すると通常の実行もできる。
[[--inspect]]フラグを使えばソースコード変更時に自動再実行することもできる[^1]が、別途実行されたプロセスを[[VSCode]]で待ち受ける形になるため、設定や実行が煩雑になる。正直、デバッグしたいケースでは逐一実行で問題ないためオススメしない。
[^1]: [Try to debug typescript file · Issue \#9 · wclr/ts\-node\-dev](https://github.com/wclr/ts-node-dev/issues/9)など