타입스크립트 모듈 정의 파일 만들기

자바스크립트 Javascript로 작성되어 노드node로 동작하는 웹 응용프로그램을 타입스크립트 Typescript로 재작성하고 있습니다.

npm 패키지 중 모듈 정의가 없는 패키지가 있습니다.

타입스크립트 코드를 작성할 때, 정상적으로 사용할 수가 없습니다.

이 때, 패키지 제작자에게 모듈 정의 파일을 요청하거나, 작성중인 프로젝트에 모듈 정의 파일 .d.ts 파일을 작성해서 문제를 해결할 수 있습니다.

예제

예를 들어 showdown-xss-filter 패키지를 사용중인 코드가 있습니다.

const xssFilter = require('showdown-xss-filter');

타입스크립트로 작성중인 코드에서 모듈의 정의를 찾을 수 없다고 합니다.

import xssFilter from 'showdown-xss-filter';

에러 메시지:

Could not find a declaration file for module ‘showdown-xss-filter’. ‘d:/repos/blog-node-backend/node_modules/showdown-xss-filter/showdown-xss-filter.js’ implicitly has an ‘any’ type.\n Try npm install @types/showdown-xss-filter if it exists or add a new declaration (.d.ts) file containing `declare module ‘showdown-xss-filter’;

타입스크립트 컴파일러의 제안을 참고해서 @types/showdown-xss-filter 패키지는 검색해도 결과가 없습니다.

첫번째 제안으로 해결되지 않으니, 두번째로 제안하는 declare module 'showdown-xss-filter' 코드를 포함하는 새 정의 파일을 만들어야 합니다.

함수의 모양을 확인하기 위해 코드를 보니, showdown-xss-filter 패키지의 내용은 매우 간략한 코드로 작성되어 있습니다.

필요한 것은 xssfilter 함수의 정의 식별자 Identifier, 인수들 Arguments, 반환형 Return type 입니다.

코드를 확인하고, 아래와 같이 모듈을 정의할 수 있습니다.

다행히 showdonw은 모듈 정의가 존재합니다. ❤

$ npm install --save-dev @types/showdown

// @types/showdown-xss-filter.d.ts
declare module 'showdown-xss-filter' {
    import Showdown from 'showdown';


    function xssFilter(
        converter?: Showdown.Converter,
    ): Showdown.ShowdownExtension[];

    export default xssFilter;
}

작성한 showdown-xss-filter.d.ts 파일을 typeRoots 로 지정된 디렉터리에 저장합니다.

타입스크립트 프로젝트 tsconfig.json 파일에서 typeRoots 속성을 사용하지 않으면 rootDir 로 지정한 디렉터리에 @types 디렉터리를 만들고 그 안에 저장하면 됩니다.