개요

TypeScript로 개발을 하다 보면 "이건 type으로 정의할까? interface로 정의할까?" 고민하게 되는 순간이 온다. 두 가지 모두 객체의 타입을 정의할 수 있지만, 용도나 확장성, 유연성 측면에서 차이가 있다.

type과 interface의 공통점

• 둘 다 객체의 타입 정의에 사용 가능함
• 컴파일 타임에 타입 체크를 도와주는 도구로, 실제 JavaScript 코드에는 존재하지 않음
• 기본적인 문법은 유사함

다음 두 코드는 동일한 의미를 가진다:

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

interface IUser {
  name: string;
  age: number;
}

---

차이점

1. 확장(Extend)의 차이

• interface는 extends로 확장이 가능하며, 다중 확장도 가능함
• type은 & 연산자를 사용한 인터섹션 방식으로 확장함

// interface 확장
interface Person {
  name: string;
}
interface Developer extends Person {
  skill: string;
}

// type 확장
type PersonType = {
  name: string;
};
type DeveloperType = PersonType & {
  skill: string;
};

2. 중복 선언 가능 여부

• interface는 같은 이름으로 여러 번 선언하면 자동으로 병합됨
• type은 동일 이름으로 중복 선언 시 에러가 발생함

// interface는 병합 가능
interface User {
  name: string;
}
interface User {
  age: number;
}
// 결과: { name: string; age: number }

// type은 중복 선언 시 에러
type UserType = {
  name: string;
};
type UserType = {
  age: number;
}; // 에러 발생

3. 유니언 및 인터섹션 타입 지원

• type은 유니언(|)과 인터섹션(&) 등 복합 타입 정의에 적합함
• interface는 객체 형태의 타입 정의에 집중됨

type Status = 'loading' | 'success' | 'error';
type WithId<T> = T & { id: string };

4. React 컴포넌트 Props 정의

둘 다 사용할 수 있으나, 일반적으로 interface를 더 선호하는 편이다. 확장이 용이하여 협업 시 관리하기 유리하기 때문이다.

interface ButtonProps {
  label: string;
  onClick: () => void;
}

---

선택 기준 정리

상황	추천 방식
객체 구조 정의 (특히 컴포넌트 Props)	interface
유니언/인터섹션 등 복잡한 타입 조합	type
제네릭 기반 타입 조합	type
타입 확장 또는 선언 병합이 필요한 경우	interface

---

마치며

작은 규모의 프로젝트에서는 큰 차이를 느끼기 어려울 수 있다. 하지만 협업이나 대규모 프로젝트에서는 interface는 구조화에 강하고, type은 복잡한 타입 조합에 강점이 있다. 최근에는 Props 정의에는 interface, 타입 조합에는 type을 혼용하여 사용하는 추세다.