JavaScript에서 TypeScript 마이그레이션 — 단계별 전환 전략

1단계: TypeScript 설치 + allowJs
2단계: JSDoc으로 타입 추가
3단계: .js → .ts 파일 변환 (느슨한 설정)
4단계: strict 모드 점진적 활성화
5단계: any 제거 + 완전한 타입 커버리지

npm install --save-dev typescript
npx tsc --init

// tsconfig.json — 가장 느슨한 설정으로 시작
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "allowJs": true,          // JS 파일 허용
    "checkJs": false,         // JS 파일 타입 체크 안 함 (처음에는)
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": false,          // 처음에는 느슨하게
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true            // 번들러가 있다면
  },
  "include": ["src/**/*"]
}

// utils.js — JSDoc으로 타입 추가

/**
 * @param {string} name
 * @param {number} age
 * @returns {{ name: string, age: number }}
 */
function createUser(name, age) {
  return { name, age };
}

/** @type {string[]} */
const tags = ['javascript', 'typescript'];

/**
 * @typedef {Object} Config
 * @property {string} host
 * @property {number} port
 * @property {boolean} [ssl]
 */

/** @type {Config} */
const config = { host: 'localhost', port: 3000 };

// tsconfig.json — checkJs 활성화
{
  "compilerOptions": {
    "checkJs": true  // JS 파일도 타입 체크
  }
}

// JS에서 변환할 때 흔한 패턴

// ❌ JS 패턴 — 동적 속성 추가
const user = {};
user.name = '홍길동'; // Error: Property 'name' does not exist

// ✅ TS로 변환
const user: { name: string } = { name: '홍길동' };
// 또는
interface User { name: string; }
const user: User = { name: '홍길동' };

// 일단 any로 변환 후 나중에 개선
function processData(data: any): any {
  // TODO: 타입 추가
  return data.map((item: any) => item.value);
}

// 활성화 순서 (추천)
{
  "compilerOptions": {
    "strict": false,

    // 1단계: 가장 영향이 적은 것부터
    "noImplicitAny": true,           // any 추론 금지

    // 2단계
    "strictNullChecks": true,        // null/undefined 분리

    // 3단계
    "strictFunctionTypes": true,     // 함수 매개변수 반공변

    // 4단계
    "strictPropertyInitialization": true, // 클래스 속성 초기화

    // 최종: 모든 것을 strict: true로
    // "strict": true
  }
}

// 에러 발생 위치에 타입을 추가
// ❌ Parameter 'data' implicitly has an 'any' type
function process(data) { /* ... */ }

// ✅ 타입 추가
function process(data: unknown) { /* ... */ }
// 또는 일단 any를 명시 (나중에 개선)
function process(data: any) { /* ... */ }

// ❌ Object is possibly 'null'
const element = document.getElementById('app');
element.textContent = 'hello'; // Error

// ✅ null 체크 추가
const element = document.getElementById('app');
if (element) {
  element.textContent = 'hello';
}

# any 사용 현황 확인
npx tsc --noEmit | grep 'any'

// ESLint로 any 사용을 경고
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn" // 처음에는 warn, 나중에 error
  }
}

# Airbnb의 자동 마이그레이션 도구
npx ts-migrate-full <project-dir>