How to organize types definitions in a React Project w/ Typescript

Generally, if the type alias/interface is specific only for the component, it is alright to write it within the same .tsx file, as you can consider them to be used “locally” for that component.

However, there can be scenarios when you need to reuse that type alias/interface across other components, or other helper files (For instance, the interface from component A extends the interface from component B). For this, it will be better to store the type alias/interface in a separate file. For instance, you could have a shared directly that houses all the common type aliases/interfaces that are to be exported.

- pages
  - ComponentA
  - ComponentB
- shared
  - interfaces
    - messages.interface.ts
    - geo.interface.ts
    // etc 
  - services
  - helper
  // etc

The main advantage of doing so, is that you will be able to prevent the risk of cyclic dependencies, especially when you find out that you are writing code whereby multiple components are exporting and importing stuff from each other.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)