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:
interfacefor 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.
typefor 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
Useful table for Types vs InterfacesIt's a nuanced topic, don't get too hung up on it. Here's a handy table:
|Can describe functions||✅||✅|
|Can describe constructors||✅||✅|
|Can describe tuples||✅||✅|
|Interfaces can extend it||⚠️||✅|
|Classes can extend it||🚫||✅|
|Classes can implement it (||⚠️||✅|
|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)