TypeScript 3.5 프로젝트 도입 후 겪은 문제들

배경

3개월 전부터 진행했던 TypeScript 마이그레이션을 이번주에 완료했다. 약 15만 라인 규모의 React 프로젝트였고, 점진적으로 .js를 .ts로 변환하는 방식을 택했다.

주요 이슈

1. any의 유혹

초반에는 타입 에러가 나면 습관적으로 any를 붙였다. 결국 코드 리뷰에서 지적받고 다시 작업해야 했다.

// 나쁜 예
function fetchData(params: any): any {
  return api.get(params);
}

// 개선
interface FetchParams {
  page: number;
  limit: number;
}

interface ApiResponse<T> {
  data: T;
  status: number;
}

function fetchData(params: FetchParams): Promise<ApiResponse<User[]>> {
  return api.get('/users', params);
}

2. 서드파티 라이브러리 타입 정의

오래된 라이브러리들은 @types가 없거나 outdated된 경우가 많았다. custom.d.ts에 직접 선언했다.

// src/types/custom.d.ts
declare module 'old-library' {
  export function doSomething(val: string): void;
}

3. strictNullChecks

처음엔 false로 두고 시작했는데, 나중에 켜려니 에러가 수천개 발생했다. 처음부터 strict 모드로 갈 걸 후회했다.

4. 빌드 시간 증가

ts-loader 사용 시 빌드 시간이 2배 가까이 늘었다. fork-ts-checker-webpack-plugin으로 타입 체크를 별도 프로세스로 분리해서 해결했다.

결과

• 런타임 에러 30% 감소
• IDE 자동완성으로 생산성 향상
• 리팩토링 시 안정성 확보

처음엔 러닝커브가 있었지만 충분히 투자할 가치가 있었다. 다음 프로젝트는 처음부터 TypeScript로 시작할 예정이다.