Introduction
Learn how to use Sanity TypeGen to automatically generate TypeScript type definitions for documents in Sanity Content Lake and for the result of GROQ queries in your front ends and web applications.
This course teaches you to generate TypeScript types from a Sanity Studio schema and GROQ queries. Starting with extracting a static schema representation, the course guides through generating types for Sanity Studio schemas and front-end GROQ queries. This skill set streamlines the development process and enriches your toolkit with advanced practices in managing content schemas and data fetching with type safety in mind.
In this course, you will learn the following:
- How to extract a static representation of your Sanity Studio schema
- How to generate TypeScript types from that static representation
- How to generate TypeScript types from GROQ queries in a front end project
- How to use these types in front end code
You should be able to follow this course if you have completed Day One with Sanity Studio course. It will also build on the same studio, schema, and front end.
This course also assumes basic knowledge of TypeScript and will not go into detail on how TypeScript works or explain the syntax. That being said, all the steps are shown to you in code, thus you can use this course as an introduction to TypeScript.
If you want to learn or dive deeper into TypeScript, we recommend these resources:
Sanity TypeGen was launched in beta in sanity@3.34.0
.
Upgrade the sanity
dependency in the Studio folder:
npm install sanity@latest
This course uses the code at the completion of the Day One with Sanity Studio course – where your Studio and front-end are in two separate folders, not connected as a "monorepo"
/├── day-one-with-sanity-nextjs│ ├── README.md│ ├── next-env.d.ts│ ├── next.config.ts│ ├── package.json│ ├── postcss.config.js│ ├── public│ ├── src│ ├── tailwind.config.ts│ └── tsconfig.json└── day-one-with-sanity ├── README.md ├── dist ├── package.json ├── sanity.cli.ts ├── sanity.config.ts ├── schemaTypes ├── static ├── structure └── tsconfig.json
There are other ways of structuring the Studio and front end(s) relative to each other, which can impact your work with TypeScript code generation. If you want to explore these, head to the Sanity TypeGen docs.
Let's dive in!