How to organize TypeScript interfaces

Typescript

Typescript Problem Overview


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

Typescript Solutions


Solution 1 - Typescript

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 - Typescript

I like to structure my apps like this:

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

Solution 3 - Typescript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiongevikView Question on Stackoverflow
Solution 1 - TypescriptbasaratView Answer on Stackoverflow
Solution 2 - TypescriptThomas HarlanView Answer on Stackoverflow
Solution 3 - TypescriptpouyaView Answer on Stackoverflow