Szukaj…


Wprowadzenie

Istnieją dwa sposoby uruchamiania i debugowania TypeScript:

Przełóż na JavaScript , uruchom w węźle i użyj odwzorowań, aby połączyć się z plikami źródłowymi TypeScript

lub

Uruchom TypeScript bezpośrednio za pomocą ts-node

W tym artykule opisano oba sposoby korzystania z programu Visual Studio Code i WebStorm . Wszystkie przykłady zakładają, że głównym plikiem jest plik index.ts .

JavaScript z SourceMaps w Visual Studio Code

W zestawie tsconfig.json

"sourceMap": true,

do generowania odwzorowań wraz z plikami js ze źródeł TypeScript za pomocą polecenia tsc .
Plik launch.json :

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\index.js",
            "cwd": "${workspaceRoot}",
            "outFiles": [],
            "sourceMaps": true
        }
    ]
}

To uruchamia węzeł z wygenerowanym plikiem index.js (jeśli twoim głównym plikiem jest index.ts) i debuggerem w programie Visual Studio Code, który zatrzymuje się w punktach przerwania i rozwiązuje wartości zmiennych w kodzie TypeScript.

JavaScript z SourceMaps w WebStorm

Utwórz konfigurację debugowania Node.js i użyj index.js jako parametrów węzła .

wprowadź opis zdjęcia tutaj

TypeScript z ts-node w Visual Studio Code

Dodaj ts-node do swojego projektu TypeScript:

npm i ts-node

Dodaj skrypt do package.json :

"start:debug": "ts-node --inspect=5858 --debug-brk --ignore false index.ts"

Plik launch.json musi zostać skonfigurowany do używania typu node2 i uruchamiania npm z start:debug skryptem start:debug :

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node2",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "windows": {
                "runtimeExecutable": "npm.cmd"
            },
            "runtimeArgs": [
                "run-script",
                "start:debug"
            ],
            "cwd": "${workspaceRoot}/server",
            "outFiles": [],
            "port": 5858,
            "sourceMaps": true
        }
    ]
}

TypeScript z ts-node w WebStorm

Dodaj ten skrypt do package.json :

"start:idea": "ts-node %NODE_DEBUG_OPTION% --ignore false index.ts",

Kliknij skrypt prawym przyciskiem myszy i wybierz opcję Utwórz „test: pomysł” ... i potwierdź przyciskiem „OK”, aby utworzyć konfigurację debugowania:

wprowadź opis zdjęcia tutaj

Uruchom debugger za pomocą tej konfiguracji:

wprowadź opis zdjęcia tutaj



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow