[ts] type과 interface 차이

주로 interface를 사용하는데

타입 정의할 때 type도 있다고 해서

그 차이점을 확인해보려고 한다.

 

type은 객체 + 그 외 모든 타입

interface는 객체 구조 전용

 

에 사용한다.

공통점

둘 다 객체 타입 정의 가능

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

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

 

차이점

interface는 선언 병합 가능

type은 불가능

interface User {
  name: string;
}

interface User {
  age: number;
}

// 자동으로 합쳐짐
interface User {
  name: string;
  age: number; 
}

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

 

type은 유니온, 튜플, 리터럴 가능

interface는 불가

type Status = 'loading' | 'success' | 'error';
type ID = string | number;
type Point = [number, number];

 

interface 확장은 extends

type 확장은 &

interface Base {
  id: string;
}
interface User extends Base {
  name: string;
}

type Base = {
  id: string;
};
type User = Base & {
  name: string;
};

 

interface 쓰는 경우

• 컴포넌트 props
• API 응답 객체
• 객체 구조 위주 

type 쓰는 경우

• 유니온 타입
• 상태 값
• 복잡한 조합