使用 VScode 在 React 项目中调试独立的 Typescript 文件

Question

I've a React project created using create react app . Sometimes I want to play with typescript code in a separate file and debug it.

VSCode requires the generated .js folder to be set in the debug configuration, otherwise the following message appears.

Cannot launch program 'File.ts' setting the 'outFiles' attribute might help.

Or if set to "outFiles": ["${fileDirname}/*.js"]:

Cannot launch program 'File.ts' because corresponding JavaScript cannot be found.

I can't find where the project is generating the .js files. It seems create react app uses webpack, which should use ts-loader . It generates a bundle.js file, but I can't even find it in the workspace folder either.

For reference, my full launch.json. Any help is appreciated. Thanks!

{
   "version": "0.2.0",
   "configurations": [   
      // Not working  
      {
         "type": "node",
         "request": "launch",
         "name": "Debug File",
         "program": "${file}",
         "outFiles": ["${fileDirname}/*.js"]
      },
      {
         "type": "node",
         "name": "Run tests",
         "request": "launch",
         "args": [
            "test",
            "--runInBand"
         ],
         "cwd": "${workspaceFolder}",
         "console": "integratedTerminal",
         "internalConsoleOptions": "neverOpen",
         "disableOptimisticBPs": true,
         "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
         "protocol": "inspector"
      },
      {
         "name": "Chrome",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:3000",
         "webRoot": "${workspaceRoot}/src"
     }
   ]
}

Answer 1

You can either build the project as a .ts project and support the legacy js files, or you can include the typescript files output folder so you compile the .ts into .js, and the .js module will be included in your React app. But you cannot just drop a ts file in a js project and expect React to make that connection for you.

To keep your workspace organized, I recommend move the ts to a separate folder, init that folder as a ts project and include it back in your React project as a library (even if it's a single file)

You can then use testing frameworks such as mocha + chai and jest to test it. Both mocha and jest can test your .ts directly without requiring your to compile it (they're doing it for you, using packages such as jest-ts )

Lerna or Yarn workspaces can help with the linkage, and vs-code can be easily configured to support multiple projects (packages) in the workspace. including for testing.