[TypeScript-01] 컴파일 설정

TypeScript 설치 및 컴파일 설정

전역 설치

npm install -g typescript

컴파일 명령어

# 단일 파일 컴파일
tsc app.ts

# 실시간 컴파일 (변경사항 감지)
tsc -w app.ts

---

tsconfig.json 설정

tsconfig.json 파일 생성

프로젝트 루트에 tsconfig.json 파일을 생성하고 TypeScript 컴파일 옵션을 설정합니다.

기본 설정

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

주요 옵션 설명

• target: 컴파일할 JavaScript 버전 (es5, es2015, es2016, esnext)
• module: 모듈 시스템 (commonjs, es2015, esnext)
  • commonjs: require() 문법 사용
  • es2015: import/export 문법 사용

추천 기본 설정

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

전체 설정 옵션

{
  "compilerOptions": {
    // 기본 설정
    "target": "es5",
    "module": "commonjs",
    
    // 파일 처리
    "allowJs": true,              // JS 파일 import 허용
    "checkJs": true,              // JS 파일 에러 체크
    "jsx": "preserve",            // JSX 컴파일 방식
    "declaration": true,          // .d.ts 파일 자동 생성
    
    // 출력 설정
    "outFile": "./",              // 모든 파일을 하나로 컴파일
    "outDir": "./dist",           // 출력 디렉토리
    "rootDir": "./src",           // 루트 디렉토리
    "removeComments": true,       // 주석 제거
    
    // 엄격한 타입 체크
    "strict": true,               // 모든 strict 옵션 활성화
    "noImplicitAny": true,        // any 타입 금지
    "strictNullChecks": true,     // null/undefined 엄격 체크
    "strictFunctionTypes": true,  // 함수 파라미터 엄격 체크
    "noImplicitThis": true,       // this 타입 체크
    
    // 추가 체크
    "noUnusedLocals": true,       // 사용하지 않는 지역변수 에러
    "noUnusedParameters": true,   // 사용하지 않는 파라미터 에러
    "noImplicitReturns": true,    // return 누락 에러
    "noFallthroughCasesInSwitch": true  // switch문 fallthrough 에러
  }
}

---

기본 타입 지정

Primitive 타입

let 이름: string = 'kim'
let 나이: number = 20
let 결혼했니: boolean = false

중요:

• 소문자로 작성 (string, number, boolean)
• 대문자 String, Number는 객체 타입으로 다름

타입 자동 추론

// 자동으로 타입이 추론됨 (권장 방식)
let 이름 = 'kim'        // string 타입
let 나이 = 20           // number 타입
let 결혼했니 = false     // boolean 타입

Array 타입

let 회원들: string[] = ['kim', 'park']
let 숫자들: number[] = [1, 2, 3]

Object 타입

let 내정보: { age: number } = { age: 20 }

// 복잡한 객체
let 유저정보: {
  name: string,
  age: number,
  married: boolean
} = {
  name: 'kim',
  age: 25,
  married: false
}

---

Union Type (합집합 타입)

기본 사용법

let 이름: string | number = 'kim'
이름 = 123  // 가능

let 나이: string | number = 100

Array와 Object에서 Union 타입

// Array에 여러 타입
let 어레이: (number | string)[] = [1, '2', 3]

// Object 속성에 여러 타입
let 오브젝트: { data: number | string } = { data: 123 }

실용적인 예시

let 상태: 'loading' | 'success' | 'error' = 'loading'
let ID: string | number = 'user123'

---

any와 unknown 타입

any 타입 (비추천)

let 이름: any = 'kim'
이름 = 123
이름 = []
이름 = {}  // 모든 타입 허용, 타입 체크 해제

any의 문제점:

• 타입 안전성 해제
• TypeScript 사용 이유 상실
• 런타임 에러 가능성 증가

unknown 타입 (권장)

let 변수: unknown = 'kim'
변수 = 123
변수 = []  // 모든 타입 할당 가능

// 하지만 사용 시 제한
let str: string = 변수  // 에러!
변수.toUpperCase()      // 에러!
변수 + 1               // 에러!

unknown의 특징:

• 모든 타입 할당 가능
• 사용 전 타입 체크 필요
• any보다 안전한 대안

---

함수 타입 지정

기본 함수 타입

function 내함수(x: number): number {
  return x * 2
}

