jsts

WebStorm으로 TypeScript debug 모드 사용하기

typescript, webstorm

WebStorm을 비롯한 JetBrains IDE를 사용할 때 강력한 debug 모드를 제공한다.
이번 포스팅에서는 TypeScript을 사용할 때 WebStorm으로 debug 모드 사용법을 알아보겠다.

  • 먼저 빈 디렉토리를 생성하여 pacakage.json, tsconfig.json을 생성하자

1
2
npm init -y # init npm project
tsc -init # init typescript config

  • 그리고 실행할 간단한 ts 파일 2개를 생성한다.

1
2
3
4
// hello.ts
export default function hello(name: string): string {
  return `Hello ${name}`;
}
1
2
3
4
5
6
7
// index.ts
import hello from "./hello";

const name = 'devson';
const message = hello(name);

console.log(message);

  • Run/Debug Configurations 설정을 한다.

오른쪽 위에 Add Configurations...를 클릭한다.

+ 버튼(Add New Configuration)을 클릭하고 Node.js를 선택한다.

그리고 Node parameters에 --require ts-node/register,
JavaScript file에 index.ts를 설정한다.

이제 Typescript를 실행할 수 있도록 dev dependency에 typescript와 ts-node를 추가한다.

1
npm i -D typescript ts-node

이제 모든 설정이 끝났고 break point를 걸고 debug를 실행하면 다음과 같이 잘 동작하는 것을 확인할 수 있다.

Share