TypeScript 설치 및 사용

node.js 설치

 

 

⊙ https://nodejs.org  

Node.js

as by 2022/07/20

• v16.16.0 LTS
• v18.6.0 Current

 

⊙  node.js version manager

 

1. nvm(권장)

https://github.com/coreybutler/nvm-windows        for Windows

https://github.com/nvm-sh/nvm                             for macOS

 

2. n

https://github.com/tj/n

 

 

 

browser설치

보통은 Chrome 사용(권장)

 

 

 

TypeScript 컴파일러 설치

 

1. npm (권장)

• npm i typescript -g
• node_modules/.bin/tsc
• tsc source.ts

 

2. Visual Studio plugin으로서 설치

• Visual Studio 2017 / 2015 Update 3 이후로는 디폴트로 설치되어 있음
• 아니면 설치

 

 

컴파일러 사용 방법 예

 

1. 타입스크립트 컴파일러를 글로벌로 설치한 후, 

•  CLI 명령어로 파일 컴파일
• 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일
• 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일(watch 모드)

 

2. 프로젝트에 타입스크립트 컴파일러를 설치한 후,

• .bin 안의 명령어로 파일 컴파일
• npm 스크립트로 파일 컴파일
• 프로젝트에 있는 타입스크립트 설정에 맞춰 npm 스크립트로 컴파일
• 프로젝트에 있는 타입스크립트 설정에 맞춰, npm 스크립트로 컴파일(watch 모드)

 

 

1.번 방법으로 사용

 

타입스크립트 컴파일러를 글로벌로 설치

npm i typescript -g

 

 

타입스크립트 컴파일러가 설치되면 tsc로 컴파일링 명령을 할 수 있게 된다.

우선, tsc를 쳐보니 버전, 명령어, 옵션 등 관련 정보를 확인해볼 수 있었다.

 

 

위의 순서대로 보자면,

처음에 test.ts 파일을 만들고,(touch)

test.ts 파일을 타입스크립트 컴파일러로 컴파일링 한다.(tsc)

창에 별다른 일이 없다면 자바스크립트 파일로 잘 컴파일링이 되었다는 뜻이므로,

컴파일링 되어 생성되었을 test.js 파일을 읽어본다.(cat)

파일만 생성하고 따로 내용 작성이 안해서 빈 파일이라,

vim을 열어 내용을 타입스크립트 파일에 간단히 작성하고, 다시 읽어본다.

그리고, 아까 컴파일링했던 파일을 열어보니 여전히 비어있다.

지금 내용을 작성했던 타입스크립트 파일을 다시 컴파일링하고,

컴파일링되었을 자바스크립트 파일을 열어보니 내용이 컴파일링되어 들어있는 것을 볼 수 있었다.

 

 

프로젝트 폴더 안에 들어있는 모든 타입스크립트 파일을 어떤 방식으로 컴파일링할 것인지에 대한 설정 파일을 같이 만들어줘야 한다.

이 때, 자동으로 이런 설정 파일(tsconfig.json)을 디폴트로 생성해줄 수 있는 명령어가 tsc --init 이다 ! 

 

 

폴더 안에 두 개의 파일이 있는 것을 확인할 수 있는데,(ls)

tsconfig.json 설정 파일이 들어있는 폴더에서 tsc를 실행시키게 되면,

그 폴더(프로젝트)는 tsconfig.json 설정 파일에 들어있는대로, 컴파일링 설정 내용이 세팅되게 된다 !

 

 

--init을 통해 기본적인, 표준적인 설정의 내용으로 설정파일이 생성되었으므로,

컴파일링 명령 tsc를 입력하면 자동으로 같은 이름의 다른 확장자(js)로 컴파일링된 파일이 만들어져 같은 경로에 들어있음(표준적인 설정)을 볼 수 있다. 

 

tsconfig.json 설정 파일의 내용을 수정하거나 재설정하고 나서, tsc 명령어를 실행하면 변경된 설정 파일의 세팅대로 컴파일링이 될 것이다. 

 

tsconfig.json의 내용이 변경될 때마다, tsc 명령어로 다시 적용시켜주는 것 대신

tsc -w라는 명령어로 워치 모드로 바꿔주면, 파일이 수정될 때마다 tsc 명령어 없이도 자동으로 컴파일이 된다.

 

2.번 방법으로 사용

 

먼저, 글로벌로 설치된 것을 삭제하고, 만들었던 프로젝트 폴더도 삭제했다 다시 생성해 시작

 

