이 포스트는 재작성되었습니다. 이 포스트에서 더욱 편하게 보실 수 있습니다.

굳이 타입스크립트 프로젝트 생성에 대해 따로 다루는 이유는 기존에 프로젝트들은 그냥 만들면 되었지만 타입스크립트 프로젝트는 약간의 설정이 필요하기에 소개해드리고 넘어가려고 합니다.

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

타입스크립트는 Node.js 플랫폼을 기반으로 작동하는 언어이므로 npm init을 통해서 package.json을 만들어야합니다. 따라서 작업 공간을 만들고 npm init 명령을 통해서 package.json 파일을 생성해주세요.

npm init

다음으로는 타입스크립트 컴파일러의 설정 파일이 필요합니다. 이름은 tsconfig.json으로 이 역시도 명령어를 통해 간단하게 생성할 수 있습니다.

tsc --init

이 명령으로 실행된 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/**/*"],
}

하나 주목해야할 것은 마지막의 include 항목인데 이것은 ./src 디렉토리 이하의 모든 디렉토리에 프로젝트의 .ts 파일이 존재한다는 의미입니다. 그래서 공부하면서 또는 프로젝트를 하면서 만드는 모든 .ts 파일들은 ./src 이하에 만들어 두면 됩니다.

다음으로는 package.json을 수정할 차례입니다.

{
  "name": "ts-study",
  "version": "1.0.0",
  "description": "study Typescript",
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  "keywords": [],
  "author": "Bam",
  "license": "ISC",
  "dependencies": {
    "ts-node": "^10.4.0",
    "typescript": "^4.5.4"
  }
}

수정된 부분은 세군데 입니다.

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

우선 타입스크립트는 작성은 .ts지만 실행될 때는 컴파일러에 의해 .js로 변환되서 실제로 실행됩니다. 그래서 script항목의 dev 명령어는 개발 도중 src의 index.ts를 실행하고, build는 개발 완료 후 배포를 위한 js파일을 만들어 내기 위해 사용되는 명령어입니다. 각 명령어는 npm run 명령어의 형태로 실행이 가능합니다.

이것으로 타입스크립트 프로젝트 기본 설정을 완료했습니다.