[typescript] index.d.ts 파일에 대해서

dev stefanCho·2021년 9월 30일
5

typescript

목록 보기
9/16
post-thumbnail

d.ts는 type definition파일이다. ts를 js로 컴파일하면서 추가적으로 d.ts파일(definition file)도 생성해주는 것이다. (ts ----(컴파일)----> js + d.ts)
d.ts파일을 생성하기 위해서 tsconfig.json에서 declaration 설정이 필요하다.

> tsc --init # tsconfig.json 생성

위 커맨드로 tsconfig.json을 생성하고, delaration과 outDir을 uncomment한다.

{
  "declaration": true, /* Generates corresponding '.d.ts' file. */
  "outDir": "./dist",  /* Redirect output structure to the directory. */
}

각각의 역할에 대해서는 tsconfig.json에 대해 기록하는 글을 참고하자.

declaration: true 로 하면, index.ts를 컴파일 결과로 dist에는 index.js와 함께 index.d.ts파일도 만들게 된다.



예시


index.ts

export default () => {
  console.log('server is running.....');
};

compile

# "start": "tsc --watch --preserveWatchOutput"로 스크립트를 정의해둠
> npm run start    

compile result

./dist
├── index.d.ts
└── index.js

0 directories, 2 files
// index.d.ts
declare const _default: () => void;
export default _default;

// index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = (function () {
    console.log('server is running.....');
});

이제 index.js와 index.d.ts 두개 다 있으므로, npm으로 설치하고, ts(tsx)파일내에서 import할 수 있다. type definition 파일을 package.json에서 types로 지정해줘야한다. (package.json을 참고하자)

DefinitelyTyped Organization

typescript 커뮤니티는 node module에서 이런 타입정의 문제를 해결하기 위해서, organization을 하나 만들었는데 그게 DefinitelyTyped이다.
여기에는 우리가 주로쓰는 library의 type이 대부분 정의되어 있다. (여기에 없다면, 직접 d.ts를 생성하여 declare module을 해줘야 한다.)
참고 영상 보기

profile
Front-end Developer

0개의 댓글