타입스크립트로 프로젝트를 시작하기 (Begin Typescript Project)

해당 포스팅은 아래의 기본적인 세팅은 되었다는 가정하에 작성합니다.

NodeJS, NPM, TypeScript Compiler(tsc), ts-node, Visual Studio Code

 

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

타입스크립트로 개발할때는, Nodejs 프로젝트를 생성한 뒤, 개발 언어를 타입스크립트로 설정하는 형태로 진행한다. Nodejs 프로젝트를 생성하는 방식은 폴더를 하나 만들고, 해당 디렉토리에 package.json 파일을 만드는 것으로 시작한다. 보통 package.json 파일은 터미널에서 npm init 명령어로 생성한다.

> mkdir project-typescript
> cd project-typescript
> npm init --y

Wrote to /Users/soopiri/workspace/playground/project-typescript/package.json:

{
  "name": "project-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm init 뒤에 붙은 --y 옵션은 default 값으로 설정된 package.json 파일을 만들겠다는 의미이다. npm init만 입력할 경우 기본 양식을 일일이 지정해줘야하는데, 그런 불편함을 해소할 수 있는 옵션이다.

 

package.json 파일은 NodeJS가 관리하는 패키지 관리 파일이다. 프로젝트 정보와 관련 패키지가 기록되기 때문에, 이 파일을 이용해서 프로젝트에 사용되는 패키지들을 관리할 수 있다.

 

패키지 설치하기

프로젝트 구현에 필요한 오픈소스 패키지를 설치하기 위해서는 npm i(또는 npm install) 명령어를 통해 설치한다. 설치할 때 아래 두가지 옵션을 줄 수 있고, 해당 옵션으로 설치하면 package.json파일에 자동으로 기록된다.

option	description	short cut
--save	프로젝트를 실행할 때 필요한 패키지를 설치 패키지 정보가 package.json파일의 dependencies 항목에 등록	-S
--save-dev	프로젝트를 개발할 때만 필요한 피키지로 설치 패키지 정보가 package.json 파일의 devDependencies 항목에 등록	-D

 

타입 스크립트 프로젝트는 보통 typesciprt와 ts-node 패키지를 설치한다. 아래의 명령어를 통해 typescript와 ts-node 패키지를 설치할 수 있다. 설치가 완료되고 나서 package.json 파일을 확인해보면 정상적으로 devDependencies에 추가가 된 것을 확인할 수 있다.

> npm i -D typescript ts-node

타입스크립트는 기본적으로 ESNext 자바스크립트 문법을 포함하지만, 자바스크립트와는 다른 언어이다. 예를들어 자바스크립트 컴파일러는 i => i+1 과 같은 코드를 동작 시킬 수 있지만 타입스크립트 컴파일러는 (i: number): number => i +1 처럼 타입이 명시적으로 설정되어 있어야지만 코드가 문법에 맞게 작성되었는지를 검증해 코드를 동작시킨다.

이 때문에 자바스크립트로 개발된 라이브러리들은 추가로 @types/ 앞에 붙은 라이브러리들을 제공해야 한다. (@types/package-name) 이런 라이브러리 들은 항상 index.d.ts 파일을 가지고 있으며, 타입스크립트 컴파일러는 이 파일의 내용을 바탕으로 라이브러리가 제공하는 함수들을 잘 사용했는지 검증한다. 또한 타입스크립트는 웹 브라우저나 NodeJS가 기본적으로 제공하는 타입들의 존재도 그냥은 알지 못한다. 예를들어 Promise와 같은 타입을 사용하기 위해선 아래의 명령어를 통해 @types/node 패키지를 설치해야 한다.

> npm -i @types/node

 

패키지를 설치하고 난 뒤 package.json 파일을 보면 아래와 같이 패키지가 잘 추가된 것을 볼 수 있다.

{
  "name": "project-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.25",
    "ts-node": "^10.7.0",
    "typescript": "^4.6.3"
  }
}

 

프로젝트를 생성하는 것이 아니라, github등을 통해서 협업을 하는 사람이라면 처음 프로젝트를 클론하고 나서 npm i 명령어를 통해 package.json 파일에 등록된 패키지를 설치해야 한다. 그러면 node_modules라는 디렉터리 안에 패키지 파일들이 설치된다.

 

tsconfig.json 설정하기

타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정파일인 tsconfig.json파일이 있어야 한다. tsc --init 명령어로 피을을 만든다.

> tsc --init

Created a new tsconfig.json with:
                                  TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig.json

만들어진 tsconfig.json 파일을 살펴보면 실제 개발을 진행하는데 필요한 옵션들이 주석처리 되어 있다. 보통은 프로젝트에 필요한 옵션만 설정해서 간략하게 한다. 각자의 상황에 맞게 옵션을 활성화하고 값을 설정하면 된다.

많다..

** compilerOptions 다음에 "include" : ["src/**/*"] 옵션을 추가해두자. 이것은 src와 src 하위폴더에 이 프로젝트에 모든 타입스크립트 파일 소스가 있다는 것을 의미한다.

 

아래의 경로와 같이 파일을 만들고 코드를 작성해보자.

// /src/utils/test.ts

export const firstFunction = (param1: string, param2: number) => {
  return { param1: param1, param2: param2 };
};

export const testFunction = () => {
  console.log(firstFunction("Hi", 1), firstFunction("Hello", 2));
};

// /src/index.ts

import {testFunction} from './utils/test'
testFunction()

이렇게 잘 만들어졌다면 성공!

 

package.json에 스크립트 추가하기

타입스크립트 프로젝트를 개발할 때에는 ts-node를 사용하지만, 개발이 완료되면 타입스크립트 소스를 ES5 자바스크립트 코드로 변환해 node로 실행해야 한다. 이를 위해 package.son 파일에 scripts 항목을 추가하여 dev와 build 명령을 추가한다.

{
  "name": "project-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "ts-node src",
    "build" : "tsc && node dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.25",
    "ts-node": "^10.7.0",
    "typescript": "^4.6.3"
  }
}

dev 명령어를 통해 개발 중에 src 디렉터리에 있는 index.ts 파일을 실행하는 용도로 사용한다. build 명령어는 개발이 완료되고, 프로그램을 배포하기 위해 dist 디렉터리에 ES5 자바스크립트 파일을 만들 때 사용한다.

 

명령어를 실행하기 위해선 npm run dev, npm run build 와 같은 형태로 사용한다.

> npm run dev

> project-typescript@1.0.0 dev
> ts-node src

{ param1: 'Hi', param2: 1 } { param1: 'Hello', param2: 2 }

> npm run build

> project-typescript@1.0.0 build
> tsc && node dist

{ param1: 'Hi', param2: 1 } { param1: 'Hello', param2: 2 }

 

build후, dist에 자바스크립트 파일로 컴파일 된 Index.js 파일의 모습

 

 

마치며..

사실 기본중의 기본이지만, 그냥 인터넷을 보고 명령어만 복붙해서 프로젝트를 세팅하기 보다는 이렇게 하나하나 의미를 짚어가며 프로젝트를 생성하는 방법에 대해서 살펴보는게 나중에는 큰 도움이 될 것 이다. 대부분의 타입 스크립트 프로젝트는 이런 과정을 거쳐서 만들어지기 때문에 익숙해지면 좋을 것 같다.