[TypeScript] d.ts 파일과 types.ts 파일의 차이

TypeScript

 

안녕하세요, Jay입니다.

 

오늘은 TypeScript에서 자주 사용하는 두 가지 파일인 d.ts 파일과 types.ts 파일의 차이를 알아보려고 합니다.

저도 처음 TypeScript를 사용하면서 헷갈렸던 부분 중 하나인데요, 프로젝트를 하다 보면 이 둘을 어떻게 구분하고 사용하는지 감이 안 올 때가 있습니다. 이 글에서는 d.ts 파일과 types.ts 파일의 특징과 용도를 설명해 보겠습니다.

 

 

1. d.ts 파일이란?

d.ts 파일은 타입 선언 파일(Declaration File)이라고 합니다.
주로 외부 라이브러리의 타입 정보를 TypeScript에 알려주기 위해 사용됩니다.

 

예를 들어, 어떤 JavaScript 라이브러리를 사용하는데 해당 라이브러리가 타입 정보를 제공하지 않는다면 d.ts 파일을 만들어서 타입을 직접 정의할 수 있습니다.

 

• 특징:
  • 실행 가능한 코드가 포함되지 않습니다.
  • 타입 선언만 포함되며, 컴파일 시 JavaScript로 변환되지 않습니다.
  • @types 패키지로 배포되는 타입 정의 파일들이 모두 .d.ts 파일입니다.

// example.d.ts
declare module "my-library" {
  export function doSomething(value: string): void;
}

위 코드는 my-library라는 라이브러리가 제공하지 않는 타입을 직접 선언한 예입니다.

 

---

 

2. types.ts 파일이란?

types.ts 파일은 프로젝트 내부에서 사용할 타입, 인터페이스 등을 정의하는 파일입니다.

 

예를 들어, 프로젝트의 여러 컴포넌트나 모듈에서 공통으로 사용하는 타입을 정의하고 관리하기 위해 사용합니다.

• 특징:
  • 일반 TypeScript 파일입니다.
  • 타입 외에도 실행 가능한 코드(함수, 클래스 등)를 포함할 수 있습니다.
  • 컴파일 시 JavaScript 파일로 변환됩니다.

// types.ts
export interface User {
  id: number;
  name: string;
}

export type Status = "active" | "inactive" | "suspended";

위 코드는 프로젝트 내부에서 사용할 User 인터페이스와 Status 타입을 정의한 예입니다.

 

---

 

3. 주요 차이점

구분	d.ts 파일	types.ts 파일
목적	외부 라이브러리의 타입 정의	프로젝트 내부 타입 정의
코드 포함 여부	실행 가능한 코드 포함 불가	실행 가능한 코드 포함 가능
컴파일 결과	JavaScript 파일로 변환되지 않음	JavaScript 파일로 변환됨
주 사용 사례	외부 라이브러리 타입 선언, 글로벌 타입 정의	프로젝트 내부의 공통 타입 정의 및 재사용

 

---

4. 언제 어떤 파일을 사용해야 할까요?

1. 외부 라이브러리 타입 정의
   외부 라이브러리에서 타입을 제공하지 않는 경우 d.ts 파일을 사용합니다.
   예: @types 패키지를 설치하거나 직접 선언.
2.  
3. 프로젝트 내부 타입 정의
   프로젝트에서 사용되는 타입을 관리하려면 types.ts 파일을 사용합니다.
   예: API 응답 타입, 전역적으로 사용하는 인터페이스 정의 등.