Improve Your Frontend Experience With Strapi Types And TypeScript

1

Web development keeps changing, and it's all about building fast, reliable websites and apps. That's why many developers use tools like Strapi, a headless CMS, and Next.js.

This is a companion discussion topic for the original entry at https://strapi.io/blog/improve-your-frontend-experience-with-strapi-types-and-type-script
2

Hey, I have opened an issue in this article’s GitHub repo. Basically, it’s very frustrating to try and use nested component data. Also I think that there are still some issues with how the API responds and what the types actually represent (nested data and attribute keys, no arrays where they should actually be). Could be I am using this the wrong way or there’s still some work to do to get everything 100% working. Some examples in the issue that I’ve mentioned.

3
4

hi, a few things

  1. if you are working in a monorepo you can create a dev dependency in the frontend module on the strapi module and then import the contentTypes.d.ts. no need to copy the file.
  2. I found some errors in the types.ts file. for example:
    in type MediaValue it should be APIResponse and not APIResponseData
type MediaValue<TAttribute extends Attribute.Attribute> = TAttribute extends Attribute.Media<
  infer _TKind,
  infer TMultiple
>
  ? Utils.Expression.If<TMultiple, APIResponse<'plugin::upload.file'>[], APIResponse<'plugin::upload.file'>>
  : never;

and APIResponseCollectionMetadata is missing the pagination level and should be

export interface APIResponseCollectionMetadata {
  pagination: {
    page: number;
    pageSize: number;
    pageCount: number;
    total: number;
  };
}

it would be very nice if this was part of the Strapi project so that it would be maintained along with the actual types

5

also media fields should be optional in the type even if they are required in the schema. cause you need to populate the image to get it.

6

Do you have any idea why the required fields are being typed as possibly undefined?

For example, my collection type attribute start_at is:

start_at: Attribute.DateTime & Attribute.Required;

But typescript is displaying:

(property) start_at: DateTimeValue | undefined
7

Normally this is something that should be working. Can you give more context on the issue your are having. Also, are you sure that your project is loading types from types found in types/generated/components.d.ts.

8

Thank you for the awesome feedback. Great tip in point one. On your second point we will update the types.ts accordingly with all your fixes.

9

Which type are you using exactly that return this undefined value? In any case, even required fields can be undefined when ‘draft and publish’ is enabled.