5

Problem:

I am re-writing my React app with Typescript. I am trying to implement all the components as functional components.

Typescript allows us to make use of Type Aliases and Interfaces to define the shape of an object or a function signature. I have already gone through the difference between Types vs Interfaces.

Most all the articles I went through have defined a component by making use of an interface where type alias could have been used. As far as I know, both interface and type alias gives the same result for a React component, then why almost in every definition interface is used

I tried a few articles on why Interface is being used mostly instead of type alias but could not find anything useful.

What is the best way to annotate React component props, with interface or with type aliases?

Example with Interface:

interface AppProps {
  color?: string;
}

const App = (props: AppProps) : JSX.Element => {
  return <div>{props.color}</div>
}
Community
  • 1
  • 1
GRS
  • 1,829
  • 1
  • 9
  • 23
  • Not sure there will be a definitive answer here. As you say, using either an interface or a type alias will give the same result, so there may not be any technical reason to prefer one over the other in this case. Pick one and be consistent. You mention that in almost every definition, interface is used. That of itself is reason enough to stick with interface. Why break from tradition? – CRice Jan 20 '20 at 18:06
  • But using interface when you don't have to extend it at all does not make sense. for which Type alias was built for. We cant Blindly follow without understanding why right? That's my question. Why are they adopting interface in this case when they could easily do it with type alias too. – GRS Jan 20 '20 at 18:09
  • As one comment in the the linked question stated, one of the few differences is the ability to do "Declaration merging". Aside from that, they are nigh interchangeable and you should just be consistent. – zero298 Jan 20 '20 at 19:01
  • @zero298 got it. None of the use cases for annotating component props relates to Declaration merging. That's, why I m very confused about why is no one using type alias for it. – GRS Jan 20 '20 at 19:03
  • The reason why you're seeing "interface" instead of "type" for React components is that usually you would use "interface" to define a shape and methods of an object. Although you could use "type", it's more suited to define a singular something, a type and not a shape. – Edvinas daugirdas Jan 21 '20 at 05:58

1 Answers1

2

This is an aggregated answer which I took from developers from other forums, comments, etc.

There is no definitive approach or answer to this since no one has any clue on why Type Alias is not used.

The advantage of using Interface on the other hand was

  1. It helped to structure the code neat.

  2. When you have shape and methods you would end up using Interface instead of Type - So following the same for the other which does not have methods will make it readable and easy to follow.

  3. A very convenient pattern which is followed by most people as a conventional approach.

Darshna Rekha
  • 1,069
  • 7
  • 20
GRS
  • 1,829
  • 1
  • 9
  • 23
  • 1
    I personally prefer type alias over interface whenever possible. My theory to your question is that the term "interface" sounds more formal and looks semantically apt for libs. In short it's a fashion/human thing. – hackape Mar 12 '20 at 09:18