Отладка автономного файла Typescript в проекте React с использованием VScode

Question

Я создал проект 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 файлы. Похоже, что приложение create response использует веб-пакет, который должен использовать ts-loader . Он генерирует пакетный файл. js, но я даже не могу найти его в папке рабочей области.

Для справки, мой полный запуск. 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, либо включить выходную папку файлов машинописного текста, чтобы скомпилировать .ts в. js и. js модуль будет включен в ваше приложение React. Но вы не можете просто удалить файл ts в js проекте и ожидать, что React создаст это соединение для вас.

Чтобы сохранить ваше рабочее пространство организованным, я рекомендую переместить ts в отдельную папку, инициализировать эту папку как проект ts и включить ее обратно в ваш проект React как библиотеку (даже если это один файл)

Затем вы можете использовать тестовые среды, такие как mocha + chai и jest, чтобы протестировать его. И mocha, и jest могут тестировать ваши .ts напрямую, не требуя, чтобы вы его скомпилировали (они делают это за вас, используя такие пакеты, как jest-ts)

Lerna или Yarn workspaces могут помочь с linkage и vs-code можно легко настроить для поддержки нескольких проектов (пакетов) в рабочей области. в том числе для тестирования.