TIL: 타입스크립트의 d.ts 쓰임

tohero·2022년 5월 14일
0

TIL

목록 보기
10/10
post-thumbnail

isolatedModule

우선 import, export가 없이 고립되어 타입만 정의된 파일은 기본적으로 전역 타입으로 선언된다. 전역을 오염시킬 수 있기 때문에, 고립된 형태로 타입을 정의하면 오류를 발생시키도록 config를 설정할 수 있다.

{
  "compilerOptions": {
    "isolatedModules": true, // 고립된 모듈이 있는지 확인
  }
}

그렇다면 위의 옵션을 설정한 상태로 전역 타입을 지정하고 싶은 경우 어떻게 해야할까?

전역 타입 정의

1. d.ts

d.ts는 타입을 정의하기 위한 포맷이다. 이 곳에서는 export, import를 사용하지 않고 isolatedModule을 정의할 수 있다.

즉, 파일 내에 전역 타입을 지정하기 위한 용도로 d.ts를 사용할 수 있다.

예시 1: 타입이 없는 API를 전역으로 사용할 수 있도록 모듈 타입 정의

// kakaoAPI.d.ts
declare module kakaoAPI {
  export namespace map {
  }
  ...
}

예시 2: 전역 변수의 타입 정의

// global.d.ts
let name: string;

2. export, import가 있는 파일에서 전역 설정

예시 1: 웹 컴포넌트 전역에서 사용할 수 있도록 타입 정의하기

// modalWindow.ts
export default class ModalWindow extends HTMLElement {
  ...
}

declare global {
  interface HTMLElementTagNameMap {
    'modal-window': ModalWindow;
  }
}
profile
Front 💔 End

0개의 댓글