타입스크립트 d.ts 파일 이용해보기

d.ts 파일이란?

• 일명 정의 (definition) 파일 이라고 불린다.
• 자바스크립트에서 다른 라이브러리에 있는 함수를 사용한다고 가정하면, 처음에는 아무런 도움을 받을 수 없다.
• 어떤 파라미터를 넣어야 할지, 어떤 결과 값이 나오는지 알 수 없고 공식문서를 꼼꼼히 읽으며 찾아봐야 한다.
  • 그러나 요즘 만들어진 라이브러리는 다운만 받아도 IDE 에서 어떤 파라미터를 넣어야 하는지 자동완성 되는 경우가 흔하다.
  • 누군가 매우 고생해서 해당 라이브러리에 쓰일 타입 정의 파일인 d.ts 파일을 전부 작성해놓았기 때문이다.
  • 인자의 타입 반환 타입 등을 다 넣어놓은 파일이다.
• d.ts 파일이 있으면 코드 자동완성을 통해 생산성 높은 작업을 할 수 있다.

예시 (notifee 라이브러리) 스크린샷

• 위는 notifee 라는 알람 라이브러리에서 제공하는 메서드인데, IDE 에서 인자로 무엇을 주어야 할지, 반환값은 무엇이 나오는지 알려주고 있다.
• 이는 IDE 가 자동으로 작성한 것이 아니라, 라이브러리 제작자가 힘들게 d.ts 파일을 작성한 결과이다.

위는 Module.d.ts 파일인데, 실제로 위의 설명이 들어있는 파일이다.

예시 d.ts 만들며 이해해보기

• example_module.js 파일을 생성하고, 이 모듈에 맞는 d.ts 를 작성해보며 이 구조가 어떻게 이뤄지는지 살펴보자.

example_module.js 파일 만들어보기

• 아무 디렉토리 밑이나 npm init -y 명령어로 대충 노드 프로젝트를 시작하자.
• example_module.js 파일을 만든 뒤 내용은 아래와 같이 작성해보자.

export function init(config) {
  return config.source;
}

export function plus(a, b) {
  return a + b;
}

tsconfig.json strict 모드 활성화하기

• 동일 디렉터리에서 npm install -g typescript 로 타입스크립트를 설치하자.
• tsc --init 명령어를 치면, 자동으로 tsconfig.json 파일이 생성된다.
• 파일의 내용을 아래와 같이 변경해주자.

{
  "include": [
    "src/**/*"
  ],
  "compilerOptions": {
    "outDir": "build",
    "target": "ES5",
    "lib": ["ES6", "DOM"],
    "strict": true
  }
}

"strict": true 를 활성화하면 타입스크립트 파일에서는 타입이 없는 모든 것에 대해 에러를 내기 시작한다.

index.ts 파일 만들어보기

import { init } from "./example_module.js";

init();

위와 같이 example_module.js 에서 init 함수를 하나 불러오는데도 에러를 낸다. 에러의 이유는 d.ts 라는 타입 정의 파일을 발견하지 못했기 때문이다.

example_module.d.ts 파일 생성하기

interface Config {
  source: string;
}

export function init(config: Config): string;

위와 같이 타입 정의 d.ts 파일을 만들어놓으면 index.ts 의 에러는 멈추게 된다.

이 뿐만 아니라, 위와 같이 VSCODE 의 자동완성 힌트까지 갖게 된다.

이처럼 d.ts 파일은 단순히 call signature 를 export 하여 어떠한 타입의 함수, 변수 등이 존재하는지를 알려줄 수 있다.

declare module 을 이용해보기

example_module.d.ts 의 내용을 조금 변경해보자.

interface Config {
  source: string;
}

declare module "example_module" {
  function init(config: Config): string;
}

위와 같이 내용을 변경하면, index.ts 에서는 또 빨간줄이 뜰 것이다.

index.ts 내용 변경하기

import { init } from "example_module";

console.log(
  init({
    source: "hello",
  })
);

위와 같이 from "example_module" 로 모듈을 가져오는 원천을 바꾸면 더이상 빨간줄이 뜨지 않는다. 그 이유는 declare module 에 있는 이름을 그대로 가져오기 때문이다. declare module "eexample_module" 과 같이 토씨 하나라도 틀리면 다시 에러가 뜬다.