[React] [Typescript를 지원하지 않는 NPM Module 사용하기] or [NPM Module 타입 선언 파일(.d.ts)을 커스텀 대체하기]

Typescript를 지원하지 않는 NPM Module, NPM Module 타입 선언 파일(.d.ts)을 커스텀 대체하기

 

타입스크립트를 사용중인데 Npm Module이 타입스크립트를 지원하지 않아 Module을 사용할 수 없는 경우가 간혹 있는데 이 경우 아래와 같이 진행하여 해결하였으니 예시를 참고바랍니다..

※ d.ts파일이란?

타입스크립트 선언 파일 d.ts 는 타입스크립트 코드의 타입 추론을 돕는 파일입니다.

예를 들어, 전역 변수로 선언한 변수를 특정 파일에서 import 구문 없이 사용하는 경우 해당 변수를 인식하지 못합니다.

 

예시)

npm install reactjs-tag-input라는 패키지를 설치하였으나, 이 패키지는 Typescript를 지원하지 않는다.

reactjs-tag-input.d.ts 라는 파일을 새로 생성하여, 해당 코드를 입력하면 TagInput를 함수형 컴포넌트로 사용할 수 있다.

(d.ts 경로는 원하시는곳 아무대나)

파일명은 다음과 같이 지었다 reactjs-tag-input.d.ts

interface ITagInputProps {
    tags: any[];
    onTagsChanged: any;
    wrapperStyle?: any;
    inputStyle?: any;
    tagStyle?: any;
    placeholder?: any;
}

declare module 'reactjs-tag-input' {
    const TagInput : React.FC<ITagInputProps>;
}

d.ts파일을 위와같이 작성하고 재정의할 파일을 생성한다.

재정의 파일명은 다음과 같이 지었다. TagInputComponent.tsx

//https://github.com/leekevinyg/react-tag-input
import * as React from 'react';
import { TagInput } from "reactjs-tag-input";

//입력 시 태그를 추가할지 여부를 제어 기본값 false
//addTagOnEnterKeyPress={false}

const wrapperStyles  = { position: 'inherit', transform: 'none', background: '#e1f5f2', margin: '20px', boxShadow:'none'  };

export default function TagInputComponent(props: ITagInputProps) {

    return (
      <TagInput 
        tags={props.tags} 
        onTagsChanged={props.onTagsChanged}
        placeholder="Search the Data."
        wrapperStyle={wrapperStyles} />
    );
  }
  

실 사용 코드는 위와 같이 작성하나, 이 패키지의 경우 꼭 필요로하는 기본값들과 이미 적용된 기본 스타일 값이 있기에 나에게 알맞는 방식으로 새롭게 정의해준다.

다 정의가 되었다면 내가 원하는 곳에 컴포넌트를 불러와 사용해본다.

import TagInput from "경로../controls/TagInput/TagInputComponent";

 

※ 참고할만한 URL

Typescript의 모듈 시스템 - https://velog.io/@kmp1007s/Typescript-모듈과-관련된-이야기