TypeScript 설치 및 세팅 (Terminal 명령어 .json파일 등)

[node.js 프로젝트로 디렉토리 초기화]

npm init -y

(package.json파일이 추가된다.)

 

 

[package.json 수정]

{
  "name": "ts-blockchain-app",
  "version": "1.0.0",
  "description": "타입스크립트로 블록체인 만들기\r * 타입스크립트 기본 학습",
  // "main": "index.js",
  "scripts": {
    // "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/YooHyeok/ts-blockchain-app.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/YooHyeok/ts-blockchain-app/issues"
  },
  "homepage": "https://github.com/YooHyeok/ts-blockchain-app#readme"
}

 

주석처리한 부분인 main과 script 문장을 제거해준다. (주석으로 남기면 안됨. 빌드할때 오류발생함)

 

 

[TypeScript 모듈 설치]

npm install -D typescript

-D를 입력함으로써 package.json파일에 devDependencies로 추가되었으며, node_modules 디렉토리에 설치되어 생성된다.

 

 

[package.json]

{
  "name": "ts-blockchain-app",
  "version": "1.0.0",
  "description": "타입스크립트로 블록체인 만들기\r * 타입스크립트 기본 학습",
  "scripts": {
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/YooHyeok/ts-blockchain-app.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/YooHyeok/ts-blockchain-app/issues"
  },
  "homepage": "https://github.com/YooHyeok/ts-blockchain-app#readme",
  /* 아래 devpendencies 부분이 추가되었다 */
  "devDependencies": {
    "typescript": "^5.3.2"
  }
}

 

 

[tsconfig.json 파일 생성 명령]

// Mac OS
touch tsconfig.json

// Window OS
code tsconfig.json

 

혹은 우측 마우스 new File을 통해서 생성해도 무관하다.

 

 

[tsconfig.json 설정]

{
  "include": ["src"], // 타입스크립트 파일이 위치한 경로 - 자바스크립트로 컴파일 하고 싶은 모든 디렉터리를 넣는다.
  "compilerOptions": {
      "outDir":"build", // outDir: 컴파일 된 자바스크립트 파일이 생성될 디렉토리 지정
      "target": "ES6" // target: 어떤 버전의 자바스크립트로 컴파일 하고 싶은지 설정 (node.js 버전과 호환되는 버전으로 설정해야한다.)
      "lib": [//TypeScript는 처음부터 Dom API에 대한 정보를 가지고 있기 않기에, 이를 사용하기 위해 lib에서 유형을 정의해준다.
      "ES6", // ES6: 현재 코드가 어떤 버전으로 동작할지를 알려준다. (ES6를 지원하는 환경에서 실행된다.)
      "DOM" // DOM: 브라우저 환경에서 실행된다. - 설정시 t/js파일이 document,localstroage, window등 브라우저 객체들을 지원하게 된다. (자동완성...)
    ] 
  },
  
}

 

build 명령 옵션 설정

[package.json 파일 수정]

"scripts": {
	"build": "tsc"
}

"scripts" 객체에 위 코드 추가한다.

 

 

[타입스크립트 빌드 명령어]

npm run build

 

start 명령 옵션 설정

[package.json 파일 수정]

"scripts": {
	"build": "tsc",
	"start": "node build/index.js"
}

npm run start

위 명령어를 실행하면 build폴더 안의 index.js파일이 실행된다.

 

 

Build 후 Start Terminal명령

npm run build && npm start //mac os
npm run build ; npm start //window os

 

 

위 사진을 보면 build tsc를 통해 build가 진행되어 build/index.js 파일이 생성되고
start node build/index.js를 통해 빌드된 파일을 실행을 시키게 된다.

( 빌드를 계속 수행하면 작업속도가 느려지므로 효율적이지 않다.)

 

 

[개발자 모드]  TS NODE/nodemon

npm i -D ts-node

빌드 없이 타입스크립트를 실행할 수 있게 된다.

프로덕션에서 쓰는 패키지가 아닌 개발환경에서 빌드없이 빠르게 새로고침하고 싶을 때 사용한다.

ts-node가 컴파일 할 필요 없이 타입스크립트 코드를 대신 실행해준다.

 

 

[package.json] dev script 추가

"scripts": {
	"build": "tsc",
	"dev": "ts-node src/index.js"
	"start": "node build/index.js"
}

ts-node src/index.ts를 실행해 준다. (js 확장자는 빼도된다.)

 

[nodemon] 설치

npm i nodemon

nodemon을 설치하면 자동으로 커맨드를 재실행해주기 때문에 일일히 커맨드를 다시 실행할 필요가 없어지므로 서버를 재시작 할 필요가 없어진다.

 

[package.json] dev script 수정

"scripts": {
	"build": "tsc",
	"dev": "nodemon --exec ts-node src/index.ts"
	"start": "node build/index.js"
}

 

 

+부록)

js만 지원하던 npm 패키지의 type을 받는 터미널 명령어

npm i -D @types/패키지명

최근 npm 패키지 개발자들은 npm 패키지를 설치하면 패키지 자체는 js로 작성됐지만 .d.ts 파일을 함께 포함시키는 경우가 많다.