[typescript] 자바스크립트 코드를 타입스크립트로 변환하면서 발생할 수 있는 오류

15 Dec 2023

많은 개발자들이 현재 자바스크립트 코드를 타입스크립트로 변환하는 작업을 수행하고 있습니다. 타입스크립트로의 변환이 불가피한 상황일수록 몇 가지 주의해야 할 점이 있습니다. 이러한 변환 작업 시 자주 발생할 수 있는 오류를 관리하는 방법에 대해 알아봅시다.

1. Any 타입으로의 간단한 변환

타입스크립트에서 모든 값이 암시적으로 any 타입으로 간주되도록 하기 때문에, 자바스크립트 코드를 그대로 타입스크립트로 변환하면 모든 변수가 any 타입이 될 수 있습니다.

예시:

// JavaScript 코드
function add(a, b) {
  return a + b;
}

변환 후:

// TypeScript 변환 코드
function add(a: any, b: any) {
  return a + b;
}

이렇게 되면 타입스크립트의 강력한 타입 검사 기능을 포기하는 것과 마찬가지입니다.

그 대신, 가능한 한 명시적으로 타입을 선언하여 암시적 any 사용을 지양하세요.

예시:

// JavaScript 코드
function add(a, b) {
  return a + b;
}

개선된 타입스크립트 코드:

function add(a: number, b: number): number {
  return a + b;
}

이렇게 하면 타입스크립트가 변수 유형을 훨씬 더 명확하게 이해합니다.

자바스크립트 코드에서 외부 라이브러리를 사용하는 경우, 해당 라이브러리의 타입 정의 파일을 설치한 후 import나 require를 사용하여 타입을 가져와야 합니다.

예시:

// 외부 라이브러리의 타입 가져오기
import * as fs from 'fs';

또는

// 외부 라이브러리의 타입 가져오기
const fs = require('fs') as typeof import('fs');

타입 정의를 가져오지 않으면 해당 모듈의 타입이 any로 추론되어 타입 안정성을 잃을 수 있습니다.

타입스크립트로 변환한 후에는 에러를 확인하고 타입 안정성을 보장하기 위해 타입 검사를 수행하세요.

예시:

// 타입스크립트 코드에 에러가 있는지 확인

마지막으로, 자바스크립트 코드로부터 타입스크립트로의 변환 시 타입 강제 변환이 필요할 수 있으므로 주의해야 합니다.

예시:

// 타입 강제 변환
const a = '123' as number;

자바스크립트 코드를 타입스크립트로 변환하는 작업은 지속적인 학습과 주의가 필요하지만, 올바르게 수행한다면 타입 안정성을 향상시키고 코드 유지보수를 더욱 용이하게 할 수 있습니다.

자바스크립트 코드를 타입스크립트로 변환하는 작업은 타입스크립트 공식 문서에서 더 많은 정보를 얻을 수 있습니다.