타입스크립트(03)_프로젝트 생성&관리

Kang Dong Hyun·2022년 10월 31일

목록 보기

3/6

타입스크립트 프로젝트 만들기

타입스크립트 개발은 nodejs프로젝트를 만든 다음, 개발 언어를 TS로 설정하는 방식으로 진행한다. nodejs프로젝트는 디렉토리를 하나 만들고 여기에 package.json이란 이름의 파일을 만드는 것으로 시작한다. 보통 package.json은 터미널에서 npm init 명령을 실행해 생성한다.

vscode를 실행하고 typescript디렉토리를 선택한 후 vscode터미널에서 다음 명령을 차례로 실행한다.

mkdir ch02-1
cd ch02-1
npm init --y

프로젝트 생성자 관점에서 패키지 설치하기

타입스크립트 프로젝트는 보통 typescript와 ts-node패키지를 설치한다.
전 장에서 두 패키지를 -g옵션을 주어 전역에 설치했지만(타입스크립트02 참조) 이 프로젝트를 전달받아서 이용하는 다른 개발자의 컴퓨터에는 두 패키지가 전역에 설치되어 있지 않을 수 있기 때문에 터미널에 다음 명령으로 두 패키지를 -D 옵션으로 설치해 package.json에 등록하는 것이 좋다.

npm i -D typescript ts-node

JS는 기본적으로 ESNEXT자바스크립트 문법을 포함하지만 TS컴파일러는 타입이 명시적으로 설정되어 있어야만 코드가 동작한다. 이 때문에 JS로 개발된 chance,ramda같은 라이브러리를 추가로 제공해야한다. 다음 명령을 실행해 type패키지를 설치한다.

npm i -D @types/node

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

프로젝트를 만드는 과정에서 패키지를 설치하면 프로젝트 디렉토리 안에 node_modules라는 디렉토리가 생기고 여기에 해당 패키지가 설치된다.
하지만 보통 프로젝트를 구현하면서 여러 패키지를 설치하게 되므로 node_modules디렉토리 크기가 매우 커지기 때문에 다른 사람에게 프로젝트를 전달할 때는 node_modules디렉토리를 모두 지운다. 다른 사람이 작성한 프로젝트를 전달받아 이용할 때는 가장 먼저 package.json파일이 있는 디렉토리에 다음 명령을 실행해야 한다.

npm i

tsconfig.json 파일 만들기

TS프로젝트는 TS컴파일러의 설정파일인 tsconfig.json파일이 있어야 한다. 다음 명령으로 실행 가능하다.

tsc --init

그런데 만들어진 기본 tsconfig.json 파일을 열어보면 실제 개발을 진행하는데 필요한 많은 옵션이 비활성화 되어 있다. 따라서 보통은 필요 옵션만 설정해서 간략하게 한다. 우리는 앞으로 프로젝트를 만들면 기본적으로 아래 코드를 설정으로 파일을 만들 것이다.

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

src디렉토리와 소스 파일 만들기

위 코드의 14행에 include항목은 ./src와 ./src/utils 디렉토리에 이 프로젝트의 모든 타입스크립트 소스 파일이 있다는 뜻이다.
위 설정대로 디렉토리를 터미널로 구현해보자.

mkdir -p src/utils

각 디렉토리에 필요한 소스파일을 만들자. makePerson에서는 함수를 구현하고 index에서는 makePerson의 소스코드를 불러와 index에서 실행할 것이다.

touch src/index.ts src/utils/makePerson.ts

ch02-1/src/utils/makePerson.ts 코드

export function makePerson(name: String, age: number) {
    return { name: name, age: age }
}
export function testMakePerson() {
    console.log(
        makePerson('Jane', 22),
        makePerson('Jack', 33)
    )
}

ch02-1/src/index.ts 코드

import { testMakePerson } from "./utils/makePerson";
testMakePerson()

package.json 수정

타입스크립트 프로젝트를 개발할 때는 ts-node를 사용하지만, 막상 개발이 완료되면 타입스크립트 소스코드를 ES5자바스크립트 코드로 변환해 node로 실행해야 한다. 이를 위해 다음 처럼 package.json파일을 열고 script항목에 dev와 build명령을 추가한다. 우리는 앞으로 프로젝트를 만들면 기본적으로 아래 코드를 설정으로 파일을 만들 것이다.

{
  "name": "ch02-1",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^18.11.7",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  }
}