PropType에 대해서 type vs interface

• 작성자: @Yunseo Hwang
• 작성일: 2021.10.20
• Description: prop 타입을 지정할 때 기존에는 interface를 사용했는 데 어떤 Repo에서 type을 사용하는 걸 보고 어떤 것을 사용하는 것이 좋을 지 찾아봤습니다.

---

Q. Prop의 타입을 정의할 때 type을 사용할까요, interface를 사용할까요?

기존(우테캠)에 사용해왔던 방식 : interface

그렇지만 찾아보니까 interface 보다 type을 더 많이 사용하는 것 같다!

참고

• Type aliases vs. interfaces in TypeScript-based React apps
• typed react - props as type or an interface

"Type aliases vs. interfaces in TypeScript-based React apps" 번역 및 요약 :

초창기 Type과 Interface는 꽤 달랐지만 TypeScript의 최신 버전에서는 거의 유사해졌다. 그렇지만 약간 미묘한 차이가 있는 데 Type은 union type의 지원으로 composable하고 Interface는 선언 병합(declaration merging)의 지원으로 extendable하다는 것이다.

Type과 Interface의 차이점으로 작성하는 코드의 패러다임에 따라 어떤 것을 사용할 지를 결정할 수 있다. 객체지향이면 Interface를 사용하고 함수형이면 Type을 사용해라!

React에서 클래스 컴포넌트보다 함수형 컴포넌트가 일반적으로 더 선호되고 hook, HOCs 등 React에서 사용되는 컨셉들은 함수형 세계에서 온 것이 많다. 그렇기 때문에

React에서는 Type Aliases를 사용해라 - In React applications, just use type aliases.

Interface의 선업병합으로 인한 예상치 못한 오류 가능성 有

interface IUser {
  firstName: string
  lastName: string
}

interface IUser {
  age: number
}

const user: IUser = {
  firstName: 'Jon',
  lastName: 'Doe',
  age: 25,
}

같은 이름으로 Interface를 선언하면 병합되는 선언병합은 써드파티 라이브러리의 타입을 재정의하고 확장할 수 있도록 하는 강력한 기능이다. 하지만 이는 React의 prop, state의 타입을 정의하는 데에 있어서는 불필요하다.

오히려 prop과 state의 interface를 예상치 못하게 확장시킬 수 있어 불필요하게 복잡도를 높이고 예상치 못한 오류를 야기할 수 있다.

On the contrary, it can introduce unnecessary complexity and add bugs if somebody will try to monkey-patch props or state interfaces.

이외 ...

1. 타입 조합 기능이 강력하다
2. 타자를 덜 쳐도 된다.
3. 일관성 : interface의 관례인 I prefix로 인해 네이밍적으로 복잡도가 늘고 추후에 type으로 바꿀 때 등에서 많은 것을 변경해야 한다.

"typed react - props as type or an interface " 답변 요약

ford04

• type을 사용할 수 있는 대부분의 상황에서는 prop에 type을 사용한다. Interface를 사용해야 할 때는 전역에서 prop에 대해 선언 병합을 해야 할 때나(일반적이지 않음), 타입의 세부 구현 정보를 에러 메시지, ide type 정보 등에서 숨기고 싶을 때 사용한다.
• interface는 타입에 대해서 새로운 이름을 생성하므로 string & number와 같은 타입 세부 정보가 ide 등에서 드러나지 않는다.