Type Script 에서 d.ts 파일이란? 그리고 외부 js 라이브러리 가져오기

d.ts 파일이란?

TypeScript에서 .d.ts 파일은 "declaration file" 또는 "타입 선언 파일"이라고 불린다.

 

이 파일들은 주로 JavaScript 코드의 타입 정보를 TypeScript에게 제공하기 위해 사용된다.

 

보통 프로젝트에서 정의한 타입들을 보관 해 놓는 용도로 사용한다.

 

차근차근 용도를 파헤쳐보자.

 

1. d.ts 파일은 다른 ts 파일에서 import 하여 사용이 가능하다.

이런 식으로 ts파일에서 타입정의가 너무 길어질때 d.ts 파일을 만들어서 타입을 넣어두고 필요할 때 빼서 사용한다.

// index.d.ts

export type Age = number;
export interface Person {name : string}

//test.ts

import {Age} from '../dist/index.d'

let age :Age;

 

 

2. d.ts 파일은 모든 타입을 정리해놓은 레퍼런스 용으로 사용하기도 한다.

ts 파일에 있던 모든 타입들을 정리 해 놓은 문서가 필요할 때 d.ts 파일을 레퍼런스 용도로 사용하는 것 이다.

 

tsconfig.json 파일에서 

"declaration": true

 

위 코드를 추가해주면 컴파일시 .d.ts 파일도 자동으로 함께 생성된다. ( 현재쓰는 모든 타입이 정의된 파일 )

// index.ts

let siron:string = 'iron';

// index.d.ts

declare let siron: string;

 

위 예시처럼 declare로 외부파일에 선언되어있는 siron을 가져와서 타입을 지정해 준 모습이다.

( 위 코드가 적힌 채로 d.ts 파일이 자동으로 저장된다. )

 

단, d.ts 파일이 자동생성되는 경우에는 d.ts 파일을 수정해선 안 된다. 레퍼런스 용도로만 사용할 것.

 

참고로 일반 ts 파일에 export 혹은 import 키워드를 삽입하지 않은 경우 변수나 타입을 지정했을때 자동으로 글로벌 모듈이 되었지만, d.ts 파일은 글로벌 모듈이 자동으로 되지 않는다.

 

즉, d.ts 파일의 기본 값은 local module 이다.

 

그러면 d.ts 파일을 글로벌 모듈로 만들어주려면 어떻게 해야할까?

 

먼저 tsconfig.json 파일로 가서 아래 코드를 추가 해 주자.

   "typeRoots": ["./dist"]

 

위 typeRoots 코드는 배열안에 담겨있는 경로 속 common 폴더 내부의 ts 파일을 모두 글로벌 모듈로 만들어준다. 

 

따라서 위 예시의 경우 dist 폴더안에 common 폴더를 하나 더 만들어서 common 폴더에 ts 파일을 넣어주어야 자동으로 글로벌모듈화가 된다. 

 

typeRoots의 유용한 점은 코드를 짜면서 타입을 쓸 때 typeRoots 경로 안에 있는 파일에 쓰고자 하는 타입이 있다면 찾아서 사용하는 것 이다.

 

허나 위험할 수 있기 때문에 그냥 export / import 키워드를 사용해서 사용하는 것이 좋다.

 

유명한 외부 js 라이브러리를 사용할 때 우리는 타입을 모두 지정 해 주어야 한다.

개인이 직접 타입을 지정하기는 굉장히 번거로운데 이러한 라이브러리의 타입을 사람들이 지정 해 놓은 사이트가 있다.

 

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master

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

 

위 사이트에서 라이브러리에 타입을 지정한 파일을 찾아서 가져오면 된다. 

 

위 방법 말고도 정석으로 가져오는 방법이 있다. npm 사이트에서 직접 가져오는 것 이다. 

 

간단하게 예시로 jquery 라이브러리를 설치해보자.

 

npm jquery 를 검색하여 https://www.npmjs.com/package/jquery

jquery

 

위 사이트에서 아래 명령어를 가져온다.

$ npm install jquery

 

위 명령어를 통해 jquery 라이브러리를 설치한다.

 

이 후, 우리의 목적은 jquery 라이브러리에 타입을 지정한 파일이다.

 

npm typescript jquery를 검색하여 https://www.npmjs.com/package/@types/jquery

@types/jquery

 

위 사이트에서 아래 명령어를 가져온다.

$ npm install --save @types/jquery

 

위 명령어로 jquery 자바스크립트 파일에 타입을 지정한 파일들을 받아올 수 있다.

설치 완료 시, 생성 폴더들

 

결국, 타입스크립트에서 Java Script 라이브러리를 사용하려면  '라이브러리 설치 + 라이브러리에 타입지정한 파일 설치'  절차를 거쳐야한다는 것.

 

참고로 node_modules/@types 폴더에 있는 타입들은 모두 글로벌 모듈이며,

개발자가 임의로 tsconfig.json 파일에 typeRoots를 설정 해 놓았다면 typeRoots는 node_modules/@types 폴더에 있는 타입들을 자동으로 포함시켜주지 않는다.

 

즉, typeRoots에 @types을 추가하든지 다 지우든지 선택해야한다. 그냥 typeRoots는 어지간하면 쓰지말자.

 

참조 : 코딩애플