타입스크립트 : 모듈 확장(module augmentation)으로 서드파티 관련 타입 문제 해결하기

module augmentation

원문 보기

Solve any external library error in TypeScript with module augmentation

이 TypeScript 튜토리얼은 모듈 확장을 사용하여 외부 라이브러리로 작업할 때 발생할 수 있는 타입 오류를 해결하는 방법을 다룹니다.

모듈 확장을 사용하여 다른 방법으로는 액세스할 수 없는 모듈을 조정하십시오.

 

 

TypeScript의 선언 병합(Declaration merging) 기능

모듈 확장에 대해 알아보기 전에,
TypeScript에서 선언 병합이 모듈 확장과 동일한 기본 원칙을 따르기 때문에
먼저 선언 병합이 어떻게 작동하는지 간략하게 살펴보겠습니다.

 

TypeScript는 선언 병합을 사용하여 여러 동일한 이름을 가진 타입을 가진 단일 병합 선언으로 결합합니다.

 

TypeScript를 사용하여 서로 인터페이스, 열거형과 열거형, 네임스페이스와 네임스페이스 등과 같은 다양한 타입을 결합할 수 있습니다. 예외는 클래 병합입니다. 클래스 병합은 허용하지 않습니다.

 

간단하게 예제를 봅시다.

위의 코드는 make 속성이 있는 Car 클래스와 type 속성이 있는 Car 인터페이스를 정의합니다.

그런 다음 Car의 인스턴스를 만들고 myCar 상수에 할당합니다. 결과적으로 myCar에는 make 및 type 속성이 모두 포함됩니다.

 

이제 인터페이스에 메서드 선언을 추가하려고 하면 어떻게 될까요?

보시다시피, 드라이브 메소드의 실제 구현이 없기 때문에 오류가 발생합니다. 그러나 Car 프로토타입을 사용하여 추가할 수 있습니다.

왜 프로토타입을 쓰죠? "같은 이름의 클래스를 만들어 초기화하지 않는 이유는 무엇입니까?"라고 생각할 수 있습니다.

그러나 TypeScript는 일반적으로 클래스 병합을 허용하지 않습니다.

믹스인 으로 구현할 수 있는 해결 방법이 있지만 이는 이 게시물의 범위를 벗어납니다.

(주 : 믹스인은 클래스에 기능을 주입하기 위해, 다중 상속처럼 사용하는 기능)

 

이제 Car 인스턴스의 메서드에서 drive를 호출하면 동작합니다.

클래스와 인터페이스를 성공적으로 병합했습니다!

Module augmentation

이제 TypeScript에서 선언 병합이 작동하는 방식을 알았으므로,

모듈 확장이 외부 모듈을 확장하는 데 어떻게 도움이 되는지 살펴보겠습니다. 보강하려는 모듈을 가져오고 사용자 지정 기능으로 확장한 다음 내보내는 새 모듈을 만들어 이를 수행합니다.

다른 예를 살펴보겠습니다. 먼저 car.ts 모듈을 생성합니다.

car.ts

이제 car.ts를 확장할 Augmented.ts 모듈을 생성해 보겠습니다.

Augmented.ts

위의 코드는 확장하려는 TypeScript 파일을 가져오고 클래스와 동일한 이름으로 인터페이스를 만듭니다. (Car)

우리는 fly 메소드를 추가하는 새로운 공용 인터페이스를 선언합니다.

이것을 추가하면 이제 TypeScript 인스턴스에서 fly를 호출할 수 있습니다.

 

위의 코드는 TypeScript 클래스를 확장한 후 내보냅니다. 이제 Car 인스턴스에서 우리가 확장한 비행 메소드를 사용할 수 있습니다!

참고: default 내보내기는 확장할 수 없으며 오직 named 내보내기만 확장할 수 있습니다.
그 이유는 내보낸 이름으로 내보내기를 보강해야 하고 default는 예약어이기 때문입니다.

 

글로벌 기능 확장을 사용하여 서드파티 모듈 확장

이제 글로벌 모듈 확장을 사용하여 서드파티 모듈을 확장하는 방법을 살펴보겠습니다.

전역 확장 기술은 이전에 다룬 모듈 증강과 유사하며 다음과 같이 작동합니다.

• 확장하려는 TypeScript 모듈의 이름 확인
• 해당 d.ts 파일 생성
• 모듈 확장

커스텀 타입으로 react-beatiful-dnd 라이브러리를 확장해 보겠습니다.

먼저 react-beautiful-dnd.d.ts 파일을 만들고 다음 코드를 추가합니다.

react-beautiful-dnd.d.ts

위의 코드에서 react-beautiful-dnd의 Draggable 컴포넌트에 대한 타입 선언을 추가했습니다.

이게 끝입니다! 이제 다음과 같이 앱에서 타입을 사용할 수 있습니다.

TypeScript가 자동으로 선택하는 d.ts 파일을 사용하고 있기 때문에 평소와 같은 방식으로 라이브러리를 계속 가져올 수 있습니다.