Frontend Development

TypeScript에서 interface와 type의 차이점: 언제 무엇을 사용해야 할까?

Kun Woo Kim 2025. 5. 27. 22:18
반응형

TypeScript를 사용하면서 가장 자주 접하게 되는 개념 중 하나가 바로 타입 정의입니다. 특히 interfacetype은 비슷해 보이지만 각각의 특징과 사용 사례가 다릅니다. 이 글에서는 두 개념의 차이점을 명확히 이해하고, 어떤 상황에서 어떤 것을 사용해야 하는지 알아보겠습니다.


1. interface와 type의 기본 개념

interface란?

interface는 객체의 구조를 정의하는 TypeScript의 핵심 기능입니다. 주로 객체의 형태를 확장하는 데 용이하며, 선언 병합(Declaration Merging)을 지원합니다.

interface Person {
  age: number;
  name: string;
  isBirthday: boolean;
}

interface Person {
  address: string;
}

const person1: Person = {
  age: 1,
  name: "abcd",
  isBirthday: false,
  address: "1010",
};

type이란?

type은 더 유연한 타입 정의가 가능하며, 튜플, 인터섹션, 유니온 등 다양한 타입 조합을 표현할 수 있습니다.

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

type ContactInfo = {
  email: string;
  phone: string;
};

// 인터섹션 타입 (&)을 사용해 두 타입을 결합
type PersonInfo = BasicInfo & ContactInfo;

const person2: PersonInfo = {
  name: "John",
  age: 30,
  email: "john@example.com",
  phone: "123-456-7890",
};

2. 주요 차이점 비교

특징 interface type
선언 병합 지원 미지원
확장성 extends 키워드로 확장 인터섹션(&)으로 확장
유니온 타입 직접 지원하지 않음 지원
튜플 타입 직접 지원하지 않음 지원
원시 타입 직접 지원하지 않음 지원

3. 언제 무엇을 사용해야 할까?

interface를 사용해야 할 때

  1. 객체의 구조를 정의할 때
  2. 선언 병합이 필요한 경우
  3. 클래스 구현이 필요한 경우
  4. API나 라이브러리의 타입 정의를 작성할 때

type을 사용해야 할 때

  1. 유니온 타입이 필요한 경우
  2. 튜플 타입이 필요한 경우
  3. 원시 타입의 별칭이 필요한 경우
  4. 복잡한 타입 조합이 필요한 경우

4. 실무에서의 활용 팁

  1. 일관성 유지: 프로젝트에서 한 가지 방식을 선택하고 일관되게 사용하세요.
  2. 확장성 고려: 향후 확장 가능성이 높은 타입은 interface를 사용하는 것이 좋습니다.
  3. 복잡한 타입: 복잡한 타입 조합이 필요한 경우 type을 사용하세요.
  4. 성능: 두 방식 모두 컴파일 시점에 제거되므로 성능 차이는 없습니다.

5. 결론

interfacetype은 각각의 장단점이 있으며, 상황에 맞게 적절히 선택하여 사용해야 합니다. 일반적으로 객체 타입을 정의할 때는 interface를, 복잡한 타입 조합이 필요할 때는 type을 사용하는 것이 좋습니다. 중요한 것은 프로젝트의 일관성을 유지하는 것입니다.

핵심 인사이트

  • interface는 확장성과 재사용성이 높습니다.
  • type은 더 유연한 타입 조합이 가능합니다.
  • 두 방식 모두 TypeScript의 타입 시스템을 강력하게 만드는 중요한 도구입니다.

참고 자료

반응형