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
By convention, the interface names are in the camel case. They use a single capitalized letter to separate words in there names.
TypeScript interfaces can extend classes. This means that an interface can inherit the members of a class but not their implementation. The class, in this case, acts as an interface with all the members declared without providing the implementation.
The hybrid approach uses a global and component or model-based approach. In that way, you can store types and interfaces in a global folder that are common across the project. Also, you can store specific types and interfaces that are strictly related to a specific component, controller or service.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With