사용하려는 npm 패키지가 타입스크립트를 지원하지 않을때 사용 가능하도록 하기 (index.d.ts)

타입스크립트 프로젝트 내에 텍스트를 둥글게 만들어주는 "circletype" 라는 패키지를 사용하려는데, 이 패키지는 타입스크립트를 지원하지 않아 그냥 사용시 오류가 발생한다.

 

참고로 circletype 라는 패키지는 텍스트 문자열를 아래와 같이 둥글게 만들어 주는 패키지이다.

관련 링크 : https://circletype.labwire.ca/

 

 

타입스크립트를 지원하지 않는 패키지를 그대로 사용시 아래와 같이 오류가 발생한다.

 

위 문제를 제대로 해결하려면 해당 패키지의 타입을 제대로 정의하고 사용해야 하겠지만, 임시로 일단 사용 가능하도록 하려면 아래와 같이 진행한다.

 

1. tsconfig.json 파일중 아래 (typeRoots) 항목을 추가 하고 저장

* 아래 내용 중 typeRoots 설정은 원래 없으며, 기본적으로 ./node_modules/@types 가 타입정의 디렉토리로 설정되어 있다.
여기에 ./types 경로도 타입정의 디렉토리로 사용하기 위해 typeRoots 항목을 추가한다. 
(항목 추가시 아래와 같이 기존경로, 새 경로 두 경로를 모두 입력)

 

{
    "compilerOptions": {
        .
        .        
        "typeRoots": ["./types", "./node_modules/@types"]

    },
    "include": ["./src/"]
}

 

 

2. 위에서 types 경로도 타입정의 경로로 사용하도록 했으므로, 프로젝트 루트에 types 디렉토리를 생성하고, 그 하위에 패키지명으로 디렉토리를 만들고, 그 하위에 index.d.ts 파일을 생성한다.

 

파일 내에는 아래 내용을 넣고 저장한다.

declare module 'circletype';

 

 

3. 아래 예제코드와 같이 일반 ts패키지처럼 사용한다. (단, 해당 패키지는 type 지원 안됨)

import CircleType from 'circletype';
.
.
const setDesign = (r: number = 100) => {
	const textPara = document.querySelector('p');
	if (!textPara) return;
	const circleType = new CircleType(textPara);
	circleType.radius(r);
};
.
.

---

추가사항 : 위의 과정 없이 단순히 아래와 같이 해도 됨
(단, 아래와 같이 하면 직접 node_modules 내 패키지를 수정하는것이므로 깃에 올린 후 다른곳에서 소스를 내려받아 사용하는경우 install 후 일일히 수정해 줘야 한다.

 

node_modules/@types/circletype/index.d.ts 파일 생성후 아래 내용 넣고 저장

export = CircleType;

 

이후 동일하게 사용하면 된다.

 

 

끝.