[TS] 타입스크립트 설치하기

 

---

알고있으면 좋은 Typescript Tip✨

---

타입스크립트(TypeScript) 개요 

• 타입스트립트는 node.js 관점에서는 npm module 중 하나일 뿐이다.
• `npm` 으로 typescript 모듈을 설치하고, `tsc` 명령어로 ts파일을 js파일로 컴파일하면 된다.

 

타입스크립트(TypeScript) 설치 및 세팅

• 기본적으로 node.js를 설치해야 한다.
• 공식 사이트 : https://nodejs.org/en
• 참고 사이트 : https://tiboy.tistory.com/718

 

(1) package.json 파일 생성 (프로젝트 폴더)

• npm init  또는 npm init -y : 기본 세팅 또는 디폴트 세팅으로 package.json파일을 생성해준다.

 

(2) typescript 모듈 설치

• npm install typescript : 현재 프로젝트에 typescript 라이브러리를 설치한다.
• npm install typescript -g : 전역에 설치한다. (어디서나 typescript 컴파일이 가능)

 

(3) tsconfig.json 파일 생성

• tsc --init : tsconfig.json 파일이 생성된다.
• 최초 세팅 -> global로 설치 안 한경우, npx tsc --init

{
 "compilerOptions": {
   "target": "es5",
   "lib": [
     "dom",
     "dom.iterable",
     "esnext"
   ],
   "allowJs": true,
   "skipLibCheck": true,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "noFallthroughCasesInSwitch": true,
   "module": "commonjs",
   "outDir": "dist",
   "rootDir": "src",
 },
 "include": [
   "src/**/*"
 ],
 "exclude": [
   "node_modules"
 ]
}

• strict : 타입 검사를 엄격하게 한다.
• include : ts 파일을 js로 컴파일할 폴더 지정한다.
• exclude : js 컴파일 제외 폴더 지정한다.
• target : 컴파일 js 버전. 보통 es5를 기준으로 한다.
• lib : 컴파일할 때 포함될 라이브러리 목록
• module : js 파일 간에 import 시 어떤 문법을 사용할 지 지정한다.
• outDir : 컴파일 된 js가 생성되는 경로
• roodDir : 시작 경로
• allowJs : ts 파일을 컴파일 할 때 js 파일도 포함할 지 설정한다.

 

(4) ts 파일 생성 (src 경로)

const num1: number = 1;

 

(5) ts파일을 js 자바스크립트로 컴파일  (루트 경로 터미널)

• npx tsc : 로컬에 설치한 경우
• tsc : 글로벌에 설치한 경우

 

(6) 컴파일한 결과물(JS파일)은 dist 경로에서 확인 가능

"use strict";
var num1 = 1;