TypeScript 개발 환경 설정하기(Debugging)

VSCode

빈 디렉터리 열기

npm init 하기

npm init -y

tsc init 하기
이때 반드시 sourceMap을 만들어줘야 js파일을 ts로 디버깅 할 수 있다.

tsc --init --sourceMap

타입스크립트 파일 만들고 중단점 걸기

타입스크립트 파일 sourceMap을 만들며 자바스크립트로 컴파일 하기

tsc *ts --sourceMap

또는 타입스크립트 파일 변경을 관측하면서 자동으로 자바스크립트로 컴파일하게 할 수 있다.
새로운 터미널을 열어서 아래 명령을 입력한다.

tsc --watch

보이는것처럼 관측하며 자동으로 컴파일한다.

생성된 자바스크립트 파일이랑, map 파일 확인하기

디버깅 탭 가서 launch.json 파일 만들기

이때, node로 만들면 된다.

생성된 launch.json 파일의 program이 생성된 자바스크립트 파일인지 확인한다.

디버깅하기(F5)

타입스크립트 중단점에 맞춰 디버깅이 되는것을 볼 수 있다!!

---

WebStrom

똑같이 터미널을 열어서 아래와 같은 설정들을 한다.

npm init -y
tsc --init --sourceMap

파일을 만들고 중단점을 만든다.

타입스크립트를 컨파일한다.
하나씩 컴파일해도되고, 자동으로 관측하면 컴파일하게 해도 된다. 아래 두가지 중 하나를 한다.

tsc *ts --sourceMap

tsc --watch

난 새로운 터미널을 만들어서 watch를 했다.

자바스크립트 파일이 생성됨을 확인한다.

디버깅 옵션을 만들자.
우측 상단에 Edit Configurations에 들어간다.

좌측 상당에 새로 만들기를 눌러서 node.js를 선택한다.

컴파일된 자바스크립트 파일을 선택한다.

저장하고 디버깅하기를 누르면 타입스크립트 중단점에서 잘 디버깅 되는 모습을 볼 수 있다.

콘솔 입출력은 Process Console탭을 활용하자.