반응형
- 2024-12-10
.d.ts 파일은 타입 정의 파일로, JavaScript 라이브러리나 모듈을 TypeScript에서 사용할 수 있도록 타입 정보를 제공합니다. 이 파일을 통해 TypeScript는 JavaScript 코드의 타입을 알고, 타입 검사 및 코드 자동 완성을 더 정확하게 수행할 수 있습니다.
### .d.ts 파일 생성 방법
1. 기본 구조: .d.ts 파일은 TypeScript의 인터페이스와 타입 선언을 사용하여 모듈의 구조를 설명합니다.
```[.lang-ts]
// example.d.ts
declare module 'example' {
export function sayHello(name: string): string;
export const version: string;
}
```/
2. 전역 변수: 만약 라이브러리가 전역 변수로 동작한다면, 이를 선언할 수 있습니다.
```[.lang-ts]
// global-example.d.ts
declare var MyGlobalVar: string;
```/
3. 인터페이스와 타입 선언: 모듈 내에서 사용되는 데이터 구조를 설명하기 위해 인터페이스와 타입을 정의할 수 있습니다.
```[.lang-ts]
// shapes.d.ts
interface Circle {
radius: number;
color?: string;
}
interface Square {
sideLength: number;
color?: string;
}
```/
4. 라이브러리 참조: 종속성을 포함하여 다른 타입 정의 파일을 참조할 수 있습니다.
```[.lang-ts]
// main.d.ts
/// <reference path="./shapes.d.ts" />
declare module 'main' {
export function drawShape(shape: Circle | Square): void;
}
```/
### 생성 예시
다음은 간단한 예제를 통해 설명합니다:
1. JavaScript 모듈 (example.js)
```[.lang-js]
module.exports.sayHello = function(name) {
return `Hello, ${name}!`;
};
module.exports.version = '1.0.0';
```/
2. 타입 정의 파일 (example.d.ts)
```[.lang-ts]
declare module 'example' {
export function sayHello(name: string): string;
export const version: string;
}
```/
3. TypeScript 사용 예시 (app.ts)
```[.lang-ts]
import { sayHello, version } from 'example';
console.log(sayHello('World'));
console.log(`Version: ${version}`);
```/
이렇게 타입 정의 파일을 작성하면 TypeScript가 JavaScript 모듈의 타입 정보를 알고, 타입 검사 및 코드 자동 완성을 정확하게 수행할 수 있습니다.
반응형