TypeScript 컴파일러 설치, nvm과 npm차이

Typed Superset of JavaScript

• TypeScript는 타입을 추가해 JS를 확장하는 언어다.
• 코드를 실행하기 전에 컴파일하는 시점에서 에러를 잡거나 고치는 데 시간을 줄일 수 있다.
• 어떤 브라우저나 운영체제, JS 런타임 환경에서도 가능한 완전한 오픈 소스다.
• 에디터로 작성된 TS는 Compiler(transpile)과정을 통해 TS코드를 JS코드로 변경해 브라우저나 노드js환경에서 실행가능하도록 한다.

 

 

1. 자바스크립트 실행 환경

1-1. node.js : 크롬 V9 JS 엔진을 사용하여 서버사이드에서도 실행하도록 런타임 환경을 제공

1-2. browser : html을 동적으로 만들기 위해 브라우저에서 js를 해석하고 DOM을 제어할 수 있도록 하는 자바스크립트 런타임 환경

 

 

 

2. node.js 설치 (nvm과 npm)

Node.js

2-1. LTS버전 VS Current최신 버전 차이점

      ㄴ LTS는 검증되고 안정적인 버전

 

2-2. node.js version manager

nvm : node.js 버전을 관리하는 매니저

nodejs 운영체제별 다운로드 및 노드 버전 매니저 nvm

 

2-3. npm 자동 설치

 ㄴ 외부 패키지를 설치할 수 있게 하는 관리자 프로그램

 

 

 

컴파일러는 TS를 JS로 변환해주는 역할

3. TypeScript 컴파일러 설치 cli 

*cli : Command Line Interface 명령 줄 인터페이스

$ npm i typescript -g

$ node_modules/.bin/tsc
$ tsc source.ts // 컴파일러 실행 + 파일

 

📍 3-1. 타입스크립트 컴파일러 글로벌로 설치

$ npm i typescript -g // 전역 설치
$ tsc 특정파일이름 // 컴파일러 명령어
$ tsc --init // tsconfig.json 생성
$ tsc -w

-w : tsc 명령어를 매번 실행하지 않더라도 tsc -w (watch)모드는 자동으로 컴파일됨

 

 

📍 3-2. 프로젝트에만 타입스크립트 컴파일러 설치 (해당 프로젝트에만 -D)

$ npm init -y  // package.json 생성
$ npm i typescript -D // package.json에 typescript 추가됨
$ npx tsc --init // tsconfig.json 생성
$ npx tsc -w

node_modules/.bin/tsc는 node_modules/typescript/bin/tsc와 연결됨

컴파일을 실행할 때 이 경로를 작성해야 하는데 너무 길기 때문에 사용할 수 있는 명령어 npx

 

$ nano test.ts // 새 파일 생성 명령어

$ mkdir tsc-folder // 새 폴더 생성 명령어

$ npm uninstall typescript -g // 전역 삭제

 

 

📍 3-3. VSCODE는 컴파일러가 내장됨 (번들)

$ npm init -y
$ npm i typescript -D

하단 파란 바에서 typescript 버전(숫자)을 클릭 > Select TypeScript Version  > 버전 선택 가능 

 

 

 

👩‍💻 npm과 npx의 차이점

npm은 node.js를 설치하면 자동으로 설치되는 패키지 관리 프로그램으로 전역 혹은 로컬 둘다 설치할 수 있다. (3-1, 3-2)

특정 패키지를 찾거나 어떤 명령어를 사용할 때는 종종 로컬 node_modues 폴더에 dependencies(-D)로 설치해야만 하는 경우가 생길 때가 있다. 이때 npx에 넣을 수 있다. npm 레지스트리 안에서 호스트된 개발용의존성을 쉽게 설치하고 관리하는 것이 목표다. 즉, 로컬에 설치된 패키지를 실행하고 싶다면, 아래처럼 입력하면 끝

$ npx your-package