타입스크립트 설치하기

타입스크립트 설치하기

1. 자바스크립트 실행 환경 설치하기

browser

Chrom, safari 등 브라우저는 HTML을 동적으로 만들기 위해 브라우저에서 자바스크립트를 해석하고 DOM을 제어할 수 있도록 하는 자바스크립트 런타임 환경이다. 타입스크립트를 실행시키기 위해서는 자바스크립트 실행 환경이 필요하다.

node.js

브라우저에서 자바스크립트를 실행시키는데 필요한 엔진을 서버사이드에서도 사용할 수 있도록 만들어주는 서버사이드용 자바스크립트 런타임 환경이다. Chrome의 V8 Javascript Engine을 사용하여 자바스크립트를 해석한다. node.js를 이용해서 브라우저 환경까지 가지 않더라도 자바스크립트 코드를 커맨드라인, 간단한 서버 환경 등에서 실행할 수 있다.

 

node.js 설치하기

Https://nodejs.org 홈페이지 들어가서 설치하는 방법과 nvm을 이용해서 설치하는 방법이 있다.

nvm이란 node.js의 버전 매니저이다.

• nvm 검색 후, 첫번째 링크 클릭해서 README에 적혀있는 Install 부분으로 가서 설치 진행.
• 항상 최신 버전을 이용해서 개발을 해야하는 것이 아님에 주의!
• Node.js는 짝수 버전이 안정적인 버전이며 홀수 버전이 가장 최신의 버전이다. 가장 최신 버전은 새로운 기능을 사용할 수 있으나 해결되지 않은 버그가 있을 수 있다. 어떤 프로젝트를 하는가에 따라서 그 프로젝트에 최적화된 노드 버전은 달라질 수 있다.

 

NVM 사용법

• nvm ls : 설치된 Node.js 리스트 확인
• nvm install 버전 : 특정 버전의 Node.js 설치
• nvm use 버전 : 특정 버전의 Node.js 사용
• nvm uninstall 버전 : 특정 버전 삭제

2. 타입스크립트 컴파일러 설치

npm 혹은 visual studio plugin 를 설치하는 방법이 있다.

 

npm

nvm을 설치하면서 같이 설치되는 Node Package Manager. 전 세계의 개발자들이 만든 다양한 기능( 패키지, 모듈 )들을 관리한다.

• 글로벌로 타입스크립트 컴파일러를 설치하는 방법
  • npm i typescript -g 를 터미널에 입력해준다.
    • i : install의 약자. 설치 명령
    • -g : glabal의 약자. 설치한 패키지를 현재 프로젝트에서만 사용하는 것이 아니라 내 컴퓨터 환경 모든 곳에서 사용하게 해주는 플래그
  • BUT 글로벌로 다운로드를 하는 것 보다는 프로젝트마다 설치하는 것을 추천한다. 글로벌로 설치하면 해당 프로젝트 자체에만 의존성을 가지는 것이 아니라 그 프로젝트를 돌리는 머신에 어떤 패키지가 설치되어 있어야지만 실행 가능하게되는 의존성을 갖게 되기 때문이다. 아래는 프로젝트에 타입스크립트 컴파일러를 설치하는 방법이다.

• 프로젝트에 타입스크립트 컴파일러 설치하는 방법
  • 만약 이미 글로벌로 타입스크립트를 설치했다면npm uninstall typescript -g 명령으로 삭제해준다.
  • npm init -y 를 입력한다.
    • npm을 통해 다운받은 패키지들을 관리할 수 있는 package.json 문서를 생성한다.
    • -y는 yes를 의미하는데 default한 문서를 생성할 수 있도록 하는 옵션이다.
  • npm i typescript -D 를 입력한다.
    • package.json 문서의 Devdependencies 에 typescript가 추가되며 node_modules 디렉토리 안에 typescript가 다운로드 된다.
  • 타입스크립트 명령 앞에 npx 를 붙여서 사용한다. 또는 package.json 문서의 scripts부분에 tsc 명령에 이름을 붙여 사용한다.
    • Ex1)npx tsc
    • Ex2) "scripts" : { "build" : "tsc" }

타입스크립트 컴파일러 명령어

• tsc yourfile.ts : 타입스크립트컴파일러가 실행되면서 타입스크립트 파일을 실행시켜 자바스크립트로 변경한다.
• tsc : 한 프로젝트 안에 존재하는 모든 타입스크립트 파일을 한번에 컴파일 해준다. 이 명령을 사용하기 전에 먼저 설정 파일을 만들어 주어야 한다.
  • tsc --init : 기본 설정으로 설정 파일을 생성하고 이후엔 tsc 명령을 통해 프로젝트 내 모든 타입스크립트 파일의 컴파일이 가능하다.
• tsc -w : watch 모드는 타입스크립트 파일이 수정되었을 때 자동으로 컴파일 해서 js 파일을 만들어낸다.