Las interfaces nos ayudan a tipar de manera mas efectiva las diferentes variables dentro de angular, No olvidemos que todo esto son características de TypeScript, Al definir una interfaz lo que estamos haciendo es creando la estructura que vamos a utilizar para un objeto.

Normalmente este tipo de archivos son conocidos como "modelos" pues modela los objetos dentro de la app.

export interface **Product**{
  id: string;
  title: string;
  price: number;
  description: string;
  image: string;
  discount?: boolean;
  percentaje?: number;
  images?: string[];
  colors: string[];
  sizes: string[];
}

Son de tipo exportables para que puedan ser utilizadas en otros lugares de la app, estan también se podrían crear dentro de alguna clase de tipo servicio, pero por buenas practicas es mejor dejar todo separado, uno de los principios de angular es separar responsabilidades.

Al asignar una variable como tipo Products (interfaz antes asignada) lo que obliga es que todos los datos asignados dentro de esta interfaz cumplan esa condición, Esto con el fin de evitar errores de datos.

Cuando dentro de una propiedad de la interfaz le asignamos el ? quiere decir que esta propiedad es opcional de lo contrario es obligatoria.

products: Product[] = [
    {
      id: '1',
      title: 'Camiseta',
      description: 'Con ',
      image: 'assets/img/img.png',
      price: 20000,
      discount: true,
      percentaje: 20,
      sizes: ['S', 'M', 'L', 'XL'],
      colors: ['#80a735', '#327580']
    },

En el caso de este tipado para la variable products se esta realizando con : diciéndole a angular que es de tipo Products como se le agrego un [] esto quiere decir que es un array de este tipo.

Esto nos ayuda a que nuestra estructura de datos sea respetada y minimiza la cantidad de errores cometidos.