Blog
TypeScript tooling in Prismic
Photo by iMattSmart on Unsplash Opens in new tab
I researched a lot about Content Management Systems, before starting my freelance web developer career. I tried a few, disliked some and got stuck with Prismic. The mental model of shaping websites with custom types and slices just clicked for me.
So far, Prismic offers everything I need from a headless CMS. A great user experience for authors, a lot of flexibility for developers and a great community where asking for help is easy.
Table of Contents
- My problems with Prismic
- TypeScript is a no-brainer
- Improved TypeScript tooling
- Conclusion
- Resources
My problems with Prismic
There is one thing Iâve missed though and that made my work harder. It was to manually create TypeScript Types and Interfaces for my Prismic Custom Types and Slices.
My usual workflow with Prismic goes like this. Figure out which pages and what kind of repeatable elements we need and turn that into Custom Types and Slices.
After that I head into my Next.js app and query for the data. The next hours are spent setting up Types and Interfaces for the Custom Types and Slices.
TypeScript is a no-brainer
Working with TypeScript is one of the things I learned on my last job as an employed software developer. It is something I would never like to miss anymore.
This blog post wonât be about why you definitely need to use TypeScript. But I like to highlight a few points that make working with TypeScript in Prismic a lot of fun to me and improve my workflow.
It makes me faster because my code-editor tells me what kind of fields I have on a specific element and which fields I donât have. Itâs that simple. I think thatâs always been the main selling point to me.
My code knows whatâs there and whatâs not. What exists and what does not so a mispelling of a key in a JavaScript object wonât cause the UI to break. This prevents bug and improves the developer workflow.
So setting up Types and Interfaces for my Prismic Custom Slices and Types was a lot of work but necessary. I would query for the data, look at the Prismic API response and write the Types.
At some point I had built my own types folder which I could reuse on projects or use it as a starting point. It still was a lot of repetitive work.
Improved TypeScript tooling
But guess what: this is now work of the past! Prismic recently released a lot of awesome features around TypeScript tooling! There are two big improvements. Prismic ts codegen and automatic types in Prismic Client.
Prismic ts codegen
Prismic ts codegen is a new cli tool that generates types for Custom Types and Slices. So everything Iâve done manually on my last projects will be taken care of. Awesome!
Itâs super easy to use and I encourage everyone to implement it in future (or even current) Prismic projects. First you have to install the package:
npm install --save-dev prismic-ts-codegen @prismicio/types
Next you have to create a config file in your root folder:
npx prismic-ts-codegen init
Finally you have to tell it where to find your models for whom types should be created. If you use the Slicemachine and thus have them in your local project folder it already should be filled in.
Now you are all set up! If you run npx prismic-ts-codegen
Types for all your
Slices and Custom Types get created in a single file. And if you need to update
them, just run the command again. Itâs so helpful and such a great thing to
have. My prismic developer workflow improved a lot since using it!
Prismic Client automatic types
The Prismic Client was also updated to use these automatic types created by prismic-ts-codegen. This makes working with Prismic and TypeScript a love-love realationship.
You automatically generate your Types and they are used throughout your app without needing to do anything. Thatâs awesome.
When I started working with it, I quickly discovered a case were I thought that I still would have to do some additional work to run everything smoothly. Iâm talking about typing content relationships. Because querying for linked documents is not automatically typed in Prismic. But Prismic also got us covered here. In the docs Opens in new tab they share exactly how to solve this case. Great!
Conclusion
Working with TypeScript in Prismic just got so much better with the release of this huge improvement for TypeScript tooling. As I already said many times before, this improves my workflow a lot and Iâm so glad about it!
Iâm curious what Prismic has planned for future releases and Iâm happpy by choosing it as my main CMS.
Resources
- Prismic release week improved developer tooling Opens in new tab
- Prismic ts codegen on GitHub Opens in new tab
- Prismic ts codegen docs Opens in new tab
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email Opens in new tab.
If you want to support me, you can buy me a coffee. I would be very happy about it!
âïž Buy me a coffee âïžI wish you a wonderful day! Marco