.d.ts

.d.ts란?

• TypeScript의 타입 정의 파일
• 파일명.d.ts로 파일을 생성

type.d.ts

export type Km = number;
export interface Human {
  name: string;
  age: number;
}

index.ts

import { Km, Human } from "./type";

let val: Km = 100;
let myInfo: Human = {
  name: "JJamVa",
  age: 20,
};

note

.d.ts파일은 위의 정의와 같이 한곳에 타입을 저장해두기 위해 사용된다.
.d.ts의 파일이 아닌 타입스크립트 파일(.ts 혹은 .tsx)는 타입을 선언을 하면, 글로벌 모듈로 사용이 가능하다.

A.ts

type Num = number;

B.ts

let a: Num = 10;

위의 코드와 같이 별개의 파일이여도 사용이 된다.
하지만 .d.ts파일은 기본 설정은 로컬 모듈이다.

.d.ts파일을 글로벌 모듈로 설정하는 방법

• tsconfig.json을 통해 .d.ts파일을 글로벌 모듈로 설정이 가능

{
    "compilerOptions":{
        ...
        "typeRoots": ["타입 선언 파일이 위치한 경로"],
    }
}

• 타입별로 declare 키워드를 선언

type.d.ts

declare type Km = number;
declare interface Human {
  name: string;
  age: number;
}

파일을 한 곳에 관리하기 때문에, 유지보수 및 재사용성 측면에서도 좋다는 장점이 있다.

danger

.d.ts파일을 import의 경로 작성 시, 파일 확장자 .d.ts를 빼고 작성해야된다.

자동 .d.ts파일 생성 설정

• tsconfig.json을 통해 ts 혹은 tsx에 타입과 같이 생성한 변수를 자동으로 .d.ts파일에 저장

tsconfig.json 설정

{
    "compilerOptions":{
        ...
        "declaration": true,// 자동 .d.ts 저장
        "outDir": "빌드될 파일이 저장될 경로",// 빌드 시, 생성될 .d.ts 파일경로
    }
}

index.ts

let myName: string = "JJamVa";

자동으로 생성된 index.d.ts

declare let myName: string;

note

코드를 직접 구현하면서 타입도 저장되기 때문에 재사용성 측면과 편리함은 제공된다.
하지만 과도한 타입 선언을 하게 된다면 코드의 가독성이 떨어지니 주의하면서 사용하면 된다.