TypeScript
デバッグ
サーチ…
前書き
TypeScriptの実行とデバッグには2つの方法があります。
JavaScriptにトランスパイルし 、ノードで実行し、マッピングを使用してTypeScriptソースファイルにリンクする
または
ts-nodeを使って直接TypeScriptを実行する
この記事では、 Visual Studio CodeとWebStormの両方を使用する方法について説明します。すべての例では、メインファイルがindex.tsであると想定しています。
Visual StudioコードのSourceMapsを使用したJavaScript
tsconfig.json
セット
"sourceMap": true,
tsc
コマンドを使用してTypeScriptソースからjsファイルと一緒にマッピングを生成します。
launch.jsonファイル:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\index.js",
"cwd": "${workspaceRoot}",
"outFiles": [],
"sourceMaps": true
}
]
}
これにより生成されたindex.js(メインファイルがindex.tsの場合)ファイルとVisual Studio Codeのデバッガがブレークポイントで停止し、TypeScriptコード内の変数値が解決されます。
WebStormのSourceMapsを使用したJavaScript
Node.js デバッグ設定を作成し、 index.js
をNodeパラメータとして使用します 。
Visual Studioコードでts-nodeを持つTypeScript
あなたのTypeScriptプロジェクトにts-nodeを追加してください:
npm i ts-node
package.json
スクリプトを追加する:
"start:debug": "ts-node --inspect=5858 --debug-brk --ignore false index.ts"
launch.json
は、 node2タイプを使用し、startを実行するnpmを起動するように設定する必要がありますstart:debug
スクリプト:
{
"version": "0.2.0",
"configurations": [
{
"type": "node2",
"request": "launch",
"name": "Launch Program",
"runtimeExecutable": "npm",
"windows": {
"runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [
"run-script",
"start:debug"
],
"cwd": "${workspaceRoot}/server",
"outFiles": [],
"port": 5858,
"sourceMaps": true
}
]
}
WebStormにts-nodeを持つTypeScript
このスクリプトをpackage.json
追加してください:
"start:idea": "ts-node %NODE_DEBUG_OPTION% --ignore false index.ts",
スクリプトを右クリックし、[ テスト:アイデアの作成 ]を選択し、[OK]をクリックしてデバッグ設定を作成します。
この構成を使用してデバッガを起動します。
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow