TypeScript tsc-watch 사용하기

* 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다.

* tsc-watch 사용은 TypeScript 타입스크립트 기본세팅 방법을 따라하신 후 사용하기를 권장합니다.

---

본 글에서 다룰 내용

• tsc-watch 사용방법
• tsc-watch를 사용하면서 발생한 오류 및 해결방법

---

왜 tsc-watch를 사용하는 것인가?

 

원래는 ts코드가 바뀔 때마다 js로 컴파일 한 뒤, node로 실행하는 과정을 반복해야했지만, tsc-watch를 사용하면 ts코드가 바뀔때마다 자동으로 컴파일 해준 뒤 js로 실행시켜준다.

 

쉽게 말해 TypeScript버전 nodemon입니다!

---

제일 먼저 tsc-watch를 설치합니다.

 

tsc-watch 설치하기(yarn add tsc-watch --dev)

---

src 폴더와 dist 폴더를 만들어 줍니다.

 

폴더 경로

dist 폴더는 컴파일 된 JavaScript파일들이 모여있는 곳 입니다.

src 폴더는 TypeScript 파일들이 모여있는 곳 입니다.

---

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

 

수정된 tsconfig.json 파일

 

• "outDir" : "dist" - 컴파일 된 JavaScript 파일이 모일 경로를 설정해 줍니다.
• "include" : ["src/**/*"] - TypeScript 파일이 모여있는 경로를 설정해 줍니다.

---

package.json 파일을 수정해줍니다.

 

수정된 package.json 파일

"start" : "tsc-watch --onSuccess(컴파일이 성공했을 때) \" 이 명령어를 실행해라 \" "

---

위의 과정을 따라하시면 아래와 같은 결과를 얻으실 수 있습니다.

 

결과 이미지

결과 이미지 입니다.

처음 yarn start로 실행했을 때 결과가 뜨고, 코드를 수정한 뒤 Ctrl + S로 저장을 하면 바로 수정된 결과가 출력됩니다.

---

문제 발생

 

위의 설정을 모두 한 뒤 'yarn start' 명령어를 입력했을 때 아래와 같은 오류가 발생했다.

 

오류 이미지

 

그래서 오류를 고치기 위해 열심히 구글링을 한 결과 정말 어이없는 오류가 발생한 것이다.

 

TypeScript 기본 세팅 방법 글에서 TypeScript를 설치했을 때 현재의 폴더에서 global로 TypeScript를 설치했었다.

그것이 오류가 발생하는 원인이였다.

 

이 오류를 고치려면 현재의 폴더에서 yarn add typescript 명령어를 입력해 TypeScript만 설치하면 끝나는 문제였다.

 

자주 발생하지 않는 오류인 것 같지만 그래도 혹시나 저와 똑같은 오류가 발생한 사람들을 위해 작성했습니다.

---

참고 문헌 및 사이트

 

노마드코더 Build a blockchain with Typescript - https://www.youtube.com/watch?v=-dyrcJr5NiQ&list=PL7jH19IHhOLNM5mePXxbpnPefi6PiiNCX&index=4

tsc-watch npm 공식 문서 - https://www.npmjs.com/package/tsc-watch

 

긴 글 읽어주셔서 감사합니다😀