[TypeScript] Props를 선언할 때 type과 interface 중에 어떤 것을 사용할까?

TypeScript에서 Props를 정의할 때 interface와 type 사이의 선택은 프로젝트를 시작하기 전 규칙을 잡아나아가는 과정에서 흔히 고민되는 주제입니다. 저는 확장성 있게 사용하려고 하면 interface를 사용하고 type은 변경사항이 없는 상황에서 사용했습니다. 이 두 방식 모두 타입을 정의하는 데 사용될 수 있지만, 그 미묘한 차이점과 각각의 장단점을 명확히 이해하는 것은 코드의 유연성과 확장성을 높이는 데 중요합니다. 이 글에서는 interface와 type의 근본적인 차이점을 깊이 있게 탐구하고, 실무에서 어떤 상황에 각각을 사용하는 것이 적절한지 비교해보겠습니다.

Interface vs Type: 기본적인 차이점

Interface

• 객체 형태의 타입을 정의하는 데 주로 사용됩니다.
• 선언 병합(Declaration Merging)이 가능합니다.
• 클래스와 객체 지향 프로그래밍 패턴에 더 친화적입니다.

Type

• 모든 종류의 타입을 정의할 수 있습니다 (Union Type , Intersection Type 등).
• 더 유연하고 복잡한 타입 정의에 적합합니다.

 

TypeScript 공식 문서의 권장 사항

TypeScript 공식 문서에 따르면, 대부분의 경우 interface를 사용하는 것이 좋다고 나와있습니다.

1. 간단성: 기본적인 객체 타입을 정의할 때는 interface가 더 읽기 쉽고 간결합니다.
2. 확장성: interface는 선언 병합을 통해 쉽게 확장할 수 있습니다.

 

실제 예시로 비교해보기

Interface 사용 예시

interface UserProps {
  name: string;
  age: number;
  email?: string;
}

const User: UserProps = {
  name: "Sunny",
  age: 30
};

Type 사용 예시

type UserProps = {
  name: string;
  age: number;
  email?: string;
};

const User: UserProps = {
  name: "John Doe",
  age: 30
};

 

언제 Type을 사용해야 할까?

다음과 같은 경우 type을 사용하는 것이 더 적절할 수 있습니다:

1. 유니온 타입 정의

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

 

2. 복잡한 타입 조합

type ComplexType = string | number | { id: number };

 

 

주의해야 할 점

1. 일관성 유지
   • 프로젝트 내에서 interface와 type의 사용 기준을 명확히 정하는 것이 중요합니다. 예를 들어, 기본적으로는 interface를 사용하되, 복잡한 타입 정의가 필요할 때만 type을 사용하는 방식으로 통일합니다.
2. 확장성 고려
   • 타입을 확장하거나 재활용이 필요한 경우 interface가 더 적합합니다.
     예를 들어, 기존 정의를 덮어쓰거나 추가 속성을 병합하려면 type으로는 불가능!!!
3. 타입 병합 의도
   • 선언 병합이 필요한 경우에는 interface를 사용해야 합니다.
     하지만 선언 병합은 프로젝트 규모가 커질수록 의도하지 않은 동작을 일으킬 수 있으므로 주의가 필요합니다.

 

느낀 점

기본적으로는 interface로 시작을 하되, 유니온 타입이나 복잡한 타입 정의가 필요한 경우엔 type으로 전환하는 방향으로 하면 좋을 것 같다. 제일 중요한 건 프로젝트 코드의 일관성과 가독성이라고 생각이 든다.