타입스크립트를 사용하다 보면 종종 d.ts라는 확장자를 보게되는데, 이게 대체 무엇일까?
타입 정의
타입스크립트 파일은 웹 브라우저나 Node.js에서 실행하려면 타입스크립트 컴파일러를 통해서 자바스크립트 파일로 변환하는 과정이 필요하다.
이 과정에서 타입스크립트 문법은 제거되고 실행할 수 있는 자바스크립트 코드만 남게된다!
(이렇게 타입스크립트로 작성한 코드가 자바스크립트로 변한다.)
즉 타입스크립트 코드 중에서는 말하자면 실행할 수 있는 코드와 타입정의룰 위한 코드가 있는데, 타입 정의룰 위한 코드는 사라지게 되는거다...!
근데 d.ts라는 파일은 일반적인 타입스크립트 파일과 다르게, 타입 정의만 들어있는 타입이다. (뭐랄가 옛날에 C언어로 로봇 코드를 작성할때 .h 파일에 함수들의 원형들 다 적어두는 느낌이랄까?)
즉! 확장자의 d는 선언(Declaration)이라는 뜻이다.
(근데 개인적으로 definition이 더 와닿는다랄까?)
타입 정의 파일이 필요한 이유
자바스크립트로만 작성된 모듈이나 라이브러리를 타입스크립트에서 불러오거나, 자바스크립트로만 개발된 패키지를 타입스크립트 프로젝트에서 설치해서 사용할때 문제점이 발생한다!
import로만 불러오기만 해서는 모듈안에 있는 것들의 타입을 알 수 없다는건데, 이럴때 필요한게 타!입!정!의! 파일 이다.
패키지와 함께 타입선언(정의)만 담은 d.ts 파일을 만들어서 제공하면 모듈을 사용할때 타입과 함께 활용할 수 있다! (이때문에 자동완성도 사용가능하고)
타입 정의 파일을 만드는 방법
타입스크립트 파일을 컴파일할때 --declaration 이라는 옵션과 함께 컴파일하면 자바스크립트 파일을 만들면서 d.ts 파일도 함께 생성된다.
//main.ts
export function greeting(name: string) {
console.log(`${name}님 하이!`);
}위 코드를 아래와 같은 명령어로 컴파일을 하게 되면 main.js 파일과 함께 main.d.ts 파일이 생성된다.
npx tsc main.ts --declaration
타입스크립트 코드(좌), d.ts파일(우)
참고
