TypeScript: interface vs type 정리

프론트엔드 면접을 보다 보면 종종 타입스크립트의 interface와 type 에 대해 질문받곤합니다.

기본적으로 interface와 type alias는 모두 타입스크립트에서 타입을 정의하는 데 사용되는 문법입니다.

비슷해 보여서 혼란스러울순 있지만, 각각의 목적과 특징, 사용 가능 범위 등이 다릅니다.

---

1. 공통점

1.1. 객체의 타입을 정의할 수 있다

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

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

1.2. 함수의 타입 정의 가능

interface Greeter {
  (message: string): void;
}

type GreeterType = (message: string) => void;

1.3. 배열, 튜플 등의 구조 표현 가능

interface StringArray {
  [index: number]: string;
}

type StringArrayType = string[];

2. 주요 차이점

2.1. 확장 방식

2.1.1. interface의 extends 방식 확장

interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark: string;
}

// 다중 확장도 가능하다
interface Poodle extends Animal, Dog {
  color: string;
}

2.1.2. type의 &(intersection)으로 확장

type Animal = {
  name: string;
};

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

// 여러 타입을 & 연산자로 조합가능하다.
type Poodle = Animal & Dog & {
  color: string;
}

---

2.2. 선언 병합

2.2.1. interface의 선언 병합

1. interface의 경우 동일 이름으로 여러번 선언하면 자동으로 병합된다

interface Person {
  name: string;
}

interface Person {
  age: number;
}

// 결과 : { name: string, age: number}

2. type은 재선언이 불가능 하다(컴파일 에러가 발생한다)

type Person = {
  name: string;
};

type Person = {
  age: number;
}; // Error: Duplicate identifier

---

2.3. 유니온/교차타입 가능여부

2.3.1. type의 유니온과 교차타입의 사용

1. type은 유니온|과 교차 타입& 모두 사용 가능하다

type Status = "loading" | "success" | "error"; // 가능

type Shape = Circle | Rectangle;              // 가능

interface Shape = Circle | Rectangle;         // 불가능

---

2.4. primitive, tuple, mapped type 표현 가능 여부

2.4.1. type 에서의 primitive, tuple, mapped type 표현

1. type은 string, number, boolean 같은 원시 타입에도 별칭 지정이 가능하다

type Name = string;
type UserId = number | string;
type Tuple = [string, number];

2. interface는 오직 객체형태 에만 사용이 가능하다

---

3. 언제 어떤걸 써야 할까

상황	권장 문법	이유
객체 구조 정의	interface	확장성이 좋고 선언병합이 가능하다
여러 타입의 조합이 필요할떄	type	유니언, 교차 타입을 지원한다
리터럴 타입 정의	type	원시 타입의 조합이 가능하다
외부 라이브러리 추가 타입정의	interface	선언병합으로 유연한 확장이 가능하다
React Props 정의	interface or type	둘 다 가능하나 interface를 많이 추천한다

---

4. 마무리

항목	interface	type
객체 타입정의	⭕	⭕
함수 타입정의	⭕	⭕
유니언/교차 타입	❌	⭕
원시타입 alias	❌	⭕
선언병합	⭕	❌
확장 방식 키워드	extends	&
사용 추천	객체(object)	복잡한 조합, 유니언

정답은 없다. 잘 사용만 하자.