본문 바로가기
카테고리 없음

타입 vs 인터페이스 완전정리 (정의, 차이, 실무 예시)

by ctrl-f 2025. 5. 3.

타입 vs 인터페이스 완전정리

 

 

TypeScript는 자바스크립트에 정적 타입 시스템을 도입해 코드 품질을 높이고 오류 가능성을 줄여주는 강력한 도구입니다. 특히 대규모 프로젝트나 협업 환경에서는 코드의 일관성과 명확한 계약(contract)을 위해 타입 정의가 매우 중요해집니다. TypeScript에서 타입을 정의하는 대표적인 방법으로는 type과 interface가 있으며, 둘은 문법적으로 유사해 보이지만 실제로는 사용 목적, 기능 지원, 확장성 등 여러 차이점이 존재합니다. 실무에서는 이 둘을 상황에 따라 구분해서 사용해야 하며, 프론트엔드 개발자 면접에서도 단골로 출제되는 항목입니다. 본 글에서는 type과 interface의 정의, 기능적 차이, 실제 사용 예시, 실무 적용 기준과 면접 대응법까지 모두 정리합니다.

타입과 인터페이스란 무엇인가

type과 interface는 모두 TypeScript에서 객체의 형태를 정의하거나 구조를 제한하는 도구입니다. 하지만 type은 더 포괄적인 개념이고, interface는 명세에 특화된 구조적 개념으로 이해할 수 있습니다.

type은 단순 객체 타입뿐만 아니라 유니언(union), 인터섹션(intersection), 튜플(tuple), 리터럴(literal) 등 다양한 형태의 타입 정의가 가능합니다.

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

type Status = "loading" | "success" | "error";
type Point = [number, number];
type Combined = User & { role: string };

interface는 객체 지향 프로그래밍에서의 인터페이스 개념과 유사하게, 객체 구조의 명세서로 사용됩니다. 특히 클래스와 함께 사용할 때 명확한 계약을 정의하기에 적합합니다.

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

interface Admin extends User {
  role: string;
}

또한 interface는 선언 병합(declaration merging)을 지원하여, 같은 이름으로 여러 번 정의하면 자동으로 병합되는 특징이 있습니다. 이는 외부 라이브러리 확장이나 전역 타입 정의에서 매우 유용합니다.

interface Window {
  appVersion: string;
}

interface Window {
  userAgent: string;
}
// 병합되어 Window는 두 속성을 모두 가짐

결론적으로, type은 더 유연하고 다양한 타입 조합을 다루는 데 적합하고, interface는 명확하고 선언적인 구조 정의에 적합합니다.

타입과 인터페이스의 차이점

type과 interface는 대부분의 객체 타입 정의에서 서로 대체 가능하지만, 실제 기능과 사용성 측면에서 다음과 같은 차이가 존재합니다.

① 선언 병합 지원 여부

interface는 선언 병합을 지원합니다. 같은 이름의 interface를 여러 번 선언하면 자동으로 병합됩니다. 이는 라이브러리 확장, 글로벌 타입 보강 등에 활용됩니다.

interface Config {
  api: string;
}
interface Config {
  timeout: number;
}
// 최종: { api: string; timeout: number }

type은 동일 이름으로 여러 번 선언할 수 없어 병합이 불가능하며, 이름 중복 시 오류가 발생합니다.

② 타입 확장 방식

interface는 extends 키워드를 사용해 다른 interface를 확장합니다. 다중 상속도 가능하며, 구조가 명확하게 계층화됩니다.

interface A {
  x: number;
}
interface B extends A {
  y: number;
}

type은 & 연산자를 사용해 다른 타입과 조합합니다. 이를 통해 여러 타입을 결합한 새로운 타입을 정의할 수 있습니다.

type A = { x: number };
type B = A & { y: number };

③ 유니언 타입 정의 가능 여부

type은 유니언, 튜플, 리터럴 타입 등을 포함할 수 있습니다. 이러한 기능은 복합적인 타입 표현이 필요한 상황에서 매우 유용합니다.

type ResponseType = "success" | "fail";
type Coordinate = [number, number];
type Result = { data: string } | { error: string };

interface는 오직 객체 타입만 정의할 수 있어 위와 같은 표현이 불가능합니다.

④ 사용 시기와 명확성

객체의 명세서를 작성하거나, 클래스 구현을 위한 계약서를 정의할 때는 interface가 더 자연스럽습니다. 반대로 타입 조합, 유틸리티 타입, 조건부 타입, 유니언 타입을 사용할 때는 type이 훨씬 유연합니다.

⑤ IDE 인식과 디버깅

일부 개발 환경에서는 interface가 더 빠르고 명확하게 구조를 보여주며, 코드 자동완성에서 명시적인 사용이 유리할 수 있습니다. 특히 React, Next.js 등에서는 Props 정의에 interface 사용을 권장하는 경우가 많습니다.

비교 요약표

항목 type interface
객체 구조 정의 O O
유니언/튜플/리터럴 지원 O X
선언 병합 X O
확장 방법 & (intersection) extends
코드 가독성 복잡한 구조에 적합 단순 객체에 적합
React Props 적용 가능하지만 interface 권장 선호됨

실무에서의 선택 기준과 면접 대응법

실무에서 type과 interface는 각자의 특성에 따라 선택되어야 하며, 팀 컨벤션과 프로젝트 구조에 따라 명확한 기준을 정해두는 것이 좋습니다.

① 실무 선택 기준

  • interface: 명세화된 구조 정의가 필요할 때 (ex. React Props, 외부 API 명세)
  • type: 유연한 조합, 유니언 타입, 리터럴 타입이 필요한 경우
  • interface는 클래스 implements 시 요구됨
  • 복잡한 API 응답 타입 조합 → type 사용

② 실제 사용 예시

React 컴포넌트 Props

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button = ({ label, onClick, disabled }: ButtonProps) => (
  <button disabled={disabled} onClick={onClick}>
    {label}
  </button>
);

API 응답 타입 정의

type ApiResponse = 
  | { success: true; data: string }
  | { success: false; error: string };

③ 면접 대응 전략

  • “type과 interface의 차이를 설명해보세요.”
  • “언제 interface를 선택했는지 설명해주세요.”
  • “선언 병합은 언제 유리한가요?”

예시 답변

“단순 객체 정의나 명세가 필요한 경우에는 interface를 사용하고, 타입 조합이나 유니언 형태가 필요한 복잡한 구조에는 type을 사용합니다. 예를 들어 공통 응답 타입을 조합할 땐 type이 유리하고, 컴포넌트 Props는 interface로 명확히 선언합니다.”

결론

type과 interface는 TypeScript에서 타입 안정성과 구조 명확성을 확보하는 데 핵심적인 도구입니다. 둘의 기능은 상당 부분 겹치지만, 다음과 같은 차이점이 있습니다:

  • type은 유니언/튜플/리터럴을 포함한 조합형 정의에 적합
  • interface는 선언 병합과 클래스 구현에 적합
  • 실무에서는 상황에 맞게 혼용되며, 팀 컨벤션이 중요

프론트엔드 면접에서도 “type과 interface의 차이”는 자주 출제되며, 단순 정의가 아닌 실제 사용 예시와 기준을 설명하는 것이 중요합니다. 이번 글을 통해 타입 정의에 대한 기준을 명확히 정립하고, 더 나은 구조 설계와 코드 품질 개선에 활용하시길 바랍니다.

티스토리툴바