[TypeScript] tsc-watch 사용법 및 에러 해결

 

---

 

 

● tsc-watch는 무엇일까?

: tsc-watch를 사용하지 않으면 TypeScript(ts)코드가 바뀔때마다 JavaScript(js)로 컴파일 한 뒤에 node로 실행해야하는 번거로운 작업이 생깁니다.

매번 ts파일 수정할때마다 node를 실행하기란 힘들기때문에 tsc-watch를 이용하여 ts코드가 수정될때마다 바로 자동으로 컴파일한 뒤에 js을 실행해주도록 하는 편리한 기능입니다.

일반적으로 nodemon과 비슷하지만 TypeScript의 경우 노드 서버를 다시 시작하는 데 사용됩니다.

 

자세한 문서는 npm 공식 사이트에서 확인 바랍니다.

www.npmjs.com/package/tsc-watch

 

 

 

 

1. TypeScript 설치

$ npm -d add typescript

typescript를 먼저 설치해줍니다. 

 

 

 

 

2. tsc-watch 설치방법 

$ npm add tsc-watch --dev

tsc-watch를 추가해줍니다.

 

 

 

 

 

3. src와 dist 디렉토리를 만들어줍니다.

 

 

 

4. tsconfig.json파일을 수정해줍니다.

여기서 중요한것은 include에 src/**/*을 입력해줘야 ts파일이 모두 src폴더에 있다는것을 알수있습니다.

outDir에 dist로 입력해줘야 ts파일이 js파일로 컴파일되어 js파일이 dist폴더 밑으로 저장되는것을 명시합니다.

 "src/**/*"의 의미는 src 폴더 내의 모든 파일과 폴더라는 의미입니다.

 

 

 

 

5. package.json파일을 수정합니다.

위처럼 npm의 start를 하게되면 실행되도록 "start": "tsc-watch --onSuccess \"node dist/index.js\"" 입력해줍니다.

--onSuccess의 의미는 컴파일을 성공했을 때만 그 이하의 내용을 실행하라는 의미입니다.

즉, 아래 scripts는 tsc-watch를 실행하되 성공하면 node로 dies/index.js를 실행하라는 것입니다.

 

 

 

 

6. 결과 확인

커맨드창에 npm start를 입력해주면 위와 같이 src/index.ts파일을 js파일로 컴파일하여 출력해줍니다.

 

 

---

에러 발생

작업하다가 위와 같은 오류가 발생하여 당황헀지만, 아래와 같이 해결하였습니다.

 

 

해결

tsconfig.json파일에서 코드수정중에 띄어쓰기가 존재해서 발생한 문제로써 띄어쓰기를 없애주니까 정상 작동했습니다.

 

 

 

 

---