npm 프로젝트(노드 프로젝트, npm 라이브러리에 디펜던시가 모두 등록될 수 있는 형태)로 만들어주기 위해,

npm init을 하면 프로젝트의 내용이나 정보에 대해 묻는 것을 디폴트로 모두 yes해서 한번에 설정하여 보여주게 하려면,

-y 옵션을 붙여서 입력한다.

 

 

디폴트로 설정이 되어있는 내용이 package.json에 담기게 되고, tsc-project 폴더(프로젝트)에 파일이 생성된다.

=> npm 프로젝트가 됨

 

 

npm 라이브러리로 타입스크립트를 설치하면, package.json 파일에 dependencies 항목이 추가로 보이고,

4.7.4 버전의 타입스크립트가 등록되어 있는 것이 보이게 된다.

다른 곳에 이 프로젝트를 설치하고, 이 디펜던시에 맞게만 설치하면 똑같이 실행이 가능하게 되는 것 !

 

타입스크립트를 설치하고 나면, 프로젝트 폴더 안에 node_modules라는 폴더와 package-lock.json 파일이 추가되어 있는 것을 볼 수 있다.

이 node_modules 폴더에 타입스크립트가 존재하고 있는 것이 보이고, 이 타입스크립트 안에 컴파일러가 있는 것이다 !

 

타입스크립트를 실행하려면 명령어 tsc를 사용해야 하는데,

이 명령어는 node_modules 폴더 안의 숨김폴더 bin 폴더 안에 tsc 명령어가 있는 것을 확인할 수 있다.

tsc 명령의 경로가 node_modules/.bin/tsc 라는 이야기.

타입스크립트를 전역으로 설치하여 tsc 명령 실행한 것과 똑같이

npm 프로젝트 단위에서 타입스크립트를 설치하여 tsc 명령을 실행하려면,

node_modules/.bin/tsc   

 

 

 

혹은 경로가

 

이렇게 되므로,

node_modules/typescript/bin/tsc

로도 tsc 명령어가 실행된다. 

 

하지만, 두 가지 방법 중 짧은 

node_modules/.bin/tsc 로 선택해 사용을 했는데,

npm의 버전이 올라가면서 새로 생긴 기능으로

 

npx tsc 로 tsc 명령을 실행할 수 있게 되었다.

 

컴파일링 설정 파일인 tsconfig.json 파일을 포함하고 있어야 하므로,

 npx tsc --init

실행하여 생성시킨다. (파란 점선 박스는 설정 내용)

cf. package-lock.json은 package.json 파일을 생성하고 그 안에 라이브러리들을 설치할 때

                                      그 상태를 스냅샷하기 위한 또 하나의 파일이다.

 

 

test 타입스크립트를 만들고 내용을 작성해,

npx tsc로 tsc 명령(컴파일링)을 입력하면, 같은 경로의 폴더에 자바스크립트 파일로 변환된 파일이 하나 추가되어 있는 것을 볼 수 있다.

 

 

package.json 파일을 열어,

스크립츠에 빌드라는 항목을 만들고 tsc라고 설정해준다.

 

 

원래는 tsc가 아니라 node_modules/.bin/tsc 라고 작성해야 하는데,

scripts 안에서는 node_modules/.bin을 생략할 수 있어서, tsc만 써도 

node_modules 안의 .bin 안의 tsc를 찾아서 실행을 한다.

 

npm run build를 입력하니 tsc 명령이 실행되었고,

그 다음 npm run build:watch라고 입력해서 tsc의 워치모드를 실행하게 하려고 다음과 같이 작성하였다.

그리고 터미널에서 npm run build:watch를 실행해보니 에러

 

다시 package.json 파일로 들어가서 무엇이 잘못일까 고민하다 든 생각.

 

아하, 저기 콤마를 찍어서 항목 구분이 안되어서 그러나 보다 !

바로 콤마를 찍고 파일을 닫아 다시 npm run build:watch를 실행해보니,

 

따단~

바로 제대로 작동, 워치모드 실행

 

그런데 이전 에러 내역은 안 보이고 다른 창에 온 듯한 느낌.

워치모드를 나가려고 이것저것 눌러봤는데,

나가려면 ctrl + c !!!!!!!!!!!!!!!!!!! 를 눌러줘야한다는 사실.

 

 

여기까지 tsc 실행에 대한 나만의 기나긴 여정을 완료~~~