[TypeScript] 타입스크립트 시작하기

TypeScript: JavaScript의 슈퍼셋으로, 강력한 타입 안정성과 정적 타입 검사 제공

TypeScript 프로젝트의 초기 설정부터 실행까지의 과정 단계별 설명

---

1. 초기 세팅

npm 초기화

TypeScript 프로젝트 시작을 위한 package.json 파일 생성 방법:

npm init -y

• -y 옵션: 기본 설정으로 package.json 파일 자동 생성

전역 Node.js 패키지 확인

현재 시스템에 전역으로 설치된 Node.js 패키지 확인 명령어:

npm ls -g --depth=0

출력 예시:

/usr/local/lib
├── corepack@0.29.3
├── n@10.0.0
└── npm@10.8.2

• 전역 설치된 패키지: 시스템 전체에서 사용 가능
• Tip: 전역 설치 최소화 권장, 프로젝트별 로컬 설치 선호

전역 패키지 제거:

npm uninstall -g [패키지명]

npm 캐시 정리

npm 관련 문제 예방을 위한 캐시 검증 및 정리 방법:

npm cache verify

npm 캐시의 무결성 확인 및 필요 시 정리 수행

2. TypeScript 설치

TypeScript 로컬 설치 명령어:

npm install typescript --save-dev

• --save-dev 옵션: 개발 환경에서만 필요한 패키지 설치

3. TypeScript 초기화

TypeScript 설정을 위한 tsconfig.json 파일 생성 명령어:

npx tsc --init

• tsconfig.json: TypeScript 컴파일러 옵션 설정 파일

4. tsconfig.json 설정

tsconfig.json 파일 예제(강사님 샘플 코드 일부)
프로젝트 요구사항에 따라 설정 조정 가능

{   
    // 엄격한 타입 검사를 활성화합니다.
    // 여러 가지 타입 검사 옵션을 포함하여 더욱 엄격한 타입 체크를 수행합니다.
    "strict": true,
    
    // .d.ts 파일의 타입 검사를 건너뜁니다.
    // 이는 컴파일 속도를 높이기 위해 유용합니다.
    "skipLibCheck": true
  },
  
  // 컴파일 대상 파일을 지정합니다.
  // 여기서는 `src` 디렉토리 아래의 모든 `.ts` 파일을 포함합니다.
  "include": ["src/**/*.ts"],
  
  // 컴파일에서 제외할 파일을 지정합니다.
  // 여기서는 `node_modules` 디렉토리를 제외합니다.
  "exclude": ["node_modules"]
}

• include: 컴파일 대상 파일 경로 지정.
• exclude: 컴파일에서 제외할 파일 경로 지정.

5. TypeScript 컴파일

• 컴파일이란? TypeScript 코드를 브라우저나 Node.js가 이해할 수 있는 JavaScript로 변환하는 과정

TypeScript 파일을 JavaScript로 컴파일하기 위한 tsc 명령어 사용.

전제 조건: src 디렉토리에 TypeScript 파일(.ts)을 먼저 작성해야 함.

단일 파일 컴파일

npx tsc src/index.ts

💡터미널에서 폴더 경로 찾을 때 tap 키 이용하면 자동완성 됨

npx tsc src/ 
//여기까지 치고 tap 

전체 프로젝트 컴파일

• index.ts 파일을 dist/index.js로 컴파일
• tsconfig.json 설정에 따라 프로젝트 내 모든 TypeScript 파일 컴파일

npx tsc

---

TypeScript를 브라우저 없이 바로 실행하는 방법

방법 1: TypeScript 파일을 JavaScript로 매번 컴파일해서 실행

TypeScript 파일(.ts)을 JavaScript 파일(.js)로 컴파일한 후 브라우저나 Node.js로 실행하는 방법

• 단점: 매번 컴파일해야 하므로 번거로움
• 장점: 브라우저가 아닌 Node.js에서도 JavaScript처럼 동작 확인 가능

npx tsc [파일명].ts  # TypeScript 파일을 JavaScript로 컴파일
node [파일명].js     # 컴파일된 JavaScript 파일 실행

방법 2: ts-node와 Code Runner 확장으로 TypeScript 파일을 즉시 실행

Code Runner와 ts-node를 이용해 컴파일 없이 TypeScript 파일을 바로 실행하는 방법

1. ts-node 설치 및 설정

   • ts-node는 TypeScript 파일을 즉시 실행할 수 있는 도구. 프로젝트의 devDependencies에 추가

   npm install ts-node --save-dev

   • 설치 확인: npx ts-node -v 실행
   • ts-node 버전이 표시되면 설치 완료. (중간에 y를 입력하라는 메시지가 뜨면 y 입력)
   • package.json 결과:

     "devDependencies": {
         "ts-node": "^10.9.2",
         "typescript": "^5.6.3"
     }

   • ts-node와 typescript가 devDependencies에 함께 설치되어야 함

2. VSCode 설정 (Code Runner 설정)

   • VSCode의 설정 파일에 ts-node를 이용해 TypeScript 파일을 바로 실행할 수 있도록 세팅
   • 설정 파일(settings.json)에 다음 코드를 추가:

     "code-runner.clearPreviousOutput": true,
     "code-runner.executorMap": {
       "typescript": "node_modules/.bin/ts-node"
     }

   • code-runner.clearPreviousOutput: true — 실행할 때마다 이전 출력 결과를 지움
   • code-runner.executorMap 설정 — Code Runner가 TypeScript 파일을 실행할 때 ts-node를 사용하도록 설정

3. TypeScript 파일 실행

   • 설정이 완료되면 .ts 파일에서 Code Runner를 실행
   • 컴파일 과정 없이 즉시 결과 확인 가능

TypeScript와 JavaScript 차이점 비교

특성	JavaScript	TypeScript
언어 유형	동적 언어	정적 언어
타입 체크	런타임에 수행	컴파일 시 수행
오류 검출	실행 시 발견	컴파일 시 발견
타입 지정	선택적, 동적	필수적, 정적
컴파일 과정	불필요	필요 (TS → JS)
개발 시 이점	빠른 프로토타이핑	강력한 타입 안정성

---

요약

• TypeScript 초기화: npm init → npm install typescript → npx tsc --init.
• 컴파일: 단일 파일 → npx tsc src/index.ts, 전체 프로젝트 → npx tsc.
• 실행: 컴파일 후 실행 → node, 바로 실행 → ts-node.

출처: 수코딩