where to put interfaces and type aliases

Question

I use custom interfaces and type aliases in my angular2 project. For example, I'm implementing a component that shows a products list, so I need to define Product interface:

export interface Product {
    id: number;
    name: string;
    price: number;
}

Now I need a place to put interfaces into. I'm thinking it should be within a components folder. I've also peeked inside the sources, and angular seems to put all interfaces into facade folder. So I ended up with the following structure:

components
|
|--- product-list
     |
     |--- facade
     |    |
     |    |--- product.ts
     |
     |--- product-list.component.ts
     |--- product-list.component.html
     |--- product-list.component.css

The interface is used like this:

export class RowComponent implements OnInit {
    @Input() product: Product;
    @Output() productRemoved: EventEmitter<ProductRemoved> = new EventEmitter();

    constructor() {
    }

Is this a viable approach? Are there any styles guides specific to the matter in question?

Answer 1

I struggled with this too. The first thing to understand is that directory structure is pretty subjective on your use-case and project complexity. That said, the official documentation has some good guidelines to get started:

https://angular.io/guide/styleguide#style-04-06

I use the following structure for medium to large apps:

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- [+] pages
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] mocks
       |-- [+] models // <- here
       |-- [+] validators
       |-- [+] services
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
     |
     |-- [+] configs
|-- assets
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss

Most of the time your services (in Core module) will consume your model interfaces, and your components in-turn will communicate only with the modeled data through the service. In smaller applications, putting the data model interface at the top of the Service file makes the most sense. However, as your application becomes larger, there will be instances where the components need the data model interface and not the service.

Keeping the data model interfaces provides the most sustainable approach, that provides the best "separation of concerns" and abstraction.

This article goes into detail about structuring Angular 6 apps.

Answer 2

I believe this is a personal preference. I find practical to keep some interfaces in a global shared directory and some of them in module directory. For example globals in "core/models/core.models.ts" and specific ones in "modules/home/home.models.ts".