수색…


소개

TypeScript를 실행하고 디버깅하는 두 가지 방법이 있습니다.

JavaScript로 변환 , 노드에서 실행 및 매핑을 사용하여 TypeScript 소스 파일로 다시 링크

또는

ts-node를 사용하여 직접 TypeScript 실행

이 기사에서는 Visual Studio CodeWebStorm을 사용하는 두 가지 방법에 대해 설명합니다. 모든 예에서는 주 파일이 index.ts 라고 가정합니다.

Visual Studio 코드의 SourceMaps가있는 JavaScript

tsconfig.json 세트에서

"sourceMap": true,

tsc 명령을 사용하여 TypeScript 소스의 js 파일과 함께 매핑을 생성합니다.
launch.json 파일 :

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

이것은 생성 된 index.js (주 파일이 index.ts 인 경우) 파일과 Visual Studio Code의 중단 점에서 중단되고 TypeScript 코드 내의 변수 값을 해결하는 디버거로 노드를 시작합니다.

WebStorm의 SourceMaps가있는 JavaScript

Node.js 디버그 구성을 만들고 index.jsNode 매개 변수로 사용하십시오 .

여기에 이미지 설명을 입력하십시오.

Visual Studio 코드에 ts-node가있는 TypeScript

Type-Script 프로젝트에 ts-node를 추가하십시오.

npm i ts-node

package.json 스크립트를 추가하십시오.

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

launch.jsonnode2 유형을 사용하고 시작을 실행하는 npm을 시작하도록 구성되어야합니다 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
        }
    ]
}

WebStorm에 ts-node가있는 TypeScript

이 스크립트를 package.json 추가하십시오.

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

스크립트를 마우스 오른쪽 버튼으로 클릭하고 'test : idea'만들기 ...를 선택한 다음 'OK'를 선택하여 디버그 구성을 만듭니다.

여기에 이미지 설명을 입력하십시오.

다음 구성을 사용하여 디버거를 시작하십시오.

여기에 이미지 설명을 입력하십시오.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow