타입스크립트의 타입과 인터페이스의 차이점

interface와 type은 타입스크립트에서 객체의 구조를 정의하는 데 사용되지만,
interface는 선언 병합을 지원해 동일한 이름으로 여러 번 선언 가능하며, 객체 구조 확장과 클래스 구현에 적합합니다.
반면, type은 유니온, 인터섹션, 튜플 등 복잡한 타입 조합을 지원하지만 선언 병합은 불가능합니다.
프론트엔드에서는 interface를 React props나 객체 정의에, type을 API 응답이나 복잡한 타입에 주로 사용합니다.

선언 병합

interface: 동일한 이름으로 여러 번 선언하면 속성이 자동 병합됩니다. 이는 외부 라이브러리 타입 확장이나 모듈 간 협업에서 유용합니다.

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "John",
  age: 30,
}; // 정상 동작

type: 동일한 이름으로 중복 선언 시 에러가 발생합니다.

type User = { name: string };
type User = { age: number }; // 에러: Duplicate identifier 'User'

복잡한 타입 표현

interface: 유니온이나 튜플은 직접 지원하지 않지만, extends로 다른 인터페이스를 확장할 수 있습니다.

interface Name { name: string }
interface Age { age: number }
interface User extends Name, Age {}

type: 유니온(|), 인터섹션(&), 튜플 등을 지원해 복잡한 타입을 유연하게 정의할 수 있습니다.

type Id = string | number; // 유니온
type UserInfo = { name: string } & { age: number }; // 인터섹션
type Tuple = [string, number]; // 튜플

클래스 구현

interface: 클래스가 특정 구조를 따르도록 강제할 수 있어 코드 일관성을 유지하는 데 유용합니다.

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

class Person implements User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

type: 클래스 구현은 가능하지만, 선언 병합이 없어 확장성이 제한됩니다.

프론트엔드에서의 사용 사례

interface: React 컴포넌트 props나 상태 정의에 적합. 선언 병합으로 타입 확장이 쉬움.

interface Props {
  title: string;
}

interface Props {
  onClick?: () => void;
}

const Button: React.FC<Props> = ({ title, onClick }) => (
  <button onClick={onClick}>{title}</button>
);

type: API 응답 타입, 유니온 기반 조건부 렌더링, 튜플 등 복잡한 타입 정의에 유리.

type ApiResponse = { data: string } | { error: string };
type FormState = [string, (value: string) => void];

const [value, setValue]: FormState = useState("");

장단점

• interface
  장점: 선언 병합으로 확장성 우수, 클래스 구현 지원, 타입스크립트 공식 문서에서 객체 정의 시 권장.
  단점: 유니온, 튜플 등 복잡한 타입 표현 제한.

• type
  장점: 유니온, 인터섹션, 튜플 등으로 복잡한 타입 정의 가능, 에러 메시지 구체적.
  단점: 선언 병합 불가.