.ts와 d.ts 그리고 declare에 대해서

개요

d.ts의 파일에 대해 문득 왜 굳이 .ts를 사용하지 않고 d.ts를 사용해서 타입을 정의하는거지? 라는 의문이 들어서 다양한 검색을 해보면서 학습했던 지식을 정리한다.

*.ts를 안쓰고 *.d.ts를 사용하는 이유

• 이미 자바스크립트로 코드를 타입스크립트를 쓰고 있는 프로젝트에서 사용해야 할때
  •  *.d.ts는 타입 선언 전용으로 자바스크립트로 쓰여진 코드에 d.ts파일에 타입을 정의해두면 타입스크립트 환경에서 이를 인식해 자동완성과 타입체킹을 할 수 있게 된다.
• 실행 환경에 이미 존재하는 객체나 전역 타입을 정의할 때
  • 브라우저의 window나 document등은 이미 존재하는 전역 객체이다. 이 객체들에 대한 타입만 정의하고 실제 코드를 추가할 필요가 없기 때문에 .d.ts 파일을 사용해 타입 정보만 정의한다.
• 타입 정보만 제공하고 실행 코드를 생성하고 싶지 않을 때
  • .d.ts 파일은 실행 코드를 생성하지 않는다. 즉 자바스크립트로 컴파일되지 않으므로 불필요한 실행 코드를 줄일 수 있다.
• 모듈 간 의존성을 줄이고 타입 정의를 분리할 때
  • .d.ts 파일을 사용하면 실행 로직과 타입 정의를 분리할 수 있는데 이는 프로젝트의 유지보수성을 높이고, 모듈 간 의존성을 줄이는 데 도움이 된다. 특히 커다란 프로젝트에서 타입 정의만을 따로 관리하거나 여러 패키지 간에 타입만 공유해야 할 때 유용하다.

declare란?

declare는 타입 정보를 선언할 때 사용되는 키워드로 앰비언트 선언(Ambient Declaration)이라고도 불린다. 보통 .d.ts파일과 같이 사용되는 친구이다.

 

그럼 어떻게 사용할 수 있는지 알아보자

 

1. 이미 존재하는 전역 객체나 변수를 타입스크립트에 알려줄 때

// jQuery가 전역에 있다고 가정
declare const $: any;

// 이제부터 TypeScript는 `$`가 있다는 것을 알고 타입 검사를 하지 않습니다.

declare global {
  // global내부에서 전역 선언은 var를 사용해야 한다.
  var dataLayer: Record<string, any>[];
}

export {};

// 이제 window.dataLayer의 타입체킹이 가능하다.

 

2. 자바스크립트로 작성된 외부 라이브러리의 타입 정보 제공

// my-library라는 외부 모듈이 있다고 가정
declare module "my-library" {
  export function someFunction(arg: string): number;
}

// 이제 TypeScript는 "my-library"를 import할 때 타입 검사를 합니다.

 

이외로 아주 다양한 사용방법과 규칙등이 있는데 이는 밑의 기사에서 자세하게 설명해주고 있으므로 실제로 필요할 때 보고 사용하면 될 꺼 같다.

 

https://zenn.dev/qnighy/articles/9c4ce0f1b68350

TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022