I have an ReactJs project and I am organizing my files. Is it best to create a folder for interfaces and a different folder for types or should we keep the interfaces and types together

example

MyProject
 -src
  -components
  -interfaces
    -editorInterface
  -type
    -editorTypes

CodePudding user response：

I use the below structure

src/
└── ts
    ├── enums
    │   ├── app_enums.ts
    │   └── db_enums.ts
    ├── interfaces
    │   ├── app_interfaces.ts
    │   ├── db_interfaces.ts
    │   └── global_interfaces.ts
    └── types
        └── app_types.ts

Directories names express their purpose well. interfaces directory includes all interfaces and types directory includes all type aliases you use in your project.You can merge these directories if you wish but I found splitting types semantically and structurally is really helpful when managing large code bases. Try to figure out what works best for you. There is no golden rule when it comes to project directory structure

CodePudding user response：

It is entirely up to you.

I prefer to put types and interfaces directly inside *.ts or *.tsx files, where I used them. If some type or interface is shared between different files, I put them in separate "types" folder.

If you want to learn more about React applications architecture, you can look at Bulletproof React. Although, I would not recommend to bother yourself with that at the very beginning.