기존 JavaScript 코드베이스를 TypeScript로 통합하기

기존 순수 JavaScript 코드베이스를 TypeScript로 옮길 때 발생할 수 있는 주요 문제 중 하나는 모듈 경로를 찾지 못하는 문제입니다. 이 문제를 해결하기 위해 설정 및 모듈 사용 방법에 대해 정리했습니다.

TypeScript 설정 추가

tsconfig.json에서 다음 두 옵션을 설정하여 기존 JavaScript 파일을 TypeScript 프로젝트에 포함할 수 있습니다.

{
  "compilerOptions": {
    "allowJs": true,  // JavaScript 파일을 포함
    "checkJs": false  // JavaScript 파일의 타입 검사 비활성화
  }
}

주요 효과

• allowJs: TypeScript 프로젝트에 JavaScript 파일을 포함할 수 있습니다.
• checkJs: JavaScript 파일에 대해 타입 검사를 하지 않습니다.

기존 모듈의 사용

만약 a.js 파일이 아래와 같이 정의되어 있다면:

a.js

function hey() {
    console.log("hey");
}
export { hey };

이를 TypeScript에서 사용하는 방법은 다음과 같습니다.

main.ts

1. ES 모듈 방식

import * as moduleA from './a'; // 또는 명시적으로 상대 경로 작성
moduleA.hey();

2. CommonJS 스타일

const moduleA = require('./a');
moduleA.hey();

더 TypeScript스러운 방법으로 사용하기

1. .d.ts 파일로 타입 정의 추가

JavaScript 모듈의 타입을 정의하면 TypeScript 코드에서 안전하게 사용할 수 있습니다.

a.d.ts

declare module './a' {
    export function hey(): void;
}

이렇게 하면 TypeScript는 a.js를 사용할 때 타입 정보를 제공합니다.

2. 타입 정의가 포함된 라이브러리 사용

써드파티 JavaScript 라이브러리를 사용할 때는 이미 제공된 타입 정의를 활용할 수 있습니다. 타입 정의는 @types/ 패키지를 통해 설치 가능합니다.

npm install --save-dev @types/library-name

이후 TypeScript에서 바로 타입 정보를 활용할 수 있습니다.

3. ES 모듈로 변환

기존 JavaScript 코드를 TypeScript와 자연스럽게 동작하도록 리팩토링할 수도 있습니다.

기존 JavaScript (a.js)

export function hey() {
    console.log("hey");
}

TypeScript에서 사용 (main.ts)

import { hey } from './a';
hey();

추가 참고 자료

1. 공식 TypeScript 문서 - JavaScript 파일 포함하기
2. TypeScript에서 JavaScript 모듈 사용하기
3. TypeScript 공식 문서 - Declaration Files

마무리

위 방법들을 활용하면 기존 JavaScript 코드베이스를 TypeScript로 점진적으로 통합할 수 있습니다.
다음 단계로는:

1. 타입 정의를 작성하거나
2. @types 패키지를 활용해 써드파티 라이브러리를 더 TypeScript스럽게 사용할 수 있습니다.