[Typescript] Declaration Files (.d.ts)

.d.ts 파일이란?

타입스크립트가 타입을 추론할 수 있도록 .d.ts파일에 Type을 선언 할 수 있습니다. 여러가지 사용 목적 중에서 대표적인 2가지를 소개하자면 다음과 같습니다.

사용목적1: 구현부분과 선언부분의 분리

클래스, 함수의 Type 선언부분은 .d.ts파일에 정의해두고, 구현부분은 별도의 .ts 파일에 분리하여 작성할 수 있습니다. 이러한 작성방법은 C언어의 헤더파일(.h 파일)의 사용방법과 유사하다고 볼 수 있습니다. 구현부분과 선언부분을 깔끔하게 분리하여 코드를 작성할 수 있는 것이죠.

사용목적2: 레거시 자바스크립트의 타입추론

오랜 전에 작성된 자바스크립트 라이브러리를 타입스크립트에서 사용하기 위해 .d.ts를 사용하기도 합니다. 오래된 자바스크립트 라이브러리를 타입스크립트에서 사용하려면 두 가지 방법이 있습니다. 첫번째는 완전히 타입스크립트 코드로 재작성하는 것입니다. 하지만 이 방법은 상당한 시간을 요구 합니다. 두번째는 자바스크립트 라이브러리의 함수, 클래스, 인터페이스의 타입 정보만 .d.ts 파일에 작성하는 것입니다. 타입스크립트는 .d.ts의 정보를 바탕으로 자바스크립트 라이브러리의 타입을 추론할 수 있게 되어, 마치 타입스크립트 모듈인 것 처럼 사용할 수 있게 해줍니다.

.d.ts 파일 사용방법

여기서는 타입스크립트 모듈을 .d.ts와 .ts 파일로 분리하여 작성하는 예제를 간단하게 설명합니다.

(1) .d.ts 파일 추가

.d.ts파일의 이름과 경로는 원하는 대로 선택 할 수 있습니다. 다만 관습적으로 .d.ts 파일의 이름은 작성하는 모듈의 이름과 일치시키고, 파일의 위치는 @types와 같은 폴더 아래에 위치시킵니다.

/* @types/Membership.d.ts 파일 */

//모듈이름 선언 (.d.ts파일을 구현하는 모듈 이름과 일치시킴)
declare module 'Membership';

//함수 Type 선언
declare function UserAdd(name: string, email: string): UserDTO;

//Object Type 선언
type UserDTO = {
    name: string;
    email: string;
}

(2) 구현부분 코드 작성

코드에서 /// <reference path="..." /> 부분은 컴파일러 지시자(Compilier Directive)라고 합니다. 컴파일을 진행할 때 컴파일러에게 대상 파일을 포함하도록 명령하는 코드입니다. 컴파일러 지시자는 파일의 최상단에 위치해야합니다. 참조하는 .d.ts 파일을 타입스크립트 컴파일러에게 명시적으로 알려주고자 할 때 사용할 수 있습니다.

/* Membership.ts 파일 */

/// <reference path="./@types/Membership.d.ts" />

//함수 구현
function UserAdd(name: string, email: string) {
    const user: UserDTO = { name, email }; //Type 사용

    ...

    return user;
}

.d.ts에 과한 자료

• 타입스크립트 핸드북 (.d.ts 파일): https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html(영문)
• Ambient Declarations : https://basarat.gitbook.io/typescript/type-system/intro
• Triple-Slash Directives : https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html