Types or Interfaces?

interfaces are different from types in TypeScript, but they can be used for very similar things as far as common React uses cases are concerned. Here's a helpful rule of thumb:

  • always use interface for public API's definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing.

  • consider using type for your React Component Props and State, for consistency and because it is more constrained.

You can read more about the reasoning behind this rule of thumb in Interface vs Type alias in TypeScript 2.7.

Types are useful for union types (e.g. type MyType = TypeA | TypeB) whereas Interfaces are better for declaring dictionary shapes and then implementing or extending them.

Useful table for Types vs InterfacesIt's a nuanced topic, don't get too hung up on it. Here's a handy table:
AspectTypeInterface
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โœ…๐Ÿšซ
Can be mapped over with mapped typesโœ…โœ…
Expands in error messages and logsโœ…๐Ÿšซ
Can be augmented๐Ÿšซโœ…
Can be recursiveโš ๏ธโœ…

โš ๏ธ In some cases

(source: Karol Majewski)

Something to add? File an issue.