[typescript] 자바스크립트 프로젝트에서 타입스크립트로의 변환을 위한 리팩토링

15 Dec 2023

typescript

많은 개발자들이 자바스크립트 프로젝트에서 타입스크립트로의 전환을 고려하고 있습니다. 이에 따라 코드베이스를 타입스크립트로 변환하기 위한 리팩토링은 매우 중요합니다. 이 글에서는 자바스크립트 프로젝트를 타입스크립트로 변환하기 위한 리팩토링 방법을 살펴보겠습니다.

1. 타입스크립트의 장점

타입스크립트는 자바스크립트에 정적 타입을 추가하는 언어입니다. 정적 타입은 변수가 어떤 종류의 데이터를 포함하는지를 명확하게 지정하는 기능을 제공합니다. 이로써 런타임 에러를 사전에 방지할 수 있고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

2. 필요한 도구 설치

타입스크립트로의 전환을 위해 먼저 필요한 도구를 설치해야 합니다. npm을 이용하여 타입스크립트와 타입 정의 파일을 설치할 수 있습니다.

npm install typescript @types/node

위 명령어를 실행하여 타입스크립트 컴파일러와 타입 정의 파일을 설치합니다.

3. 타입스크립트 파일 생성

기존의 자바스크립트 파일을 타입스크립트 파일로 변환하기 위해 확장자를 .ts로 변경합니다. 이후 기존의 코드를 검토하여 타입 에러가 발생하는 부분을 수정할 필요가 있습니다.

// example.ts
function greet(name: string) {
  return 'Hello, ' + name;
}
let user = 'Developer';
console.log(greet(user));

위 예제에서 greet 함수에 name 매개변수의 타입을 명확히 지정했습니다. 이렇게 타입 정보를 추가하면 코드의 안정성이 향상됩니다.

4. 타입 정의 추가

기존의 자바스크립트 코드에는 타입 정보가 부족한 경우가 많습니다. 이를 보완하기 위해 타입 정의 파일을 작성하여 기존 라이브러리나 외부 패키지의 타입 정보를 명시할 수 있습니다.

// example.d.ts
declare module 'your-library' {
  export function yourFunction(param: string): number;
}

위 예제에서는 외부 라이브러리의 타입 정보를 정의한 파일입니다. 이를 통해 타입스크립트에서 외부 라이브러리를 사용할 때 타입 정보를 활용할 수 있습니다.

5. 엄격한 타입 검사 설정

타입스크립트는 엄격한 타입 검사를 통해 코드의 안정성을 높일 수 있습니다. tsconfig.json 파일을 이용하여 엄격한 타입 검사를 설정할 수 있습니다.

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    // 기타 옵션 ...
  }
}

위 예제에서는 strict 옵션을 통해 엄격한 타입 검사를 활성화하고 있습니다.

자바스크립트 프로젝트를 타입스크립트로 변환하는 과정은 몇 가지 중요한 단계를 거칩니다. 이 글에서는 기존의 코드베이스를 타입스크립트로 변환하기 위한 리팩토링 방법에 대해 알아보았습니다.

참고 자료

타입스크립트 핸드북

목차