본문 바로가기
반응형

type과 interface는 모두 객체의 형태(shape) 를 정의하는 데 사용된다. 하지만 겉보기에는 비슷하지만, 확장성, 유연성, 표현력에서 차이가 있다. 같이 알아보자 

 

1. 기본 문법 비교

- 선언하는 방식은 아래와 같고 둘 다 동일하게 작동한다.

// interface 선언
interface Person {
  name: string;
  age: number;
}

// type 선언
type Person = {
  name: string;
  age: number;
};

 

2. 확장(확장성) 방식의 차이

// interface는 extends로 확장이 가능하다.
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}


// type은 & 연산자로 확장할 수 있다.
type Animal = {
  name: string;
};

type Dog = Animal & {
  breed: string;
};

 

3. 선언 병합(Declaration Merging)

// interface는 동일 이름으로 여러 번 선언하면 병합된다. 
interface User {
  name: string;
}

interface User {
  age: number;
}

// 결과:
const u: User = {
  name: '홍길동',
  age: 25,
};

// type은 동일 이름으로 다시 선언하면 오류가 발생한다. 
type User = {
  name: string;
};

type User = {
  age: number; // ❌ 에러: 중복 선언
};

4. 유니온, 인터섹션 타입 지원

// type은 유니온/인터섹션/튜플/기타 고급 타입 조합에 유리하다
type Status = 'loading' | 'success' | 'error'; // 유니온
type ID = string | number;

type Point = { x: number } & { y: number }; // 인터섹션

// interface는 이런 유니온 타입을 직접 지원하지 않으며, 인터섹션의 경우 extends를 활용하여 간접적으로 같은 효과를 사용할 수 있다.

 

5. 그렇다면 뭐가 좋을까?

  • interface는 구조 확장에 강하고,
  • type은 타입 조합유연한 표현에 강하다.

위에 요약과 같이 뭐가 더 좋을지는 상황에 따라 다를 거 같다. 하지만 TypeScript 팀도 공식적으로 말하길, “객체를 정의할 땐 interface부터 써보고, 부족할 때 type으로 전환하라”는 전략이 좋다고 한다.

 

반응형