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

Questions and Answers
9

hi, I found 3 different ways to create api types for the frontend project.
all of them have some drawbacks:

  1. use the openAPI documentation plugin and generate types with the help of some library (orval / openapi-ts or any other).
    pros: you get all the types including errors.
    And it enables you to autogenerate the api code as well.
    cons:
  • the docs plugin doesn’t flag most properties as required. so data, attributes, id and many others are optional and your code looks like res?.data?.attributes?.title which is annoying and wasteful.
  • you need to run the script with each build

  1. use the strapi-plugin-schemas-to-ts plugin by @mancku mentioned above (grate plugin, thank you :slight_smile: )
    pros: it generated the types by itself in the strapi project, and you just import them if you have a monorepo or copy otherwise
    cons: many of the properties are required which is annoying if you are mocking the data and a bit dangerous cause they could be empty in reality.

  2. use the method described in strapi blog. the idea there is that you add types to your frontend project that use the auto generated contentTypes.d.ts to create the api types.
    pros: no new generated types, and it is based on types that strapi generates and hopefully uses itself.
    also the types are quite accurate optional / required wise
    cons: currently it is a piece of code you add to your project, so you have to maintain it. and I already found some minor mistakes in the code.

I hope it helps :slight_smile:
** I can put only 2 links in the post… so some links are missing

3 Likes