🐻 [TypeScript] 프로젝트 환경 구성하기

🌊 프로젝트 환경 구성하기

 

TS 설치하기

프로젝트 폴더 초기화하기

// yarn 사용시
yarn init -y

// npm 사용시
npm init -y

// -y는 사용자에게 추가 질문을 하지 않고 기본값으로 설정하는 옵션이다. 빠른 프로젝트 생성이 가능하다.

프로젝트를 할 폴더를 생성한 후 폴더 경로의 터미널에서 프로젝트를 초기화한다.

 

 

타입스크립트 설치

// --save-dev, --dev는 개발 종속성으로 패키지를 설치하는 옵션이다.
// 타입스크립트는 개발 과정에만 필요하고 후에 JS로 컴파일링 할 예정이므로 dev 옵션으로 설치한다. 

// npm으로 설치할 시
npm install typescript --save-dev 

// yarn으로 설치시
yarn add typescript --dev

 

tsconfig.json 파일 생성

루트 폴더에 tsconfig.json 파일을 생성한다. 

TypseScript 프로젝트를 컴파일하는 방법을 설정하는 파일이다. 파일에는 컴파일러 옵션, 프로젝트에서 사용하는 TypeScript 파일의 경로 같은 정보가 포함되어있다.

 

파일 구조

{
  "compilerOptions": {
    // 컴파일러 옵션 설정
  },
  "include": [
    // TypeScript 파일 경로
  ],
  "exclude": [
    // 컴파일에서 제외할 파일 경로
  ]
}

 

컴파일러 옵션

• target : 컴파일된 JS 코드가 실행되는 ECMAScript 버전을 지정한다.
• module : 모듈시스템을 지정한다.
  → CommonJS, ES6, AMD, System 등이 해당 된다.
• sourceMap : 소스맵 파일을 생성할 지 설정하는 옵션. 설정하면 JS와 TS 사이의 매핑정보가 담긴 .map 파일이 추가된다.
• outDir : 컴파일 된 JS 파일이 저장될 디렉토리를 지정

TSConfig Reference - Docs on every TSConfig option

 

완성한 설정 파일

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

 

 

코드스테이츠 자료와 타입스크립트 공식 문서를 참고하였습니다.