TypeScript Explained

Interface vs type

There is no definitive answer what should you use. General rule - be consistent.

Yet below I present you two different approaches:

Use interface

Use interfaces where you can.

⚠ They look better in error messages (subjective)

☝ They require explicit index signatures

βœ… Extending is better then intersections (you cannot override property by accident)

πŸ“š They can be augmented when necessary (good for library authors)

πŸ‘£ Smaller memory footprint (lazy & cacheable)

Aspect Type Interface
Can describe functions βœ… βœ…
Can describe constructors βœ… βœ…
Can describe tuples βœ… βœ…
Interfaces can extend it ⚠️ βœ…
Classes can extend it 🚫 βœ…
Classes can implement it (implements) ⚠️ βœ…
Can intersect another one of its kind βœ… ⚠️
Can create a union with another one of its kind βœ… 🚫
Can be used to create mapped types βœ… βœ…
Expands in error messages and logs βœ… 🚫
Can be augmented 🚫 βœ…
Can be recursive ⚠️ βœ…
Declaration merging 🚫 βœ…
Has an implicit index signature βœ… 🚫

Taken from WTF TypeScript by Karol Majewski

Use types

What should I use for React Props and State?

βœ’ It’s shorter to write type Props = {}

🏿 Your syntax is consistent (you are not mixing interfaces with type aliases for possible type intersections)

interface Props extends OwnProps, InjectedProps, StoreProps {}
type OwnProps = {};
type StoreProps = {};
type Props = OwnProps & InjectedProps & StoreProps;
type OwnProps = {};
type StoreProps = {};

Taken from Interface vs Type alias in TypeScript 2.7 by Martin Hochel

  • Krzysztof Ε»uraw