[TypeScript] TypeScript_환경설정

우선 바닐라 JS상태에서 시작한다고 가정하에 환경설정하는 법을 소개하겠습니다.

 

우선 타입스크립트를 사용하기 위해 npm모듈을 이용하여 설치해줍니다.

 

글로벌 설치 : 시스템 폴더에 설치(모든 프로젝트에서 사용)

npm install typescript -g

로컬 설치 : 현재 프로젝트에서만 사용

npm install typescript --save -dev

이렇게 사용자 목적에 따라 설치해줍니다. (앞으로 계속 TS사용할꺼면 글로벌 설치)

 

이후 tsc를 설치해줘야합니다.

tsc란 typescriptcompiler입니다. TS는 JS 환경에서 실행될 수 없습니다.

왜냐하면 JS가 실행되는 브라우저가 TS코드를 이해하지 못하기 때문입니다.

위의 그림과 같이 TS코드를 JS로 바꿔줘야지만 브라우저는 인식을 하고 실행을 할 수 있습니다.

이를 위해 설치해주는것이 tsc입니다.

tsc --init

설치하시면 기본 옵션이 설정되어있고 필요에 따라 주석을 지워 다른 옵션들을 사용할 수 도 있습니다.

 

기초적인 설정은 마쳤으니 테스트 해볼까요?

우선 app.ts 파일을 만들어주고 간단한 TS문법을 이용하여 출력해봅시다.

작성하고 나니 빨간줄 표시가 떴습니다!! 에러라고 생각되지만 에러가 아닌 vscode의 버그(?)정도 라고 생각하면 될 것같습니다.

 

해결법은 코드 제일 밑에 export {}를 선언해 주시면됩니다.

 

이후 콘솔에 위에 설명한 tsc를 이용하여 app.ts를 컴파일 해줍시다.

tsc app.ts

app.ts를 컴파일 해줌으로써 app.js가 자동생성된 모습을 볼 수 있습니다.!

 

이로서 기초적인 환경설정은 끝났습니다.!

추가적인 환경설정을 더 보겠습니다.!

 

TS개발하면서 계속 tsc app.ts를 하기엔 너무나 번거롭습니다. 이를위해 tsc -watch 옵션이 있습니다.

자동으로 TypeScript 파일에 변화가 있을 때마다 다시 컴파일을 해줍니다.

tsc --watch

이렇게 실시간으로 TS를 개발하면서 JS로 바뀐 모습은 확인 할 수 있지만 출력값이나 JS 실행을 위해서는

node app.js 커맨드를 입력해야하는 귀찮음이 생깁니다.

 

실시간 컴파일과 더불어 app.js 빌드까지 한번에 수행되면 좋겠죠? 이를 위해서는 npm init 명령어를 통해 package.json파일을 만들어줍니다. (npm init 치시고 입력값없이 쭉 엔터 치시면됩니다.)

그러면 package.json파일이 만들어 지는데 여기서 scripts부분에(없으시면 직접 적으시면 됩니다.)

start에 tsc-watch 옵션과 node 파일명을 입력하게 되시면 npm start를 실행할때 두개가 실행됩니다. --onSuccess(앞에 명령어가 정상실행되면 \" 뒤에꺼 실행)

이후 npm start를 하게되면 정상적으로 실시간 컴파일이랑 node가 실행되는것을 볼 수 있다.

 

만약 이런 에러가 생긴다면 다음과 같은 해결법이 있다.

 

1.  npm install tsc-watch  이후에도 안된다면

2. tsc라는 모듈을 찾지 못해서 발생하는 오류입니다.  TS설치시 글로벌로 설치하였다면 현재 프로젝트에는 TS관련 모듈이 없기 때문입니다. npm link를 이용하여 글로벌(시스템 폴더)에서 링크를 이용하여 가져오는 방식으로 하면됩니다.

npm link typescript

이렇게 해도 안된다면 npm install typescript --save -dev 을 이용하여 현재 프로젝트에 TS모듈을 설치해서 사용하면 됩니다.

 

더욱 자세한 설명이나 옵션, 환경설정과 같은 정보는 검색을 통해서 찾아보시면 될 것 같습니다.

제가 유익하게 참고한 정보는 다음과 같습니다.

1. 노마드 코더

Watch Now - 노마드 코더 Nomad Coders

2. 벨로그

바닐라 TypeScript 시작하기 - 프로젝트 환경설정

위에 링크로 걸어 둔 노마드 코더의 TS로 만들어보는 블록체인이라는 강의는 TS가 처음이시라면 학습을 권유해드립니다. 환경설정부터 TS의 기초적인 문법을 다뤄서 빠르게 학습할 수 있습니다.