TypeScript 모듈 증강 및 중첩 JavaScript 파일 처리

TypeScript는 JavaScript 생태계에 10년 넘게 소중한 추가 사항으로 자리 잡아 왔으며, JavaScript 코드에 타입 안전성을 제공하는 능력 덕분에 인기를 끌고 있습니다.

JavaScript 패키지에 대한 타입#

하위 호환성과 유연성을 위해, TypeScript는 패키지 제작자가 자신들의 JavaScript 패키지에 대한 타입 정의를 제공할 수 있도록 허용합니다. 이러한 타입 정의는 일반적으로 "DefinitelyTyped" 리포지토리에 저장됩니다. 예를 들어, @types/react는 React 패키지에 대한 타입 정의입니다. 이러한 타입 정의는 @types 범위를 사용해 설치할 수 있습니다.

타입 정의를 설치한 후에는 타입 안전성을 신뢰하며 패키지를 사용할 수 있습니다. 타입 안전성을 가진 React 컴포넌트를 정의하는 예시는 다음과 같습니다:

모듈 증강#

대부분의 인기 있는 JavaScript 패키지들은 @types 범위에서 쉽게 구할 수 있는 타입 정의가 있지만, 일부 패키지에는 타입 정의가 없거나 오래된 것을 사용할 수도 있습니다. 이러한 경우 TypeScript는 "모듈 증강"이라는 강력한 기능을 제공하여 이러한 패키지에 대해 타입 정의를 추가할 수 있습니다. 예를 살펴보겠습니다:

이제 증강된 타입 정의를 코드에서 사용할 수 있습니다:

모듈 증강을 사용하면 패키지에 대한 타입 정의를 추가할 수 있을 뿐만 아니라 기존 타입 정의를 확장할 수도 있습니다. 예를 들어, window 객체에 새로운 속성을 추가할 수 있습니다:

이제 코드에서 사용할 수 있습니다:

이전 게시물에서는 React Router 라이브러리에서의 타입 문제에 대해 이야기했으며, 커스텀 선언 파일을 통해 기존 타입을 확장하고 증강하여 영향을 극복해야 했습니다.

모듈 증강을 사용할 때는 JavaScript 소스 코드를 면밀히 조사하여 정확한 타입 정의를 보장하는 것이 중요합니다. 잘못된 타입 정의는 런타임 오류로 이어질 수 있습니다. 위 예시에서 window.foo 속성은 window 객체에 존재하는 문자열이어야 합니다.

글로벌 증강#

때로는 전역 변수를 도입하는 스크립트를 마주하게 되는데, 이러한 전역 변수에 타입 정의를 추가하여 TypeScript 코드에서 사용할 수 있습니다. 예를 들어, __DEV__라는 전역 변수를 설정하는 스크립트가 있는 경우:

이 전역 변수에 대한 타입 정의를 다음과 같이 추가할 수 있습니다:

이제 TypeScript 코드에서 사용할 수 있습니다:

모듈 증강과 글로벌 증강을 결합하면 JavaScript 프로토타입에 대한 타입 정의도 확장할 수 있습니다. 그러나 이는 일반적으로 글로벌 범위를 오염시킬 수 있으므로 권장되지 않습니다.

모듈 증강의 힘으로 이러한 확장이 가능하지만, 글로벌 범위 오염을 방지하기 위해 주의해야 합니다.

중첩 JavaScript 파일#

앞서 언급한 예시들에서는 패키지의 엔트리 파일을 통해 임포트를 해결할 수 있다고 가정했습니다. 그러나 일부 패키지는 해당하는 타입 정의 없이 중첩된 JavaScript 파일을 내보냅니다. foo라는 패키지가 다음과 같은 구조를 가지고 있다고 가정해봅시다:

foo 패키지는 엔트리 포인트로 index.js 파일을 내보내며, bar 디렉토리 또한 내보냅니다.

foo 패키지의 타입 정의를 증강하려면, foo.d.ts 파일을 생성할 수 있습니다:

그러나 baz.js 파일을 TypeScript에서 임포트하려고 하면 오류가 발생합니다:

baz.js 파일에 대한 타입 정의를 증강하려면, 별도의 baz.d.ts 파일을 생성해야 합니다:

이를 통해 TypeScript가 모듈과 관련된 타입 정의를 찾을 수 있게 됩니다:

조직된 타입 정의를 유지하기 위해, 패키지의 구조를 타입 정의 파일에서 그대로 따라 할 수 있습니다:

이 방식은 중첩된 JavaScript 파일을 다루면서도 TypeScript 코드를 구조화하고 타입 안전성을 유지하는 데 도움이 됩니다.