JavaScript 프로젝트를 TypeScript로 변환하는 방법

JavaScript 프로젝트를 TypeScript로 변환하면 정적 유형 검사를 추가하여 코드 품질과 유지 관리성을 개선할 수 있습니다. 이 가이드는 기존 JavaScript 프로젝트를 TypeScript로 변환하는 단계별 프로세스를 제공합니다.

1단계: TypeScript 설치

TypeScript를 프로젝트에 추가하는 것으로 시작합니다. 이는 npm 또는 yarn을 사용하여 수행됩니다.

npm install typescript --save-dev

2단계: TypeScript 구성 파일 만들기

TypeScript를 구성하기 위해 tsconfig.json 파일을 만듭니다. 이 파일은 컴파일러 옵션과 컴파일에 포함할 파일을 지정합니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3단계: JavaScript 파일을 TypeScript로 이름 변경

JavaScript 파일의 이름을 .js에서 .ts로 변경합니다(또는 React를 사용하는 경우 .jsx에서 .tsx로 변경). 이렇게 하면 TypeScript가 이러한 파일을 처리할 수 있습니다.

JSX가 포함된 파일의 경우 .tsx로 이름을 바꾸세요.
TypeScript 코드만 있는 파일의 경우 이름을 .ts로 바꾸세요.

4단계: 유형 정의 추가

프로젝트에서 사용되는 타사 라이브러리에 대한 유형 정의를 추가합니다. 이는 npm에서 @types 패키지로 제공됩니다.

npm install @types/node @types/express --save-dev

5단계: TypeScript 오류 수정

TypeScript를 사용하여 프로젝트를 컴파일하고 오류나 유형 문제를 해결합니다. TypeScript는 유형 불일치 및 기타 문제에 대한 피드백을 제공합니다.

npx tsc

6단계: 빌드 스크립트 업데이트

package.json에서 빌드 스크립트를 업데이트하여 TypeScript를 사용합니다. 스크립트를 수정하여 TypeScript 컴파일을 포함합니다.

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js"
}

7단계: 애플리케이션 테스트

변환된 TypeScript 코드가 예상대로 작동하는지 확인하기 위해 테스트를 실행합니다. 변환 후 애플리케이션이 올바르게 작동하는지 확인합니다.

결론

JavaScript 프로젝트를 TypeScript로 변환하려면 TypeScript 설치, 컴파일러 구성, 파일 이름 변경, 유형 정의 추가, 오류 해결이 필요합니다. 이 프로세스는 TypeScript의 기능을 활용하여 더 나은 유형 안전성과 코드 유지 관리를 가능하게 합니다.

타입스크립트 변환 프로젝트 구성 파일 유형 타입스크립트-구성 유형-정의 오류 컴파일 빌드 스크립트 테스트 유지 관리