typescript debugging with vscode

vscode에서 typescript 코드를 작성하고 테스트 코드를 작성했다. 디버깅을 실행해도 에러가 났는데 ts -> js로 변환하는 작업이 필요했다.

command shift D를 누르거나 vscode의 Run and Debug 버튼 클릭한다.
Add Configuration 누르고 Mocha Tests 선택해서 기본 launch.json 파일을 생성한다.

yarn add ts-node/register 명령어로 .ts를 .js로 변환해주고 node를 실행해주는 패키지를 설치한다.

args 에 --require ts-node/register 를 추가해준다.

launch.json

{
    "configurations": [
        {
            "type": "pwa-node",
            "args": [
                "--ui",
                "bdd",
                "--require",
                "ts-node/register",
                "--timeout",
                "999999",
                "--colors",
                "--bail",
                "${workspaceFolder}/test/**",
            ],
            "internalConsoleOptions": "openOnSessionStart",
            "name": "Mocha Tests",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "request": "launch",
            "env": {
                "NODE_ENV": "test",
            },
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ],
        }
    ]
}

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es2015"
    ],
    "module": "commonjs",
    "rootDir": "./",
    "moduleResolution": "node",
    "sourceMap": true,
    "removeComments": true,
    "noEmitOnError": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
  },
  "include": [
    "./**/*.ts",
  ],
  "exclude": [
    "node_modules",
  ]
}

테스트 코드를 작성하고 브레이크 포인트를 찍은 뒤 디버깅 버튼을 누르면 테스트가 실행되고 브레이크 포인트에서 멈추게 된다.

IDE를 활용해서 디버깅을 하면 매번 테스트 코드를 실행하지 않고도 특정 라인에서 함수를 호출해보거나 변수들을 가지고 계산해 볼 수 있다.