// 화살표 함수
let 함수 = (x: number): number => {
  return x * 2
}

void 타입

function 출력함수(x: string): void {
  console.log(x)
  // return이 없거나 return만 있는 함수
}

선택적 파라미터

function 인사(name?: string): void {
  if (name) {
    console.log(`안녕하세요 ${name}`)
  } else {
    console.log('이름이 없습니다')
  }
}

인사()      // 가능
인사('홍길동') // 가능

주의: name?는 name: string | undefined와 동일

Union 타입 파라미터의 문제

function 계산(x: number | string) {
  return x + 1  // 에러! Union 타입은 공통 속성만 사용 가능
}

해결 방법: 타입 가드 사용 (추후 학습)

---

실전 예제 및 문제 해결

예제 1: 사용자 정보 타입

let user: string = 'kim'
let age: number | undefined = undefined
let married: boolean = false
let 철수: (string | number | boolean | undefined)[] = [user, age, married]

예제 2: 학교 정보 복합 타입

let 학교: {
  score: (number | boolean)[],
  teacher: string,
  friend: string | string[]
} = {
  score: [100, 97, 84],
  teacher: 'Phil',
  friend: 'John'
}

학교.score[4] = false
학교.friend = ['Lee', 학교.teacher]

예제 3: 함수 타입 지정

// 인사 함수
function 인사하기(name?: string): void {
  if (name) {
    console.log(`안녕하세요 ${name}`)
  } else {
    console.log('이름이 없습니다')
  }
}

// 자릿수 세기 함수
function 자릿수세기(x: number | string): number {
  return x.toString().length
}

// 결혼 가능성 판별 함수
function 결혼가능하냐(
  money: number,
  house: boolean,
  charm: string
): string | void {
  let score: number = 0
  
  score += money
  
  if (house === true) {
    score += 500
  }
  
  if (charm === '상') {
    score += 100
  }
  
  if (score >= 600) {
    return '결혼가능'
  }
}

---

타입 체크 에러 해결

일반적인 에러들

1. Union 타입 연산 에러

let 나이: string | number
나이 + 1  // 에러!

원인: Union 타입에서는 공통 연산만 가능

2. unknown 타입 조작 에러

let 변수: unknown = 1
변수 + 1  // 에러!

원인: unknown 타입은 사용 전 타입 확인 필요

3. 선택적 파라미터 에러

function 계산(x?: number): number {
  return x * 2  // 에러! x는 undefined일 수 있음
}

원인: 선택적 파라미터는 undefined 가능성 있음

---

TypeScript 개발 팁

1. 에디터 활용

• VS Code에서 타입 정보 확인: 변수에 마우스 오버
• 에러 확인: Problems 탭 또는 터미널의 tsc -w 출력

2. 타입 작성 원칙

• 간단한 경우 타입 자동 추론 활용
• 복잡한 경우에만 명시적 타입 지정
• any 타입 사용 최소화

3. 개발 워크플로우

# 1. TypeScript 파일 작성
# 2. 실시간 컴파일 실행
tsc -w

# 3. JavaScript 파일 실행
node app.js

---

다음 단계 학습 로드맵

중급 개념

1. Type Narrowing: Union 타입 안전하게 사용하기
2. Type Assertion: 타입 강제 지정
3. Literal Types: 정확한 값으로 타입 지정
4. Interface: 객체 타입 재사용
5. Generic: 타입 변수 활용

고급 개념

1. Utility Types: 타입 변환 도구들
2. Conditional Types: 조건부 타입
3. Mapped Types: 타입 매핑
4. Module: 모듈 시스템과 타입

---

실전 체크리스트

기본 설정

• TypeScript 전역 설치
• tsconfig.json 파일 생성
• 기본 컴파일 옵션 설정
• 에디터 TypeScript 지원 확인

타입 지정

• Primitive 타입 이해
• Array, Object 타입 지정
• Union 타입 활용
• 함수 파라미터/리턴 타입 지정

문제 해결

• 타입 에러 읽기 및 해결
• any 타입 사용 최소화
• unknown 타입 안전 사용
• 선택적 파라미터 올바른 사용

개발 환경

• 실시간 컴파일 설정 (tsc -w)
• 에러 확인 방법 숙지
• 타입 정보 확인 방법 숙지