Import model in angular

I have an error importing a model into another model, all files are in the same folder
[Problem in api-response] (https://i.sstatic.net/cWzaYIxg.png)

export class Drink {
  idDrink!: string;
  strDrink!: string;
  strCategory!: string;
  strAlcoholic!: string;
  strGlass!: string;
  strInstructionsES!: string;
  strDrinkThumb!: string;
  strIngredient1!: string;
  strIngredient2!: string;
  strIngredient3!: string;
  strIngredient4!: string;
  strIngredient5!: string;
  strIngredient6!: string;
  }

import { Drink } from './drink';

export interface Response {
  data: Drink[];
}

import { Drink } from './drink';

export class DrinkResponse {
  data!: Drink[];
}

import { Drink } from './drink';
import { DrinkResponse } from './drinkResponse';

export class ApiResponse implements DrinkResponse {
  data: Drink[];

  constructor() {
    this.data = [{
        idDrink:"string",
        strDrink:"string",
        strCategory:"string",
        strAlcoholic:"string", 
        strGlass:"string",
        strInstructionsES:"string",
        strDrinkThumb:"string",
        strIngredient1:"string",
        strIngredient2:"string",
        strIngredient3: "string",
        strIngredient4:"string",
        strIngredient5:"string",
        strIngredient6:"string"
    }];
  }
}

I've tried everything I can think of, but I can't seem to find the error. It seems like everything is correct to me, but to be honest, I'm new to Angular, so if you could help me, I would really appreciate it. I imagine the error must be something simple. Greetings.

If the other answer doesnt solve it, you should verify that the extension of all the files are .ts