Typescript Schema generation and usage

Questions and Answers Strapi Backend
1

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>;
    stripeId: Attribute.String;
    // ...
  }
}

declare module '@strapi/strapi' {
  export module Shared {
    export interface ContentTypes {
      // ...
      'api::subscription.subscription': ApiSubscriptionSubscription;
    }
  }
}

Than, when I try to use it in my code, Should I import it like this?

import type { Shared } from "@strapi/strapi";

interface Subscription = Shared.ContentTypes["api::subscription.subscription"]["attributes"]

const subs: Subscription[] = await strapi
        .query("api::subscription.subscription")
        .findMany(...);

And how do I deal with types like relations?

E.g. I have to following generated type:

export interface ApiCustomerCustomer extends Schema.CollectionType {
  // ...
  attributes: {
   // ...
    subscription: Attribute.Relation<
      'api::customer.customer',
      'oneToOne',
      'api::subscription.subscription'
    >;
    // ...
  };
}

How do I use this in code?

// previous code:
interface Subscription = Shared.ContentTypes["api::subscription.subscription"]["attributes"]

// ...
if (customer) {
  return {
   // ...
    subscription: {
      id:
        (customer.subscription as any as Subscription)?.stripeId || null,
      active: isSubscriptionActive(
        customer.subscriptionStatus as unknown as StripeSubscriptionStatus,
        customer.subscriptionPeriod
      ),
      period: customer.subscriptionPeriod,
    },
  };
}

Without casting subscription to any and than to Subscription, I get the error:
Property ā€˜stripeIdā€™ does not exist on type ā€˜Relation<ā€œapi::customer.customerā€, ā€œoneToOneā€, ā€œapi::subscription.subscriptionā€>ā€™.

Other example:

included: Attribute.Component<"simple-types.bulletpoint", true>;

When I want to map over the attribute, e.g.:

included: sub.included.map((inc) => inc.label),

I get Property 'map' does not exist on type 'Component<"simple-types.bulletpoint", true>'.

I am really struggling with this, and would be very happy if someone could help me out here, especially since this all happened after my upgrade from 4.9 to 4.11.3.

System Information
  • Strapi Version: 4.11.3
2

Ok, so after digging deep into the conde changes of the new Typescript System v1 I found that actually not that much has changed, it is just not documented.
Creating a type this way fixes the issues:

import type { Attribute  } from "@strapi/strapi";
export type Customer = Attribute.GetValues<"api::customer.customer">;

However, is there any solution where it is not necessary to do this?
Like using the entityEngine and it will automatically get the types associated with the UID ā€œapi::customer.customerā€?

1 Like
3

Hi there,

Improving TypeScript support is one of our highest priorities in the Developer Experience team.

Weā€™ve started by laying out foundations (the PR youā€™ve linked) so that we can then iteratively implement types for Strapi API (so that you donā€™t have to cast everything).

Weā€™re focusing first on our most used public APIs such as the entity service (the one weā€™re currently working on) or the core factories (controller, service, router, which is already out). Weā€™ll then move to less-used APIs (such as the DB query API).

We didnā€™t publish any documentation for the internal types yet so that we can experiment a bit more with them internally before declaring them as stable. Once we do that, weā€™ll propose in-depth documentation with examples and guidelines about how to leverage them to write strongly typed Strapi applications.

In the meantime, using the experimental Attribute.GetValues<UID> is still the best option you have if you want to take advantage of the newest types. Just keep in mind that there can still be some issues with those.

If you really want to try and use the types for the query API, maybe you can try to override the module declaration & the query() definition with one of your own.

4

@excooo I face a similar misunderstanding while using TS. Can you share a bit more of your experience on this?

For example, I have blogArticle content. Using the following code:

import type {Attribute} from "@strapi/strapi";

export type Article = Attribute.GetValues<'api::blog-article.blog-article'>;

function doSomething(article: Article) {
  console.log(article.title);
}
  • I have one error: line 3 ā€˜Type ā€œstringā€ does not satisfy constraint ā€œneverā€ā€™
  • I donā€™t have any property autocomplete on my article object

What am I missing? Thanks in advance.

I also tried export type Article = ApiBlogArticleBlogArticle['attributes']; but I cannot work with the generated types (Attribute.String, Attribute.Integer instead of string and number)ā€¦

5

hey nash, Iā€™ve faced the same issue, you need to regenerate types. The new typing system generates types into a different set of files.

6

@Convly, I appreciate the efforts towards improving TypeScript support!
Iā€™ve created a GitHub issue regarding frontend TypeScript documentation. Is there a timeline for when we might expect documentation and frontend TypeScript support to be released?

I canā€™t wait, and thank you for your work! :slightly_smiling_face:

7

There is a code example in the community org for this. GitHub - strapi-community/strapi-typed-fronend: make strapi types compatible with frontend with a YouTube video explaining it. https://www.youtube.com/watch?v=Gv3dAG8ktsI

still this is a workaround until strapi implements there sdk what would make this obsolete

1 Like
8

@Boegie19 Thank you :slightly_smiling_face: !
The example was very helpful for implementing TypeScript support in my turboStrapi starter project.
Everything seems to be working great so far :tada:

Looking forward to the official solution!

9

This thread is a saviour. I had no idea I had to or how to cast strapis schemas to types.

In the future I would hope this is predone for us and we automagically get:
UserType
UserAPIResponseType
UserInputType

etcā€¦ because there is a lot missing at the moment. Especially input types.

1 Like