[TS] 타입스크립트 환경 설정

🗣️ TypeScript로 개발하기 위해 반드시 필요한 세팅이 무엇이고, 어떻게 해야 하는지 설명할 수 있나요?

• 의도: 지원자가 TypeScript 개발을 위해 필요한 환경 설정을 이해하고 있는지 평가

• 팁

  • TypeScript 컴파일러 설치 방법을 설명한다.
  • tsconfig.json 파일의 역할과 기본 설정을 설명한다.
  • 프로젝트에 TypeScript를 설정하는 방법을 설명한다.

• 나의 답안

  타입스크립트로 개발하기 위해서는 우선 타입스크립트 컴파일러 환경을 설정해야 합니다.
  첫 번째로 해야 할 일은 npm install typescript 명령을 입력하여 프로젝트에 타입스크립트를 설치하는 것입니다.

  그 다음으로 중요한 건 tsconfig.json 설정 파일을 만드는 것입니다.
  이 파일이 있어야 타입스크립트 컴파일러가 어떤 규칙으로 코드를 검사하고 변환할지 알 수 있습니다.

  그리고 리액트 환경이라면 타입 정의 파일(@types) 설치도 필수입니다.
  예를 들어 DOM이나 React 관련 타입을 사용하려면 @types/react나 @types/react-dom을 설치해야 정상적으로 타입 추론과 검사 기능이 동작합니다.

• 주어진 답안 (모범 답안)

  타입스크립트 컴파일러는 npm을 사용하여 설치할 수 있습니다.
  npm install -g typescript 명령을 입력하면 타입스크립트 컴파일러가 설치됩니다.

  tsconfig.json 파일은 TypeScript 컴파일러 옵션을 설정하는 파일로, 프로젝트 루트에 위치시킵니다.
  기본 설정으로 컴파일러 옵션을 지정하여 프로젝트에 TypeScript를 설정할 수 있습니다.

---

📝 개념 정리

TypeScript로 개발하려면 환경 설정을 올바르게 구성하는 것이 중요하다.
다음은 TypeScript를 시작하는 데 필요한 필수적인 설정과 단계별 방법을 상세히 설명한 가이드이다.

1. TypeScript 설치

TypeScript는 Node.js 환경에서 실행되므로, 먼저 Node.js와 npm(Node Package Manager)이 필요하다.

1. Node.js 설치
   • Node.js 공식 사이트에서 LTS(Long Term Support) 버전을 다운로드 후 설치한다.
   • 설치 후, 터미널에서 Node.js와 npm 버전을 확인한다.

     node -v    # Node.js 버전 확인
      npm -v     # npm 버전 확인

2. TypeScript 설치
   TypeScript는 npm을 통해 글로벌 또는 로컬로 설치할 수 있다.

   • 글로벌 설치(전역 설치)
     시스템 전체에서 TypeScript를 사용하려면, 글로벌로 설치한다.

     npm install -g typescript

     설치가 완료되면 TypeScript의 버전을 확인한다.

     tsc -v   # TypeScript 컴파일러 버전 확인

   • 프로젝트 로컬 설치
     특정 프로젝트에서만 TypeScript를 사용하려면 프로젝트 폴더에서 로컬로 설치한다.

     npm init -y   # package.json 생성
      npm install --save-dev typescript

     설치 후, node_modules/.bin/tsc 경로를 사용하여 TypeScript 컴파일러를 실행할 수 있다.

     npx tsc -v   # TypeScript 버전 확인 (로컬 실행)

---

2. TypeScript 프로젝트 설정

TypeScript 프로젝트를 설정하려면 tsconfig.json 파일이 필요하다.

1. tsconfig.json 파일 생성
   다음 명령어를 실행하면 기본 tsconfig.json 파일이 생성된다.

   npx tsc --init

   생성된 tsconfig.json은 TypeScript의 컴파일 옵션을 정의하는 설정 파일이다.

---

3. tsconfig.json 기본 설정

tsconfig.json의 주요 옵션을 설명하면 다음과 같다.

{
  "compilerOptions": {
    "target": "ES6", // 컴파일할 JavaScript 버전 (ES6, ES2015, ESNext 등)
    "module": "CommonJS", // 모듈 시스템 설정 (Node.js에서는 CommonJS 사용)
    "outDir": "./dist", // 컴파일된 JS 파일을 저장할 디렉터리
    "rootDir": "./src", // TypeScript 원본 파일이 위치할 디렉터리
    "strict": true, // 엄격한 타입 검사를 활성화
    "esModuleInterop": true, // CommonJS 및 ES 모듈 간 상호 운용성 활성화
    "skipLibCheck": true, // 라이브러리 타입 체크 생략 (컴파일 속도 향상)
    "forceConsistentCasingInFileNames": true // 파일명 대소문자 일관성 유지
  },
  "include": ["src"], // 컴파일 대상 파일 포함 (src 폴더 내 모든 .ts 파일)
  "exclude": ["node_modules"] // 제외할 파일/폴더 지정
} 

