How to debug typescript in vscode

How-to-debug-typescript.md

1. some packages should be installed locally

   npm install -S ts-node typescript

2. To make sourceMap work normally, it would best enable watching the update of ts files, such as the generated .js file is always most updated:

   tsc -w

3. lauch.json should be configured like below:

   "configurations": [
       {
         "type": "pwa-node",
         "request": "launch",
         "name": "Launch TS",
         "runtimeExecutable": "node",
         "runtimeArgs": ["--loader", "ts-node/esm", "--experimental-modules", "--es-module-specifier-resolution=node"],
         "skipFiles": [
           "<node_internals>/**"
         ],
         "program": "${workspaceFolder}\\index.ts",
         "outFiles": [
           "${workspaceFolder}/build/**/*.js"
         ]
       }
     ]

4. To apply the typing feature when introducing third-party packages, import should be used rather than require. As such, add "type":"module" to package.json file.

5. tsconfig.json (created by running tsc --init) should be configured like below:

   {
     "compilerOptions": {
       "module": "ESNEXT",
       "esModuleInterop": true,
       "target": "es5",
       "moduleResolution": "Node",
       "outDir": "dist",
       "forceConsistentCasingInFileNames": true,
       "noFallthroughCasesInSwitch": true,
       "isolatedModules": false,
       "strict": true,
       "noImplicitAny": true,
       "useUnknownInCatchVariables": false,
       "inlineSourceMap": true
     }
   }

Reference: https://stackoverflow.com/a/69055912

Above steps have been well tested. Testing environment:

IDE: VSCODE
NODE: v16.14.2
TypeScript: v4.4.4