TypeScript data structure when fetching

Questions and Answers
1
System Information
  • Strapi Version: 4.14.3
  • Operating System: win11
  • Database: Postgres
  • Node Version: v18.17.1
  • NPM Version: 9.6.7
  • Yarn Version: 1.22.4

I am trying to implement TypeScript into my Nuxt app when fetching data from Strapi. I am using this plugin: strapi-plugin-schemas-to-ts

There are two issues I am facing, but I want to focus on the second one.

The first issue is, that I don’t know how to exactly get the types into my project; see here.
As a workaround I just copied the interfaces manually over to my project.

Now for my second issue, this is what I want to ask here on the forum. My interface currently looks something like this:

interface Color {
  id: number;
  attributes: {
    createdAt: Date;
    updatedAt: Date;
    publishedAt?: Date;
    name?: string;
    hexcode?: string;
  };
}

But when I fetch the data from Strapi, I don’t get the result directly, but the there is a “data” object, that’s wrapping my actual data. And there is also a “meta” object with its own objects like pagination.

How do I handle this with TypeScript?
Do I need to create an extra interface for each of my content-types?

interface ProductResponse {
  data: Product[];
  meta: Meta;
}

Then again, I don’t even have the Meta type.

In the plugin and in the official docs there is no mention of this at all.