Typescript - interface와 type 차이

TypeScript에서 interface와 type의 확장 및 활용 비교

이번에 회사에서 팀 프로젝트를 진행하면서, type 정의를 할 때, 어떤 사람은 interface를 쓰고 어떤 사람은 type을 쓰고 중구난방이어서 조금 당황을 했다. 그래서 찾아본 김에 나도 공부도 할 겸 정리를 해보려고 한다.

TypeScript에서 자료형을 정의할 때 가장 많이 사용하는 두 가지 방법은 interface와 type이다.

이 두 가지는 비슷해 보이지만, 몇 가지 중요한 차이점이 있다.

이번 포스팅에서는 확장 방법, 선언적 확장, 자료형 정의, 그리고 computed value 사용 측면에서 각각의 차이를 정리해 보려한다.

 

---

확장(상속)하는 법

interface

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

interface는 클래스를 상속받듯이 extends 키워드를 사용해서 다른 인터페이스를 확장할 수 있다. 여러 개를 동시에 확장할 수도 있다.

type

type Animal = {
  name: string;
};

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

type은 & 연산자를 통해 여러 타입을 조합(Intersection)하여 확장할 수 있다.
상속처럼 동작하지만 type은 유니언, 튜플 등 더 다양한 방식의 조합이 가능하다.

 

---

선언적 확장

interface

interface User {
  name: string;
}

interface User {
  age: number;
}

// 결과적으로 User는 다음과 같음
// interface User {
//   name: string;
//   age: number;
// }

interface는 선언을 여러 번 해도 병합된다. 이 덕분에 라이브러리 사용자와 제작자가 타입을 쉽게 확장할 수 있다.

type

type User = {
  name: string;
};

type User = {
  age: number;
}; // 오류: 동일한 이름으로 중복 선언 불가

type은 같은 이름으로 여러 번 선언할 수 없다. 선언적 병합이 불가능하기 때문에, 필요한 경우 새로운 타입 이름으로 정의해야 한다.

 

---

자료형(type)

interface

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

interface는 주로 객체 형태의 구조를 정의할 때 사용된다. 클래스나 객체 리터럴과 함께 쓰기 좋다.

type

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

type도 객체 구조를 정의할 수 있지만, 유니언, 튜플, 기본 타입 별칭 등 다양한 형태의 타입 정의에 더 적합하다.

 

---

computed value 사용

interface

type Keys = 'name' | 'age';

// interface에서는 computed key 사용 불가
interface User {
  // [K in Keys]: string; // ❌ Syntax Error
}

interface는 computed property나 mapped type을 직접적으로 사용할 수 없다.

type

type Keys = 'name' | 'age';

type User = {
  [K in Keys]: string;
};

type은 computed property를 사용한 Mapped Type 정의가 가능하다. 동적인 속성 이름이 필요할 때 유용할 듯 하다.

 

---

요약

구분	interface	type
확장	extends 사용	&로 조합
선언적 확장	O (병합 가능)	X (중복 선언 불가)
사용 용도	객체 지향적인 구조	유연하고 복잡한 구조
computed key 사용	불가	가능 (Mapped Type)

각 방식은 상황에 따라 장단점이 있으므로, 적절히 선택하여 사용하는 것이 중요할 것 같다.
간단한 객체 구조나 라이브러리 확장이 필요하다면 interface, 복잡한 조합이나 유니언 타입이 필요하다면 type을 선택하는 것이 일반적인듯.