• target: TypeScript를 어떤 JavaScript 버전으로 변환할지 결정
• module: 사용될 모듈 시스템 (Node.js는 CommonJS, 브라우저는 ESNext 추천)
• strict: 엄격한 타입 체크를 활성화하여 버그를 방지
• outDir: 컴파일된 JavaScript 파일이 저장될 폴더
• rootDir: TypeScript 원본 파일이 위치하는 폴더

---

4. 프로젝트 폴더 구조 설정

TypeScript 프로젝트의 폴더 구조를 다음과 같이 설정하는 것이 일반적이다.

/my-project
  ├─ /src            # TypeScript 원본 파일
  │   ├─ index.ts
  │   ├─ app.ts
  │   └─ utils.ts
  ├─ /dist           # 컴파일된 JavaScript 파일 (tsc 실행 후 생성됨)
  ├─ package.json    # 프로젝트 정보 및 의존성 관리
  ├─ tsconfig.json   # TypeScript 설정 파일
  ├─ node_modules/   # npm 패키지 저장소

---

5. TypeScript 코드 작성 및 실행

1. TypeScript 코드 작성 (src/index.ts)
   src/index.ts 파일을 생성하고 다음 코드를 작성한다.

   function greet(name: string): string {
     return `Hello, ${name}!`;
   }
   
   console.log(greet("TypeScript"));

2. TypeScript 코드 컴파일
   다음 명령어를 실행하면 TypeScript 코드가 JavaScript로 변환된다.

   npx tsc

   dist/ 폴더가 생성되며, index.js 파일이 생성된다.

3. JavaScript 실행
   컴파일된 JavaScript 파일을 실행한다.

   node dist/index.js

   • 출력 결과

     Hello, TypeScript!

---

6. TypeScript 개발에 유용한 도구

1. VSCode 설정
   TypeScript 개발에서는 VSCode가 가장 많이 사용된다. 다음 확장을 설치하면 개발 경험이 더욱 향상된다.
   • ESLint: 코드 스타일 검사 및 자동 수정 지원
   • Prettier: 코드 자동 정렬 및 스타일 유지
   • TypeScript Language Features: TypeScript 코드 자동 완성 지원

2. ts-node를 이용한 실행 (컴파일 없이 실행)
   매번 tsc를 실행하여 컴파일하는 것이 번거롭다면 ts-node를 사용하면 된다.

   npm install --save-dev ts-node

   설치 후, TypeScript 파일을 직접 실행할 수 있다.

   npx ts-node src/index.ts

3. nodemon을 이용한 자동 실행
   파일이 변경될 때 자동으로 실행하려면 nodemon을 사용한다.

   npm install --save-dev nodemon

   package.json에 스크립트를 추가한다.

   "scripts": {
     "start": "npx nodemon --exec npx ts-node src/index.ts"
   }

   이제 아래 명령어로 실행하면 파일이 변경될 때 자동으로 재실행된다.

   npm start

---

7. TypeScript 프로젝트의 패키지 관리

1. 프로젝트에서 npm 패키지 설치
   JavaScript 패키지를 설치할 때, TypeScript 프로젝트에서는 해당 패키지의 타입 정의 파일도 필요할 수 있다.

   예를 들어, express를 설치한다고 가정하면

   npm install express
   npm install --save-dev @types/express

   @types/express는 express의 TypeScript 타입 정보를 제공하는 패키지이다.

---

8. 정리

단계	설명
1. Node.js 설치	TypeScript 실행 환경을 구축하기 위해 Node.js를 설치
2. TypeScript 설치	npm install -g typescript 또는 프로젝트 내 로컬 설치
3. tsconfig.json 설정	npx tsc --init으로 설정 파일 생성 후 주요 옵션 설정
4. 프로젝트 폴더 구성	src/, dist/ 폴더 구조 정리
5. TypeScript 코드 작성 및 실행	.ts 파일 생성 후 npx tsc로 컴파일
6. 개발 도구 활용	VSCode 확장, ts-node, nodemon 활용
7. 패키지 관리	패키지 설치 시 @types/패키지명도 함께 설치