TypeScript 사용자 정의 선언 파일에 다른 형식 가져오는 방법
TypeScript로 작업하고 사용자 정의 선언 파일을 생성할 때, 외부 라이브러리에서 형식을 가져와야 할 때가 있습니다. 이 블로그 포스트에서는 코드 편집기에서 올바른 형식 검사와 인식을 위해 이러한 형식을 사용자 정의 선언 파일에 가져오는 방법을 살펴보겠습니다. 구체적으로, React 프로젝트에서 Enzyme 라이브러리의 형식을 가져오는 방법에 초점을 맞출 것입니다.
문제: 코드 편집기에서 사용자 정의 함수가 올바르게 인식되지 않음
문제에 대해 설명하며 시작해보겠습니다. TypeScript + React + Webpack + Jest + Enzyme 프로젝트에는 mountWithContext라는 사용자 정의 글로벌 함수가 포함되어 있는데, 이 함수는 테스트 스펙에서 접근 가능하며 테스트를 실행하는 동안 잘 작동합니다. 그러나 코드 편집기에서 이 함수를 인식하지 못하고 잘못된 제안과 오류 강조를 표시합니다.
이 문제를 해결하기 위해 프로젝트의 /typings 디렉토리에 declarations.d.ts라는 사용자 정의 선언 파일을 생성했습니다. 이 파일에서 다음과 같은 시그니처로 mountWithContext 함수를 선언했습니다:
declare function mountWithContext(node: any): any;이 선언은 해당 함수를 스펙 파일에서 인식할 수 있게하지만, 형식은 여전히 올바르지 않습니다. 이 함수는 React.ReactElement를 받아들이고 Enzyme의 ReactWrapper를 반환해야 합니다. 그러나 선언에 올바른 형식 주석을 직접 추가하는 것은 작동하지 않습니다.
해결책: 전역 형식 확장
올바른 형식을 가진 mountWithContext 함수를 올바르게 선언하기 위해 TypeScript에서 전역 형식을 확장해야 합니다. 다음은 그 방법입니다:
import React from 'react';
import enzyme from 'enzyme';
declare global {
namespace NodeJS {
interface Global {
mountWithContext<P, S>(node: React.ReactElement<any>): enzyme.ReactWrapper<P, S>;
}
}
}위의 코드를 분석하여 각 구성 요소를 이해해 보겠습니다:
declare global블록은 전역 컨텍스트 외부인 모듈과 같은 컨텍스트에서 전역 범위를 수정할 수 있도록 합니다.- 필요한 모듈인 React 및 enzyme를 가져와
mountWithContext함수를 올바르게 타입화합니다. declare global블록 안에서는 전역 형식에 액세스하기 위해namespace NodeJS를 사용합니다. 이 형식은 이미 Node 환경에서 제공됩니다.- 그런 다음
Global인터페이스를 확장하여 올바른 형식 주석이 있는 사용자 정의mountWithContext함수를 포함시킵니다.
이 해결책을 구현하면 코드 편집기가 올바른 형식으로 mountWithContext 함수를 인식합니다. 이로써 테스트를 작업할 때 정확한 제안과 오류 검사가 가능해집니다.
추가 사항
이 블로그 포스트에서는 TypeScript에서 사용자 정의 선언 파일에 외부 라이브러리의 형식을 가져오는 방법을 살펴보았습니다. 특히, React 프로젝트에서 Enzyme 라이브러리의 형식을 가져오는 방법에 초점을 맞췄습니다. 전역 형식을 확장함으로써 코드 편집기에서 사용자 정의 함수를 올바른 형식 주석과 함께 인식할 수 있습니다.
선언 파일을 올바른 위치에 배치하고 TypeScript 컴파일 컨텍스트에 포함시키는 것을 기억하세요. 이 방법을 따르면 TypeScript의 형식 검사를 활용하여 개발 워크플로를 개선할 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
