✔ d.ts 타입 정의파일
📂 d.ts 파일
d.ts 파일은 TypeScript에서 타입 정의를 외부 모듈에 제공하기 위해 사용하는 타입 타입 선언 파일이다. 이 파일을 통해 타입 정보를 모듈 외부로 제공하거나, 기존의 JavaScript 라이브러리에 타입을 추가하여 TypeScript가 타입 체크를 할 수 있도록 돕는다.
타입 선언 파일은 주로 JavaScript로 작성된 라이브러리 TypeScript에서 사용할 때, 라이브러리가 제공하지 않는 타입 정보를 개발자가 직접 정의할 수 있는 기능을 제공한다. 이는 TypeScript가 외부 모듈의 함수, 변수, 클래스 등에 대한 타입 정보를 알고 있어야 하는 경우에 유용하다.
🍖 d.ts 파일의 역할과 필요성
- 타입 체크 가능: TypeScript는
d.ts파일을 참조하여 해당 모듈의 타입을 인식하고 타입 체크를 할 수 있다. 이를 통해 TypeScript 코드의 안정성이 향상 - IDE 지원:
d.ts파일이 있으면 코드 자동 완성, 타입 정보 표시 등의 기능이 개선 - 타입 정보를 공개:
d.ts파일은 라이브러리를 사용하는 다른 개발자에게 타입 정보를 제공하여, 코드의 이해도를 높이고 생산성을 높여줌
📝 d.ts 파일 작성 방법
타입 선언 파일은 함수, 클래스, 객체, 변수 등 JavaScript로 작성된 모듈의 구조와 동일하게 작성하지만, 실제 구현은 포함하지 않고 타입 정보만 정의한다. 따라서 d.ts 파일에는 함수 본체나 클래스 메서드의 내용 없이 시그니처만 존재하게 된다.
1. 전역 타입 선언 (Global Declarations)
타입 선언 파일을 통해 전역에서 사용할 타입을 정의할 수 있다. 이를 위해, global.d.ts라는 이름으로 파일을 생성하여 프로젝트 루트에 위치시키고, 전역 타입이나 인터페이스를 정의한다.
// global.d.ts
declare const API_BASE_URL: string;
declare function fetchData(url: string): Promise<any>;위의 global.d.ts 파일에서는 API_BASE_URL과 fetchData라는 전역 변수와 함수의 타입을 정의하여 프로젝트 전체에서 사용할 수 있도록 했다.
2. 모듈 타입 선언 (Module Declarations)
외부 모듈이나 npm 패키지에 타입을 정의할 때는 declare module을 사용하여 특정 모듈의 타입을 선언한다. 이 경우, 타입 정의 파일의 이름은 [모듈명].d.ts로 짓는 것이 일반적이다.
예시: 모듈 타입 정의
JavaScript로 작성된 myLib.js라는 라이브러리가 있고, 여기에 대한 타입 정보를 정의한다고 가정
// myLib.d.ts
declare module "myLib" {
export function myFunction(a: number, b: number): number;
export const myVariable: string;
}이제 "myLib"를 가져오는 TypeScript 파일에서 myFunction과 myVariable을 사용할 때 타입 체크가 적용된다.
3. 인터페이스 및 타입 선언
클래스나 객체에 대한 구조적인 타입 정보를 선언할 때는 interface나 type 키워드를 사용하여 세부적인 구조를 정의할 수 있다.
// shapes.d.ts
interface Circle {
radius: number;
color?: string;
}
interface Square {
sideLength: number;
color?: string;
}4. npm 패키지의 타입 정의 파일 사용
많은 npm 패키지는 공식 타입 정의 파일을 제공하거나, @types 스코프에서 타입 정의 파일을 제공한다. 예를 들어, lodash 패키지의 타입을 설치하려면 @types/lodash 패키지를 설치하면 된다.
npm install --save-dev @types/lodash이제 lodash를 TypeScript에서 사용할 때 타입 정의가 자동으로 인식되며, 타입 체크와 자동 완성 기능을 사용할 수 있다.
🚧 d.ts 파일 생성 시 주의사항
- 구현 코드 없음:
d.ts파일에는 구현 코드가 없고, 타입 선언만 존재해야 함 - 정확한 타입 지정: 함수나 클래스에 사용되는 매개변수 및 반환값의 타입을 정확하게 정의해야 함
- 프로젝트 구성 확인:
tsconfig.json파일의include항목에d.ts파일 경로가 포함되어 있는지 확인해야 함
예시: d.ts 파일 작성 및 활용
mathLib.js라는 JavaScript 파일이 다음과 같이 있다고 가정해 보자
// mathLib.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}이를 위한 mathLib.d.ts 파일은 다음과 같이 작성 할 수 있다.
// mathLib.d.ts
export declare function add(a: number, b: number): number;
export declare function subtract(a: number, b: number): number;이제 TypeScript 파일에서 mathLib을 사용하면 add와 subtract 함수에 대한 타입 검사를 할 수 있다.
✍ 요약
👉 d.ts 파일은 TypeScript가 타입을 명확히 인식하도록 도와 코드의 안정성을 높이며, 특히 JavaScript로 작성된 모듈을 TypeScript 프로젝트에 통합할 때 유용하게 활용된다.
