[ts] Type vs Interface

 

타입과 인터페이스는 우리가 원하는 식으로 타입을 설정해줄 수 있게 도와준다. 사실 둘의 역할이 비슷해보이기도 한다. 이 둘의 차이를 명확히 알아보려한다!

 

 

타입스크립트에서 type과 intertace는 값의 타입에 대한 구조를 정의하기 위해 사용한다.

비슷해보이지만 각 타입을 정의 가능여부나 확장, 병합을 할 때의 차이가 있다.

//타입
type User = {
  name: string;
  id: number;
};

//인터페이스
interface User {
  name: string;
  id: number;
}

 

 

원시, 유니온, 튜플 타입을 정의할 때

type을 이용하면 원시, 유니온, 튜플 타입을 정의할 수 있지만,

//원시 타입
type MyString = string;
const str: MyString = 'Hello';

//유니온 타입
type Fruit = 'apple' | 'banana';
type Vegetable = 'carrot' | 'tomato';
type Food = Fruit | Vegetable;
const apple: Food = 'apple';

 

interface는 불가능

//원시 타입
interface MyString = string; // Error

//유니온 타입
//type Fruit = 'apple' | 'banana'; //인터페이스 사용 불가ㅏ Error

 

 

객체 타입 및 함수 타입을 정의할 때

객체, 함수는 타입과 인터페이스 모두 사용하여 정의 가능

type Greet = (name: string) => void;
interface IGreet {
  (name: string): void;
}

 

결국, 기본 타입을 정의할 때는 type은 모든 타입에 대해 정의할 수 있고, interface는 객체를 정의할 때만 사용 가능하다!

 

 

 

선언적 확장(병합)

interface는 같은 이름으로 여러 번 선언될 수 있으며, 자동으로 병합된다.

interface Print {
  (name: string): void;
}
interface Print {
  (name: number): void;
}
const print: Print = (name: number | string) => {
  console.log('name: ', name);
};

 

type은 같은 이름으로 선언이 불가능하다

interface Print {
  (name: string): void;
}
interface Print {
  (name: number): void;
}

//Error

 

 

확장

interface는 extends로 확장

interface Parent {
  print(name: number): void;
}
interface Child extends Parent {
  print(name: string | number): void;
}
const obj: Child = {
  print: (name) => console.log(name)
};

 

type은 &로 확장

type Parent = {
  print(name: number): void;
};
type Child = Parent & {
  print(name: string): void;
};
const obj: Child = {
  print: (name: string | number) => console.log(name)
};

 

 

 

결론

각각의 용도와 사용법이 다르다. 객체 타입 정의와 확장이 필요한 경우에는 인터페이스를 사용하는 것이 더 유리하며, 이는 선언 병합과 캐싱 메커니즘 덕분에 성능 최적화에도 도움이 된다(선언적 확장이 되기 때문에) . 반면, 유니온 타입, 튜플 타입, 함수 타입을 정의할 때는 타입 별칭을 사용하는 것이 적합하다. 어느 프로젝트를 시작할 때 뭐든 이를 통일시켜야 하는 것은 맞는게 같다. 상황에 따라 알맞은 방식은 것을 도입하는 것이 좋겠지만 내 생각에는 결국,

 

원시, 유니온, 튜플 타입을 정의할 때는 type을 사용하는 것이 맞을 것 같고(뭐 이건 interface로 정의가 안되니)

그 외에는 interface를 사용하는 것이 좋을 것 같다!