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

Question

我有一个使用 create react app 创建的 React 项目。有时我想在一个单独的文件中使用打字稿代码并对其进行调试。

VSCode需要在调试配置中设置生成的.js文件夹，否则会出现如下提示。

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

或者如果设置为 "outFiles": ["${fileDirname}/*.js"]:

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

我找不到项目生成 .js 文件的位置。似乎创建反应应用程序使用 webpack，它应该使用ts-loader。它会生成一个 bundle.js 文件，但我什至在工作区文件夹中也找不到它。

作为参考，我的完整launch.json。任何帮助表示赞赏。谢谢！

{
   "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

您可以将项目构建为 .ts 项目并支持旧版 js 文件，也可以包含 typescript 文件输出文件夹，以便将 .ts 编译为 .js，并且 .js 模块将包含在您的反应应用。 但是你不能仅仅在一个 js 项目中放置一个 ts 文件并期望 React 为你建立这个连接。

为了让你的工作空间井井有条，我建议将 ts 移动到一个单独的文件夹中，将该文件夹作为一个 ts 项目初始化，并将它作为一个库包含在你的 React 项目中（即使它是一个文件）

然后您可以使用mocha + chai 和jest 等测试框架对其进行测试。 mocha 和 jest 都可以直接测试你的 .ts 而不需要你编译它（他们正在为你做这件事，使用像 jest-ts 这样的包）

Lerna 或Yarn workspaces 可以帮助链接，并且可以轻松配置 vs-code 以支持工作区中的多个项目（包）。包括用于测试。