[TypeScript] d.ts

TypeScript로 프로젝트를 진행하다 보면 d.ts 파일을 보게 된다. 

d.ts 파일은 타입만 저장할 수 있는 파일 형식이다. 

 

사용하는 이유는 

1. 타입 정의만 따로 저장해서 import 하기 위해서
2. 프로젝트에서 사용하는 타입을 쭉 정리하는 레퍼런스용으로 사용

타입만 모아서 정의하는 d.ts

파일명.d.ts라고 작성한 파일은 type 키워드, interface 같은 타입 정의만 넣을 수 있다. 

 

함수의 경우엔 { } 중괄호 붙이는 게 불가능하고 파라미터 & return 타입만 지정 가능하다.

export type Age = number;
export type multuply = (x :number, y :number) => number
export interface Person { name :string }

 

d.ts 파일은 ts파일이 아니기 때문에 그냥 사용하더라도 ambient module이 되지 않는다. 

그래서 export를 사용해야 다른 ts 파일에서 사용할 수 있다. 

 

한 번에 많은 타입을 export 하고 싶은 경우 namespace를 사용하거나 import * as 파일 문법을 사용한다. 

 

레퍼런스용으로 사용하는 d.ts

타입스크립트 파일마다 자동으로 d.ts 파일을 생성하길 희망하면, 

// tsconfig.json

{
    "compilerOptions": {
        // ...
        "declaration": true
    }
}

tsconfig.json에서 declaration 옵션을 true로 변경하면 된다. 

그럼 저장할 경우 자동으로 타입스크립트 파일마다 d.ts 파일이 옆에 생성된다. 

 

// index.ts

let name :string = 'kim';
let age = 20;
interface Person { name : string } 
let person :Person = { name : 'park' }

타입스크립트 파일에 작성을 한다면 

// index.d.ts

declare let name: string;
declare let age: number;
interface Person {
    name: string;
}
declare let person: Person;

자동으로 모든 변수와 함수의 타입 정의가 들어간다. 

자동생성으로 만들어지기 때문에 따로 수정을 할 수 없고 레퍼런스용으로 사용한다. 

 

export 없이 d.ts 파일을 글로벌 모듈로 만들기

d.ts 파일은 import와 export가 없어도 로컬 모듈이다. 

그래서 다른 타입스크립트 파일에서 import를 통해서만 사용할 수 있는데, 옵션을 통해 글로벌 모듈로 만들 수 있다.

// tsconfig.json

{
    "compilerOptions": {
        // ...
        "typeRoots": ["./types"]
    }
}

typeRoots 옵션에 원하는 폴더를 입력하게 되면 타입스크립트 파일을 작성할 때 타입이 없으면 자동으로 

해당 폴더에서 타입을 찾아서 적용해준다. 

 

하지만 파일이 많아지면 겹치는 문제나, 신경 쓰는 부분이 많아져서 되도록이면 import / export 방식을 추천한다.