[TypeScript] TypeScript 실무 패턴 정리: interface, type, 그리고 Partial, Pick, Omit

이 글은 Chat GPT로 TypeScript를 공부하며 정리한 글입니다.

interface와 type

TypeScript에서 interface와 type은 모두 타입에 이름을 붙이고 재사용할 수 있게 하는 문법이다.
둘 다 아래처럼 객체 구조를 정의할 수 있다.

interface User {
  id: number;
  name: string;
}

type User = {
  id: number;
  name: string;
};

겉보기에는 거의 동일하게 동작하지만,
확장성, 병합 여부, 타입 조작 표현력에서 차이가 있다.

interface — “확장과 병합에 자연스러운 객체 구조”

interface는 객체의 형태(Shape)를 정의할 때 주로 사용하며
확장과 병합에 강점을 가진다.

1) extends로 확장

interface User {
  id: number;
  name: string;
}

interface Admin extends User {
  role: "admin";
}

• 다른 인터페이스를 extends로 자연스럽게 확장 가능
• 상속 기반의 계층 구조를 만들 때 직관적

2) 선언 병합(Declaration Merging)

interface는 같은 이름으로 여러 번 선언하면 자동으로 병합된다.

interface User {
  id: number;
}
interface User {
  name: string;
}

// 결과:
// interface User { id: number; name: string }

이 기능은 타입 확장이나 라이브러리 타입 보강(augmentation)에 유용하다.

💡 interface 추천 시점

• API 응답 구조, 도메인 모델 등 명확한 객체 형태
• 여러 곳에서 재사용되는 공통 구조
• 확장이 자주 일어나는 모델(User, Product 등)

type — “조합과 변형에 강한 범용 타입 시스템”

type alias는 객체 타입뿐 아니라
유니온(union), 교차(intersection), 조건부 타입 등
전반적인 타입 조작에 더 강력하다.

type Status = "loading" | "success" | "error";

type Admin = User & { role: "admin" };

• &(intersection) 으로 여러 타입을 조합
• |(union) 으로 여러 경우의 수를 표현

유니온/교차/조건부 타입에 유리 → 조합형 타입 설계에 핵심 역할

❗ 병합 불가능

type은 같은 이름으로 재선언할 수 없으며 병합되지 않는다.

type A = { x: number };
// type A = { y: string }  // ❌ 에러

💡 type 추천 시점

• 유니온 타입 기반 상태 분기
• 타입을 조합하거나 변형해야 할 때
• Pick, Omit, Partial 같은 유틸리티 타입의 결과물 정의
• DTO, ViewModel 등 가공된 구조 설계

interface vs type 정리

비교 항목	interface	type
사용 목적	객체 구조 정의	유니온, 교차, 조건부 타입 포함 모든 타입 표현
확장성	extends로 자연스러운 확장	& 교차 타입으로 조합 가능
병합 가능 여부	✅ 가능 (선언 병합)	❌ 불가능
표현력	객체 중심	매우 넓음 (유니온, 교차, 조건부까지)
실무 예시	API 응답, 도메인 엔티티	DTO, ViewModel, 가공된 타입

---

interface와 type의 확장/조합 비교

interface 확장

interface Product {
  id: number;
  name: string;
  price: number;
}

interface DiscountedProduct extends Product {
  discountRate: number;
}

→ 객체 구조 확장일 때 자연스럽고 직관적

type 조합

type Product = {
  id: number;
  name: string;
  price: number;
};

type DiscountedProduct = Product & { discountRate: number };

→ 가공/조합한 타입 설계에 더 적합

어떤 걸 선택할까?

상황	추천 키워드	이유
명확한 객체 구조 정의(API 응답 등)	interface	확장·병합이 자연스럽고 직관적
기존 타입을 조합/가공해야 하는 경우(Pick/Omit 등)	type	조합/변형 표현력이 뛰어남
유니온 기반 로직(Discriminated Union)	type	유니온 타입 선언에 최적화됨

💡 결론:

• 구조적 모델 = interface
• 가공·조합 = type

---

자주 쓰이는 유틸리티 타입 3가지

1) Partial<T> — 모든 속성을 optional로 변환

interface Post {
  id: number;
  title: string;
  body: string;
}

type PostUpdate = Partial<Post>;

결과:

{
  id?: number;
  title?: string;
  body?: string;
}

실무 사용처:

• PATCH 요청
• 수정 폼
• 임시 저장 데이터

2) Pick<T, Keys> — 특정 속성만 선택

type PostSummary = Pick<Post, "id" | "title">;

결과:

{
  id: number;
  title: string;
}

사용 예:

• 리스트 아이템
• 카드 뷰
• 미리보기 데이터

3) Omit<T, Keys> — 특정 속성 제외

type PostWithoutBody = Omit<Post, "body">;

결과:

{
  id: number;
  title: string;
}

사용 예:

• API 응답 중 일부 필드 제거
• UI 최적화용 데이터

---

✔️ 최종 결론

• interface → 객체의 설계도
• type → 타입 조작을 위한 도구 상자
• Partial / Pick / Omit → 데이터를 실무적으로 가볍게 변형할 때 필수

💡 한 줄 요약
“interface는 구조를 정의하고, type은 구조를 만들어낸다.”