JavaScript 코드를 TypeScript로 전환 수정 사항

JavaScript 코드를 TypeScript로 전환하기 위해 필요한 주요 수정 사항

 

핵심은 JavaScript 코드에 '타입 정보'를 추가하고, TypeScript 컴파일러가 해당 타입을 이해하고 검사할 수 있도록 환경을 설정하는 것입니다.

---

---

1. 파일 확장자 변경

가장 기본적인 첫 단계는 JavaScript 파일의 확장자를 변경하는 것입니다.

.js 파일을 .ts로 변경합니다.
React를 사용하는 .jsx 파일은 .tsx로 변경합니다.

이것만으로도 TypeScript 컴파일러는 해당 파일들을 TypeScript 코드로 인식하기 시작합니다.

---

---

2. TypeScript 설정 파일 (tsconfig.json) 추가 및 구성

프로젝트 루트에 tsconfig.json 파일을 생성하여 TypeScript 컴파일러의 동작 방식을 설정해야 합니다. 

이 파일에는 컴파일러 옵션(예: 어떤 버전의 JavaScript로 변환할 것인지, 엄격한 타입 검사를 사용할 것인지 등)이 포함됩니다.

주요 설정 예시:

{
  "compilerOptions": {
    "target": "es2020",         // 출력할 JavaScript 버전 (예: ES2020)
    "module": "commonjs",       // 모듈 시스템 (예: CommonJS 또는 ESNext)
    "lib": ["es2020", "dom"],    // 포함할 라이브러리 (DOM 관련 기능 등)
    "strict": true,             // 엄격한 타입 검사 활성화 (권장)
    "esModuleInterop": true,    // CommonJS 모듈과 ES 모듈 간의 상호 운용성 허용
    "skipLibCheck": true,       // 선언 파일(*.d.ts)에 대한 타입 검사 건너뛰기
    "forceConsistentCasingInFileNames": true, // 파일명 대소문자 일관성 강제
    "outDir": "./dist"          // 컴파일된 JavaScript 파일이 저장될 디렉터리
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

json

strict: true: 초기 전환 시에는 strict: false로 시작하여 점진적으로 true로 전환하는 것도 고려해볼 수 있습니다. strict: true는 가장 엄격한 타입 검사를 활성화하므로 오류를 가장 많이 발견할 수 있습니다.

---

 

---

3. 타입 주석 (Type Annotations) 추가

기존 JavaScript 코드에 데이터의 타입을 명시하는 주석을 추가하는 것이 핵심 작업입니다.

---

변수 및 상수:

변경 전 (JS): let count = 0;
변경 후 (TS): let count: number = 0; 또는 const name: string = "Alice";

---

함수 매개변수 및 반환 타입:

변경 전 (JS):
function add(a, b) {
  return a + b;
}

변경 후 (TS):
function add(a: number, b: number): number {
  return a + b;
}

---

객체의 속성 타입 (인터페이스 또는 타입 별칭 활용): 객체의 구조를 미리 정의하여 코드의 안정성을 높입니다.

변경 전 (JS):
const user = {
  id: 1,
  name: "Bob",
  age: 25
};

변경 후 (TS):
interface User {
  id: number;
  name: string;
  age: number;
  email?: string; // 선택적 속성 (있어도 되고 없어도 됨)
}
const user: User = {
  id: 1,
  name: "Bob",
  age: 25
};

---

배열 타입:

변경 전 (JS): const numbers = [1, 2, 3];
변경 후 (TS): const numbers: number[] = [1, 2, 3]; 또는 const names: Array<string> = ["Alice", "Bob"];

---

---

4. any 타입의 최소화

초기 전환 시에는 any 타입을 사용하여 타입 오류를 회피할 수 있지만, 이는 TypeScript의 장점을 상쇄시킵니다. 

점진적으로 any 타입을 구체적인 타입으로 대체하는 것을 목표로 해야 합니다.

변경 전 (JS): let data = fetchSomeData(); // 어떤 타입인지 알 수 없음

초기 전환 (TS, 임시): let data: any = fetchSomeData();

최종 (TS, 권장): let data: SomeSpecificType = fetchSomeData();

---

---

5. 외부 라이브러리 타입 정의 (.d.ts 파일) 설치

많은 인기 있는 JavaScript 라이브러리는 TypeScript 타입 정의를 제공합니다. 

이러한 타입 정의는 @types 스코프의 패키지로 npm을 통해 설치할 수 있습니다.

예: jQuery 라이브러리를 사용하는 경우

설치: npm install --save-dev @types/jquery

타입 정의가 없는 라이브러리의 경우, 직접 global.d.ts와 같은 파일을 생성하여 타입을 선언해야 할 수도 있습니다.

---

---

6. 점진적 전환 전략

모든 JavaScript 파일을 한 번에 TypeScript로 전환하는 것은 어려울 수 있습니다. 

다음 전략을 고려할 수 있습니다.

새로운 코드부터 TypeScript로 작성: 프로젝트 내에서 새로 개발하는 기능부터 TypeScript를 적용합니다.

핵심 로직부터 전환: 애플리케이션의 핵심 비즈니스 로직을 담당하는 파일부터 타입 안전성을 확보합니다.

테스트와 병행: 각 파일을 TypeScript로 전환할 때마다 관련 테스트를 실행하여 기능이 정상 작동하는지 확인합니다.

---

---

요약하자면, 기존 JavaScript 코드를 TypeScript로 변경하려면 파일 확장자 변경, tsconfig.json 설정, 그리고 코드에 타입 주석을 추가하는 작업이 필요합니다. 

이는 처음에는 번거롭게 느껴질 수 있으나, 장기적으로는 코드의 안정성, 가독성, 유지보수성을 크게 향상시키는 투자입니다.