패키지의 타입 선언

TypeScript의 모듈 개념을 아래의 예시 코드와 함께 살펴보도록 하겠습니다.

 

 

 

예시 1

*본 예시는 lodash 패키지를 사용한 예시 코드입니다.

import _ from "lodash"; // 에러 발생

const str = "the brown fox jumps  over the  lazy dog";

console.log(_.camelCase(str));
console.log(_.snakeCase(str));

 

예시 1은 lodash 패키지를 import 한 후, camelCase와 snakeCase 메서드를 사용하고 있습니다. 패키지 설치를 완료했음에도 불구하고  import 부분에서 아래와 같은 오류가 발생합니다.

 

간략하게 살펴보면 모듈에 대한 선언 파일을 찾을 수 없다는 메시지를 담고 있습니다.

 

우선 짚고 넘어가야 할 부분은 lodash 패키지는 자바스크립트로 만들어져 있다는 것입니다. 타입스크립트에서 자바스크립트의 파일을 가지고 오게 되면 당연히 타입스크립트가 원하는 타입 지정이 되어 있지 않을 것입니다. 즉, 패키지에 대한 타입 선언이 필요한 것입니다.

 

 

아래의 과정을 거쳐 모듈에 대한 타입 에러를 해결할 수 있습니다.

 

 

위와 같이 lodash.d.ts 파일을 생성해 줍니다. 해당 파일을 모듈의 타입을 지정하기 위해 사용되기 때문에 저의 경우 파일 이름을 모듈의 이름으로 지정하여 조금 더 직관적이게 해 주었습니다. 파일명 뒤에 .d.ts를 붙여주며 이러한 과정을 dts 파일을 만든다라고 합니다.

 

*파일의 d는 declare(선언하다)의 약어로, 타입스크립트에서 선언이 들어있는 파일을 의미합니다. 때문에 해당 파일에는 구현에 관한 로직이 아닌 선언에 대한 로직만 작성됩니다.

 

 

declare module "lodash" {
  interface Lodash {
    camelCase: (str: string) => string;
    snakeCase: (str: string) => string;
  }

  const _: Lodash;
  export default _;
}

생성한 lodash dts 파일에 위와 같이 코드를 작성해 줍니다.

 

기존의 자바스크립트에서 패키지를 import 할 때 별도의 경로 없이 node_modules 폴더에서 가져오며, 가져오는 패키지는 하나의 모듈인데 import 한 모듈을 사용할 때 타입을 선언하겠다는 의미로 declare 키워드를 앞에 붙이고 있습니다.

 

즉, declare를 사용하여 타입을 선언할 것이고, 선언하려고 하는 모듈은 lodash임을 의미합니다.

 

중괄호 안에서는 인터페이스 Lodash가 만들어져 있으며, 인터페이스 Lodash 내부에는 사용하고자 하는 메서드의 타입을 명시해주고 있습니다. 메서드는 하나의 함수이기 때문에 함수 타입(매개 변수, 반환하는 값의 타입 명시)으로 명시하고 있습니다.

 

*사용하고 있는 camelCase와 snakeCase 메서드는 문자 타입의 데이터를 인수로 전달받아 문자 타입의 데이터를 반환하는 메서드이기 때문에 타입 명시를 위와 같이 해주었습니다.

 

import _ from "lodash"; // lodash를 _에 할당하여 사용

 lodash를 _에 할당하여 사용하고 있기 때문에 변수 _를 생성하고 인터페이스를 사용하여 타입을 명시해주고 내보내기 하면 타입 에러는 사라지게 됩니다.

 

 

console.log(_.camelCase(str));
console.log(_.snakeCase(str));
console.log(_.kebabCase(str)); // 타입 에러 발생

모듈의 타입을 dts 파일에 명시해주게 되면 파일에 추가한 메서드는 사용 가능하지만 kebabCase 메서드의 경우 dts 파일에 명시되어 있지 않기 때문에 타입 에러가 발생하게 됩니다.

 

*dts 파일 생성 시 파일의 이름을 원하는 것으로 정해서 사용해도 상관은 없지만, 위와 같이 패키지에 타입 에러가 발생하게 됩니다. 이는 패키지의 이름이 lodash니까 lodash와 관련된 dts파일을 찾게 되는데 파일 이름이 lodash인 dts 파일이 없기 때문에 자동으로 연결되지 않습니다.

 

 

/// <reference path="./main.d.ts" />
import _ from "lodash";

이렇게 패키지의 이름과 dts의 파일명을 일치시켜주지 않으면 위와 같이 dts파일과 수동으로 연결해주어야 합니다.

 

/// (슬래시 3개) 뒤에 reference 태그를 작성해주고 path 속성에 경로를 작성해주면 dts파일과 수동으로 연결이 됩니다. 이렇게 슬래시 3개를 사용하는 것을 삼중 슬래시 지시자(Triple-slash directive)라고 하며, reference 태그를 참조 태그라고 합니다.

 

 

 

모듈, 즉 사용하려는 패키지의 타입을 설정하는 기본적인 방법에 대해 정리를 했는데, 이러한 방식으로 매번 사용하는 패키지가 생길 때마다 또는 패키지에서 사용하는 메서드가 추가될 때마다 작성하기에는 어려움이 있습니다.

 

GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.

해당 깃허브 링크에서는 전 세계 개발자들의 자바스크립트 기능에 대한 타입을 직접 선언하고 기여하고 있습니다. 물론 최신으로 나오는 자바스크립트의 기능은 타입스크립트로 만들어 변환을 시켜놓거나 타입 선언을 내장하고 있는 경우가 대부분이지만 타입스크립트 이전의 기능은 DefinitelyTyped에서 선언된 타입을 사용할 수 있습니다.

 

 

 

사용법

 

npm info --save-dev @types/node     //  info를 사용하면 패키지가 존재하는지 확인할 수 있습니다.

npm install --save-dev @types/node

DefinitelyTyped을 개발 의존성으로 추가해 줍니다. 이때 @types/node에서 사용하고 싶은 패키지 명을 적어 줍니다. 저의 경우 @types/lodash를 입력하여 개발 의존성을 추가해 주었습니다.

 

*DefinitelyTyped에 입력하는 패키지가 있는 경우 읽어와서 사용합니다.

 

import _ from "lodash";

const str = "the brown fox jumps  over the  lazy dog";

console.log(_.camelCase(str));
console.log(_.snakeCase(str));

이렇게 DefinitelyTyped에서 사용 패키지에 대해 선언된 타입을 개발 의존성으로 추가해주게 되면 별도의 dts 파일 생성 없이 타입스크립트이서 패키지 사용이 가능합니다.

 

추가한 패키지의 DefinitelyTyped는 node_modules의 @types에 들어가게 추가됩니다.