[TypeScript] 설치 및 환경 구축

설치

---

1. node.js 설치

   1-1.버전확인

node -v

   1-2. 안깔려있다면 설치

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

2. TypeScript 설치

1. 전역 설치

npm install -g typescript

ts -> js로 변경 컴파일러 제공 패키지

-설치 확인

tsc -v

 

2. 로컬 설치(특정 프로젝트만)  <-추천

플젝 폴더 이동후

npm init -y
npm install typescript --save-dev(npm i typescript -D)

package.json 생성(프로젝트 관리나 향후 유지보수)

{
  "name": "test",             //프로젝트 이름 지정(필수)소문자,_
  "version": "1.0.0",         //프로젝트 버전
  "main": "index.js",         //진입 파일 지정(지움)
  "scripts": {                //자주 쓰는 명령어 단축어 설정
    "test": "echo \"Error: no test specified\" && exit 1"
    "start": "node build/index.js"  //npm start하면 실행
    "build": "tsc"            //npm run build하면 실행
  },
  "keywords": [],            //프로젝트와 관련된 키워드 배열,npm에서 검색에 도움줌
  "author": "",              //프로젝트 작성자 정보
  "license": "ISC",          //프로젝트의 라이선스를 지정
  "description": "",         //프로젝트에 대한 간단한 설명
  "devDependencies": {       //개발 환경에서만 필요한 라이브러리 목록
    "typescript": "^5.7.2"   //npm install <패키지> --save-dev로 설치한 패키지가 여기에 기록
  }
}

-설치 확인

npx tsc -v //버전 확인

 

 

TypeScript 프로젝트 설정

---

1. tsconfig.json 파일 생성

프로젝트 디렉토리 이동 후, 다음 명령어 사용해 tsconfig.json 파일 생성

tsc --init
(or)
touch tsconfig.json //MAC
code tsconfig.json //Window

 

 

---

* tsconfig.json 설정내용

tsconfig.json?

타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일\

{
  "compilerOptions": {
    "target": "ES6",            // 컴파일 결과의 JavaScript 버전
    "module": "commonjs",       // 모듈 시스템, js 파일 간에 import 시 어떤 문법을 사용할지 지정  (commonjs는 require 문법, es2015와 esnext는 import 문법)
    "strict": true,             // 엄격한 타입 검사, false 시 ts 사용의미x
    "outDir": "./dist",         // 컴파일 결과(js) 저장 폴더 경로
    "rootDir": "./src",          // 소스 코드 폴더, 시작경로
    "lib": [                     // 컴파일할 때 포함될 라이브러리 목록
     "dom",
     "dom.iterable",
     "esnext"
   ],
   "allowJs": true              // ts 파일을 컴파일할 때 js 파일도 포함할지 설정.
  },
  "include": ["src/**/*"],      // ts 파일을 js로 컴파일할 파일 지정
  "exclude": ["node_modules"]   // js 컴파일 제외 파일 지정
}

 

 

 

TypeScript 실행

---

1. ts파일 생성

.ts 확장자를 사용 파일 생성 ex) app.ts

 

2. 컴파일(tsc)

tsc : 타입스크립트를 자바스크립트로 변환할 때 사용하는 명령어

tsc app.ts

app.ts 파일 app.js로 변환

3. 실행

node app.js

---

* ts-node 설치

TypeScript 코드를 컴파일하지 않고 직접 실행할 수 있도록 도와주는 도구

.ts파일  tsc이용 js로 변환한 후 Node.js에서 실행해야하지만 생략하고 바로 실행

 

설치 (셋중하나..)

//전역설치
npm install -g ts-node 
//로컬설치(특정 프로젝트) 이동후
npm install ts-node --save-dev 
or
npm install -D ts-node

*--save-dev 축약어 = -D

.ts 실행

ts-node app.ts //전역
npx ts-node test.ts //로컬

 

* nodemon 설치

코드 변경을 자동으로 감지하여 애플리케이션을 다시 실행해줌

설치 (셋중하나..)

npm install -g nodemon //전역
(or)
npm install --save-dev nodemon //로컬

실행

//node 명령어 대신 nodemon 써주면 됨
nodemon app.js

 

nodemon --exec ts-node src/index.ts