본문으로 건너뛰기

Interface와 Type의 차이

질문​

TypeScript에서 interface와 type은 어떤 차이가 있나요?

답변 초안​

interface와 type 모두 객체의 타입을 정의할 수 있으며 대부분의 경우 비슷하게 사용할 수 있습니다.

다만 interface는 객체의 구조를 정의하는 데 초점을 맞추고 있으며 선언 병합(Declaration Merging)을 지원합니다.

반면 type은 객체뿐만 아니라 유니온, 튜플, 원시 타입 별칭 등 더 다양한 타입 표현이 가능합니다.

실무에서는 객체의 형태를 정의할 때는 interface, 복잡한 타입 조합이나 유니온 타입을 표현할 때는 type을 사용하는 경우가 많습니다.

예시​

Interface​

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

Type Alias​

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

위 두 코드는 객체 타입을 정의한다는 관점에서는 거의 동일하게 동작합니다.

가장 큰 차이​

1. 선언 병합(Declaration Merging)​

interface는 같은 이름의 선언을 자동으로 병합할 수 있습니다.

interface User {
  name: string;
}

interface User {
  age: number;
}

결과적으로 아래와 동일합니다.

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

반면 type은 불가능합니다.

type User = {
  name: string;
};

type User = {
  age: number;
};
Duplicate identifier 'User'

2. 유니온 타입 표현​

type은 유니온 타입을 표현할 수 있습니다.

type Status = 'pending' | 'success' | 'error';

interface는 유니온 타입을 정의할 수 없습니다.

3. 튜플 표현​

type Point = [number, number];

튜플 역시 type으로만 표현할 수 있습니다.

4. 원시 타입 별칭​

type UserId = string;
type Age = number;

원시 타입에도 이름을 부여할 수 있습니다.

interface는 객체 타입에만 사용할 수 있습니다.

상속과 확장​

Interface​

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

Type​

type Animal = {
  name: string;
};

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

둘 다 타입 확장이 가능하지만 문법이 다릅니다.

실무에서는 무엇을 사용할까?​

Interface를 사용하는 경우​

interface User {
  id: number;
  name: string;
}
  • API 응답 타입
  • React Props
  • 객체 구조 정의
  • 라이브러리 공개 타입

Type을 사용하는 경우​

type Status = 'pending' | 'success' | 'error';

type ApiResponse<T> =
  | { success: true; data: T }
  | { success: false; error: string };
  • 유니온 타입
  • 튜플 타입
  • 조건부 타입
  • 복잡한 타입 조합

실무 주의점​

많은 팀에서 다음과 같은 기준을 사용합니다.

객체의 형태를 정의할 때는 interface를 우선 사용하고, 유니온, 튜플, 매핑 타입 등 interface로 표현할 수 없는 경우에는 type을 사용한다.

하지만 TypeScript 공식 문서에서는 두 문법 중 하나를 강제하지 않으며, 팀 컨벤션에 따라 선택하는 경우가 많습니다.

면접 답변​

"interface와 type은 모두 타입을 정의할 수 있지만 차이점이 있습니다. interface는 객체 구조 정의와 선언 병합을 지원하는 데 강점이 있고, type은 유니온 타입, 튜플, 원시 타입 별칭 등 더 다양한 타입 표현이 가능합니다. 실무에서는 객체 구조를 정의할 때는 interface를 사용하고, 복잡한 타입 조합이 필요한 경우에는 type을 사용하는 경우가 많습니다."

참고 자료​

  • TypeScript Handbook - Interfaces
  • TypeScript Handbook - Type Aliases