TypeScript 설치 방법 및 기본 설정

TypeScript 설치 방법

TypeScript는 JavaScript의 상위 집합으로, 정적 타입을 제공하여 코드 품질과 유지보수성을 크게 향상시킵니다. 이를 설치하기 전에 Node.js와 npm이 준비되어 있어야 합니다. 아래는 이를 포함한 TypeScript 설치 과정입니다.

 

Node.js와 npm 설치

Node.js 다운로드
Node.js 공식 사이트에 접속하여 운영 체제에 맞는 설치 프로그램을 다운로드합니다. 안정적인 LTS 버전을 권장합니다.

Node.js — 어디서든 JavaScript를 실행하세요

 

 

설치 확인
터미널이나 명령 프롬프트에서 다음 명령어를 실행해 설치 여부를 확인합니다.출력된 버전 정보가 표시되면 설치가 완료된 것입니다.

node -v
npm -v

 

TypeScript 설치

글로벌 설치
TypeScript를 전역적으로 사용하려면 다음 명령어를 실행합니다.전역 설치는 시스템 전체에서 tsc 명령어를 사용할 수 있도록 설정합니다.

npm install -g typescript

 

설치 확인
아래 명령어로 TypeScript가 올바르게 설치되었는지 확인합니다.설치된 TypeScript의 버전 정보가 출력됩니다.

tsc -v

---

TypeScript 컴파일러(tsc) 소개

TypeScript는 .ts 파일로 작성되며, 이를 JavaScript로 변환하기 위해 TypeScript 컴파일러(tsc)를 사용합니다. tsc는 TypeScript 파일을 읽고 JavaScript 파일로 변환하는 주요 도구입니다.

 

기본 사용법

파일 생성
예를 들어, greeting.ts 파일을 작성합니다.

function greet(name: string): string {
    return `안녕하세요, ${name}!`;
}

console.log(greet('홍길동'));

 

컴파일
아래 명령어를 사용해 TypeScript 파일을 컴파일합니다.성공적으로 컴파일되면 greeting.js 파일이 생성됩니다.

tsc greeting.ts

 

실행
생성된 JavaScript 파일을 실행합니다.

node greeting.js

 

TypeScript 프로젝트 초기화

TypeScript 프로젝트를 체계적으로 관리하려면 tsconfig.json 파일을 생성해야 합니다. 이 파일은 TypeScript 컴파일러 옵션을 정의하는 설정 파일입니다.

 

tsconfig.json 설정

초기화 명령어
프로젝트 폴더에서 다음 명령어를 실행하여 tsconfig.json 파일을 생성합니다.생성된 파일에는 기본 설정이 포함되어 있습니다.

tsc --init

 

주요 설정 수정
생성된 tsconfig.json을 열어 필요에 따라 수정합니다. 아래는 일반적인 설정 예제입니다.

{
  "compilerOptions": {
    "target": "ES6", // 컴파일 결과의 JavaScript 버전
    "module": "CommonJS", // 모듈 시스템 설정
    "strict": true, // 엄격 모드 활성화
    "outDir": "./dist", // 컴파일 결과물이 저장될 디렉토리
    "rootDir": "./src", // 소스 파일의 루트 디렉토리
    "esModuleInterop": true // ES 모듈 호환성 활성화
  },
  "include": ["src/**/*"], // 컴파일할 파일 경로 
  "exclude": ["node_modules"] // 제외할 파일 경로
}

 

프로젝트 구조
프로젝트 구조를 다음과 같이 구성하면 관리하기 용이합니다.

my-typescript-project/
├── src/
│   ├── index.ts
├── dist/
├── tsconfig.json
└── package.json

 

컴파일 명령
프로젝트 루트에서 tsc 명령어를 실행하여 전체 프로젝트를 컴파일합니다.

tsc