# Commerce types

To make the Frontend component library work with any extension, we introduced an abstract commerce business model.

This model provides (TypeScript) types to represent concepts like `Product`, `Cart`, and `Account`. An extension will always return and receive instances of the corresponding types. These types are then mapped from/to the actual business model used by the chosen underlying commerce system.

You can find the types in your generated project repository under `packages/<project>/types`. From there, you can reference them directly from the corresponding `…/frontend` and `…/backend` directories to use them as a coding contract.

### Adjust the types

The commerce types limit the functionality of the underlying commerce systems to a common denominator to enable the Frontend component library to work with each of them. To unleash the full potential of your chosen commerce system or enhance functionality with other services, you can adapt the types to your own needs.

In general, you can change the types completely (or even get rid of them entirely). The TypeScript compiler should show you most of the affected code pieces if you change a certain type and many IDEs support you with refactoring types across the whole project codebase.

If you don't want to change the commerce types entirely but gradually adapt certain parts, we recommend you use type inheritance instead of changing the types directly.

### Example: Derived product

As an example, you could add additional properties to a product. The basic `Product` type looks like the following:

```typescript highlightLines="10"
import { Variant } from './Variant';
import { Category } from './Category';

export interface Product {
  productId: string;
  referenceKey: string;
  changed?: Date;
  version?: string;
  name?: string;
  slug?: string;
  description?: string;
  categories?: Category[];
  variants: Variant[];
  _url?: string;
}
```

To extend this, we recommend putting a derived version right beside this `Product` type, which can add additional properties:

```typescript highlightLines="10"
import { Product } from './Product';
import { MyProjectSibling } from './TomTailorSibling';

export interface MyProjectProduct extends Product {
  gender?: string;
  siblings?: MyProjectSibling[];
}
```

You can now selectively change if an extension returns a standard `Product` or a derived version and access the added properties in your accordingly.

TypeScript even provides [utilities](https://www.typescriptlang.org/docs/handbook/utility-types.html) to entirely change the type of properties or remove specific properties altogether from derived types. While we'd generally not recommend doing this (because it destroys polymorphism), it can become handy if you need a tapered version of a type for a certain use-case (for example, a `Product` without its `Variant` for displaying a slider).

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Frontend application context](/frontend-development/the-context.md)
- [Next page: Node.js version support plan](/frontend-development/node-version-support.md)
- [Search documentation and API specs](/search.md)