CodePark/ questions / Types vs interfaces
START PRACTICINGPRACTICE
Frontend question · TypeScript › Types vs interfaces

What is the difference between a type alias and an interface? Which do you use for React props?

Both can describe object shapes, and for most React props either one works. The differences only matter in edge cases. In practice, pick one convention for the codebase. A common one is type for props and unions, and interface for public object contracts that other code may extend.

An interface only describes object shapes. These shapes can include call signatures (a way to describe a function).

  • It supports declaration merging: two interface User declarations combine into one. Libraries use this to let you add to their types.
  • It extends other types with extends. If members conflict, TypeScript reports an error.

A type alias can name any type:

  • unions and tuples
  • primitives
  • mapped and conditional types

A type alias cannot be reopened later. It combines shapes with an intersection &. If members conflict, they quietly become never (the type with no values) instead of giving an error.

  • Both type and interface work for object shapes and most props.
  • Only interfaces support declaration merging, where two declarations combine into one.
  • Only type aliases can name unions, tuples, mapped types and conditional types.
  • interface extends reports conflicting members as errors.
  • A & intersection can silently turn conflicting members into never.
  • Being consistent in the codebase matters more than which one you choose.