[Typescript] d.ts File

개념

d.ts 파일은 TS에서 타입 정의를 저장하는 파일이다.

여기서 'd' 는 Definition 의 약자이다.

 

이 파일들은 TS 컴파일 과정에서 JS로 변환되지 않으며, 타입 정보만 포함한다.

 

주로 2가지 용도로 사용된다.

 

1. 타입 정의 저장 : 타입 정보만을 분리하여 저장하고, 필요한 곳에서 import 해서 사용한다

2. 레퍼런스 용 : 프로젝트에서 사용하는 타입을 정리해놓은 문서로 활용할 수 있다.

---

 

d.ts 파일에서 타입 정의하기

d.ts 파일 내에서는 주로 type 키워드, interface, 함수 타입 정의를 포함할 수 있다.

함수 본문을 정의할 수는 없고, 파라미터과 return 타입만 지정할 수 있다.

 

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

 

정의한 타입은 export 를 이용해 외부에서 접근할 수 있도록 해주어야한다.

---

자동으로 d.ts 파일 생성하는 법

tsconfig.json 파일에 declaration 옵션을 true 로 설정하여

TS 컴파일러가 자동으로 각 TS 파일에 대한 d.ts 파일을 자동으로 생성하도록 만들 수 있다.

{
  "compilerOptions": {
    "declaration": true
  }
}

 

이렇게 생성된 d.ts 파일에는 해당 TS 파일 내의 모든 타입 정보가 포함된다.

 

---

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

기본적으로 d.ts 파일은 로컬 모듈로 취급돼서

다른 TS 파일에서 사용하기 위해서는 import 해야한다.

 

하지만 프로젝트의 tsconfig.json 파일에 typeRoots 옵션을 설정하여

특정 폴더 내의 d.ts 파일을 글로벌 모듈로 취급하게 만들 수 있다.

 

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

 

예를들어 위처럼 작성하면 'types' 라는 폴더 내의 모든 타입 정의들은

프로젝트 전역에서 사용할 수 있게 된다. 

 

---

유명 JS 라이브러리들을 사용할 때 d.ts 파일은

많은 유명한 JS 라이브러리들을 사용할 때 해당 라이브러리에 맞는 d.ts 파일이 제공되어서

우리는 TS 를 사용하는 프로젝트를 할 때 이 d.ts 파일들을 쉽게 가져다 쓸 수 있다.

 

https://github.com/DefinitelyTyped/DefinitelyTyped

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

주로 위 github repository에 들어가면 대부분 라이브러리의 타입 정의 파일을 찾을 수 있다.

 

하지만 요즘은 npm 으로 라이브러리를 설치할 때 타입스크립트 타입정의된 버전을 따로 찾아서 설치할 수도 있다.

https://www.typescriptlang.org/dt/search?search=

Search for typed packages

위 사이트에 들어가면 타입 정의가 된 npm 패키지를 찾아볼 수 있다.

타입이 정의된 라이브러리를 설치하면

node_modules/@types  와 같은 경로에 타입이 설치된다.

 

혹은 따로 타입 부분만 설치할 수도 있다. 

예를 들어 jquery 의 경우, 타입 파일이 제공되지 않는데

아래와 같이 npm 을 통해서 강제로 설치할 수도 있다.

npm install --save @types/jquery

 

---

ref: 코딩애플, Typescript 공식문서