How to organize TypeScript interfaces [closed]

typescript

I would like to know what the recommended way is to organize interface definitions in typescript. In my project I have many different classes. Each class can have a configuration interface. Currently I have gathered all of these interface definitions into one file Interfaces.ts and reference the file from various locations.

Is there a better way?

Example: https://github.com/blendsdk/blendjs/blob/devel/blend/src/common/Interfaces.ts

Solution 1:

Global

The TypeScript team uses a file called types.ts : https://github.com/Microsoft/TypeScript/blob/master/src/compiler/types.ts

I do the same in my project e.g. https://github.com/alm-tools/alm/blob/master/src/common/types.ts

Alternative

Its okay for high reuse portions to belong in types, however don't pollute it with specific types. Specific types can be (should be) closer to their reference e.g. react style props belong next to (in the same file as) the react component.

React Component Prop Type / React Component

Solution 2:

I like to structure my apps like this:

|-- app
    |-- components
    |-- directives
    |-- services
    |-- interfaces
        |-- <feature/component name>
            |-- <interface name>.interface.ts

Solution 3:

My projects are constructed like this

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