Strapi Typescript IntelliSense For Content-Types

[marlosdamasceno]

Hi all,

I am trying to use the VSCode IntelliSense to autocomplete the types I have from my Strapi Content.
For example, I have the content type product, which created in the database the table products. Then in the code using VSCode I would like to be able to when using something like product. it will autocomplete with the available columns, for example name.

The place where I am trying to get this done is the life cycle of the content, therefore it is in the src/api/product/content-types/product/lifecycles.ts

I have tried without success to get this done “out-of-box”.
So far, I got this post, which talks about the use of Strapi types in the frontend. It suggest a plugin that might be useful in the backend as well.

Is there a way to extract typescript types to be used in a separate frontend?

You can use Tools liek “orval” for this. You just need to exclude some types in the orval config - but you can just generate the types with it from the OpenAPI Documentation that Strapi generates

Another useful post that is more of what I need is the one below:

Typescript Schema generation and usage

Hi! i recently started to use strapi and am struggleing miserably with typings. My main question is: How is typescript even supposed to be used in strapi? E.g. when I generate my types I get something like: export interface ApiSubscriptionSubscription extends Schema.CollectionType { collectionName: 'subscriptions'; // ... the only thing that interests me: attributes: { title: Attribute.String & Attribute.Required; included: Attribute.Component<'simple-types.bulletpoint', true>;…

This is about the auto-generated types, which can be manually done running yarn strapi ts:generate-types

Right now it is generating this:

export interface ApiProductProduct extends Schema.CollectionType {
  collectionName: 'products';
  info: {
    singularName: 'product';
    pluralName: 'products';
    displayName: 'Products';
    description: '';
  };
  options: {
    draftAndPublish: false;
  };
  pluginOptions: {
    i18n: {
      localized: true;
    };
  };
  attributes: {
    name: Attribute.String &
      Attribute.Required &
      Attribute.SetPluginOptions<{
        i18n: {
          localized: true;
        };
      }>;
    active: Attribute.Boolean &
      Attribute.SetPluginOptions<{
        i18n: {
          localized: false;
        };
      }>;
    description: Attribute.Text &
      Attribute.SetPluginOptions<{
        i18n: {
          localized: true;
        };
      }>;
    products_prices: Attribute.Relation<
      'api::product.product',
      'oneToMany',
      'api::products-price.products-price'
    >;
    createdAt: Attribute.DateTime;
    updatedAt: Attribute.DateTime;
    createdBy: Attribute.Relation<
      'api::product.product',
      'oneToOne',
      'admin::user'
    > &
      Attribute.Private;
    updatedBy: Attribute.Relation<
      'api::product.product',
      'oneToOne',
      'admin::user'
    > &
      Attribute.Private;
    localizations: Attribute.Relation<
      'api::product.product',
      'oneToMany',
      'api::product.product'
    >;
    locale: Attribute.String;
  };
}

Nevertheless, when I try to use that, returns just the id like in the images below.

In addition, when I hover over the Product it shows this:

type Product = {
    id: ID;
} & {
    [x: string]: unknown;
} & {}

What am I missing here? Does anyone could help me with that, please?
@excooo and @Convly do you have any inputs?

Thanks in advance

System Information

• Strapi Version: 4.25.1
• Operating System: Windows 11 (running WSL2 (5.15.133.1-microsoft-standard-WSL2) with Ubuntu 22.04.3 LTS)
• Database: MySQL
• Node Version: 18.20.2
• NPM Version: -
• Yarn Version: 1.22.19

---

[marlosdamasceno]

Hi all again,

I was able to get the type from the generated folder, however I am not sure if this is the correct way of doing it. Could someone advise please?

Here is what I did, at the end of the file strapi-app/types/generated/contentTypes.d.ts I added the following code:
export type Product = Attribute.GetValues<"api::product.product">;

Then in the lifecycle file I added the following.
import type { Product } from "../../../../../types/generated/contentTypes";

That “solved” the issue. However, I am not sure if it is a best practices.

Thanks in advance!
Regards,
Marlos Damasceno

[marlosdamasceno]

Hi again,

I found the issue, I had added into my tsconfig.json the following:
"types/generated/**"
That was a recommendation from Strapi documentation to avoid build issues.

I removed that and now I can use the following in the lifecycle file.

import type { Attribute } from '@strapi/strapi';
export type Product = Attribute.GetValues<"api::product.product">;

Hope this helps anyone that is trying to achieve the same.

Best regards,
Marlos Damasceno

[LuisAlaguna]

Thanks man!

[userlond]

Does anybody know how to implement this with Strapi V5?