OTTER-LOG

[TIL] Type과 Interface의 차이

otter의 TIL기록장by otter2023년 2월 12일에 최종수정되었습니다.
잘못된 내용이 있으면 댓글을 달아주세요.
📖 목차
  1. 타입 확장
  2. 재선언
  3. Primitive
  4. Ref

매번 아무생각 없이 type 과 interface 를 혼용해서 사용하고 있었다. 마음 속으로, extends 가 필요할 경우 interface 를 사용하고 그가 아닐 경우라면 type 을 사용해온다는 나름의 규칙을 세워서 진행하고 있었지만 두가지가 어떤점이 다른지는 전혀 이해하지 못하고 있었다.

타입 확장

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

// interface는 extends 키워드를 통해 타입을 상속받을 수 있다.
// --------------------------------


type Animal = {
  name: string;
};

type Bear = Animal & {
  honey: boolean;
};

// type은 intersection을 통해 타입을 확장할 수 있다.

위의 두 선언 모두 Bear 는 { name: string, boney: boolena } 타입을 가지게 되지만 이를 확장하는 방식이 다르다.

재선언

interface Animal {
  name: string;
}

interface Animal {
  honey: boolean;
}

let Test: Animal = {
  name: "Bear",
  honey: true,
};

// interface는 재선언을 통해 프로퍼티를 추가할 수 있다.

type Animal = {
  name: string;
};

type Animal = {
  honey: boolean;
};

// Animal 식별자 중복 오류
// type은 재선언할 수 없다.

interface 는 위와 같은 상황에 재선언을 통해 프로퍼티를 확장시킬 수 있다. (물론 extends를 쓰는 것이 더 적절해 보인다. ) 반면 type 은 재선언할 수 없다.

Primitive

interface Animal extends string
// 인터페이스는 string과 같은 기본형식을 확장할 수 없다는 오류


type Animal = string;
// 오류가 나지 않는다.

interface 는 프리미티브 타입을 rename 하는 용도로 사용할 수 없다. Object type 을 지정할 때만 사용할 수 있다. 반면 type 은 프리미티브 타입을 rename 하는 용도로 사용할 수 있다.

Ref