타입스크립트 프로젝트 init

타입스크립트 개발은 사실 🤭

Node.js 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행.

Node.js 프로젝트를 하나 만들어야한다. (express랑 다름요)

> npm init --y

위 명령어를 실행하면 package.json 이 해당 디렉토리에 생긴다.

---

프로젝트 생성자 관점 패키지 설치

> npm i -D typescript ts-node

typescript: 타입스크립트 컴파일러

ts-node: 자바스크립트 코드로 변환하고 실행까지 동시에 하는 프로그램

👉🏻 이거는 원래 설치돼있겠지만 그냥 패키지에 쓰려고 실행 ㅎ

> npm i -D @types/node

@types/node: 자바스크립트로 개발된 라이브러리 또는 타입스크립트에는 없지만 웹 브라우저나 Node.js가 기본으로 제공하는 타입(ex. Promise)들을 타입스크립트로 사용할 수 있게 해주는 패키지.

• -D: --save-dev와 같음. 프로젝트를 개발할 때만 필요한 패키지로 설치. 즉, package.json의 devDependendies 항목에 등록된다.

• -S: --save와 같음. dependencies 항목에 등록됨

+) 프로젝트 이용자 관점에서 패키지 설치하기

package.json이 있는 위치에서 다음을 실행

> npm i

똑같다 🙂 위 명령으로 package.json의 패키지들이 자동으로 설치된다.

---

tsconfig.json 파일 만들기

타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json 파일이 있어야한다.

만드는 법

> tsc --init

파일을 열어보면 비활성화 된 옵션이 많다. 보통은 프로젝트에 필요한 옵션만 설정해서 간략하게 한다.

예시

//tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "ES5",
    "moduleResolution": "node",
    "outDir": "dist",
    "baseUrl": ".",
    "sourceMap": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "paths": { "*": ["node_modules/"] }
  },
  "include": ["src/**/*"]
}

마지막의 include항목에는 ["src/**/*"] 이 값이 설정돼있는데, 이건 ./src와 ./src/utils 디렉토리에 이 프로젝트의 모든 타입스크립트 소스 파일이 있다고 설정한 것이다.

---

package.json 수정

ts-node: 개발할 때 사용

근데 막상 개발이 완료되면 타입스크립트 소스코드를 자바스크립트 코드로 변환해서 node로 실행해야한다.

그러기위해서 package.json의 scripts 항목에 dev와 build를 추가해준다.

// package.json
{
  "name": "ch02-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev" : "ts-node src",
    "build" : "tsc && node dist"
  },
  ...
}

dev 는 개발 중에 src 디렉토리의 index.ts를 실행하는 용도

build는 개발이 완료된 후 프로그램을 배포하기 위해 dist 디렉토리에 변환된 자바스크립트 파일을 만들 때 사용.

사용법

> npm run dev
> npm run build

---

아으오오으잉