타입스크립트 프로젝트 생성

타입스크립트 개발은 Node.js 프로젝트를 생성한 이후 개발 언어를 타입스크립트로 설정하는 방식으로 진행합니다.

Node.js 프로젝튼는 디렉터리를 생성하고 생성한 디렉터리에 package.json 이름의 파일을 만드는 것으로 시작합니다.

 

아래와 같이 실습 디렉터리를 생성한 이후 npm init --y를 입력합니다.

 

📌 타입스크립트 프로젝트는 보통 typescript와 ts-node 패키지를 설치합니다. 앞서 이미 2개의 패키지를 -g 옵션을 주어 전역에 설치하였지만, 이 프로젝트를 전닯다아서 이용하는 다른 개발잘의 컴퓨터에는 2 패키지가 전역에 설치되어 있지 않을 수도 있기에 이를 고려하여 터미널에서 다음 명령으로 두 패키지를 -D 옵션으로 설치하여 package.json에 등록하는 것이 좋습니다.
> npm i -D typescript ts-node

 

이후 터미널에서 다음 명령을 실행하여 @types/node 패키지를 설치합니다.( 🚩 타입스크립트 특징!)

npm i -D @types/node

 

💥프로젝트를 구현하면서 여러 패키지를 설치하게 되는데, 이렇게 되면 node_moduels 디렉터리 크기가 매우 커져 다른 사람에게 프로젝트를 전달할 때는 node_modules 디렉터리를 모두 지웁니다.

따라서, 다른 사람이 작성한 프로젝트를 전달받아 이용할 때는 가장 먼저 package.json 파일이 있는 디렉터리에서 다음 명령어를 입력합니다.

npm i

 

tsconfig.json 파일 만들기

타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json 파일이 있어야 합니다. 따라서 아래의 명령어로 입력하여 설치합니다.

tsc --init

 

💥하지만, 이렇게 만들어진 기본 tsconfig.json 파일을 열어 보면 실제 개발을 진행하는데 필요한 많은 옵션이 비활성화되어 있습니다. 따라서, tsconfig.json 파일을 열고 내용을 다음처럼 수정합니다.

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/**/*"]

}

=> tsconfig.json 파일 변경 후

 

따라서, 앞으로 새 프로젝트를 만들면 기본적으로 이 파일 내용으로 대체하여 사용합니다.

 

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

앞서 만든 tsconfig.json 파일에서 include 항목이 있는 이 항목에는 ["src/**/*"]라는 값이 설정되어 있습니다.

따라서, tsconfig.json 설정대로 프로젝트를 구성하기 위해서 다음 명령으로 src/utils 디렉터리를 생성합니다.

mkdir -p src/utils

 

각 디렉터리에 실습하는 데 필요한 소스 파일을 생성합니다. 소스 파일 이름은 index.ts 와 Practice.ts로 만들겠습니다.

touch src/index.ts src/utils/Practice.ts

 

생성한 index.ts 파일과 Practice.ts 파일을 열고 각각 다음과 같은 코드를 작성합니다.

import { Practice, testPractice } from "./utils/Practice";

testPractice()

=> index.ts

export function Practice(name:string, age:number) {

  return {name: name, age: age}

}

export function testPractice() {

  console.log(

    Practice('YongHak', 22),

    Practice('Jason', 23)

  )

}

=> Practice.ts

 

💥시작 소스 파일명을 index로 짓는 이유

💡node나 ts-node로 소스 파일을 실행하려면 ts-node ./src/index.ts 명령을 사용하지만, 소스 파일명이 index이면 파일명을 생략하고 단순히 ts-node ./src로 실행할 수 있습니다.

 

package.json 수정

package.json 파일을 열고 scripts 항목에 dev와 build 명령을 추가합니다.

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "ts-node src",

    "build": "tsc && node dist"

    },

 

이후, 터미널 창에 아래와 같이 명령어를 입력합니다.

npm run dev
npm run build

 

이렇게 하면 프로젝트 설정이 완료됩니다.🎓