본문 바로가기
개발(Development)/JS(자바스크립트)

[Typescript] 설치 및 초기 세팅 방법(node.js 환경)

by 카레유 2023. 5. 8.

# Typescript 설치 및 세팅 방법 개요

- 타입스트립트는 node.js 관점에서는 npm module 중 하나일 뿐이다.

- 따라서 `npm` 으로 typescript 모듈을 설치하고, `tsc` 명령어로 ts파일을 js파일로 컴파일하면 된다.


# 설치 및 세팅 방법

1. node.js 설치 (3가지 방법이 있음)

   - 방법1(초보자 추천): node.js 홈페이지를 통해 설치한다.
   - 방법2: n 으로 설치(버전 업그레이드에 용이)
   - 방법3: nvm (버전 스위칭에 용이)

 


2. package.json 파일 생성 (프로젝트 루트 경로 터미널에서)

   - `npm init -y` : 디폴트 세팅으로 package.json파일을 생성해준다. (나중에 수정 가능)

 

 

3. typescript 모듈 설치 (루트 경로 터미널에서)
   - `npm install typescript` : 현재 프로젝트에 typescript 라이브러리를 설치한다.
   - `npm install typescript -g` : 전역에 설치한다(어디서나 typescript 컴파일이 가능)

 

 

4. tsconfig.json 파일 생성 (루트 경로 터미널에서)

   - `tsc --init` : tsconfig.json 파일이 생성된다(global로 설치 안 한경우, `npx tsc --init`)

   - 타입스크립트 컴파일 환경을 세팅한다. (기본적인 설정만 했음)

 

{
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "outDir": "dist",
       "skipLibCheck": true,
       "strict": true
     },
     "include": ["src/**/*.ts"],
     "exclude": ["node_modules"]
}


   - target(타겟 JS 버전), module(모듈 방식), outDir(JS 파일로 컴파일한 결과물들이 위치할 경로), include(TS파일이 위치한 곳)
   - 추가 상세 옵션은 https://www.typescriptlang.org/tsconfig 참고

 


5. ts 파일 생성 (src 경로에서)

- 타입스크립트로 코딩을 해준다.

 

const num1: number = 1;

 


6. ts파일을 js 자바스크립트로 컴파일한다. (루트 경로 터미널에서) 

   - (로컬 설치한 경우) `npx tsc
   - (글로벌 설치한 경우)`tsc

 

 

7. 컴파일한 결과물(JS파일)은 dist 경로에서 확인할 수 있다.

 

"use strict";
var num1 = 1;

E.O.D

 

댓글