Learn
CoursesTyped content with Sanity TypeGenIntroduction
Typed content with Sanity TypeGen

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.
Knut Melvær
Knut MelværPrincipal Developer Marketing Manager
Log in to mark your progress for each Lesson and Task
This course covers the same TypeGen concepts as the Generating types lesson in the Day One course, but in more depth and with a different project structure. If you've already completed that lesson, this course will deepen your understanding.

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
  • Configure automatic type generation for seamless development workflow
Sanity TypeGen is now generally available! This course has been updated to reflect the GA release. For a complete overview of what changed, see the TypeGen GA announcement and migration guide.

You should be able to follow this course if you have completed Day one content operations course.

Complete Day one content operations

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 is now generally available (GA) as of Sanity Studio v5, marking it as production-ready with stable APIs. Make sure you have the latest version of the sanity package installed to take advantage of all the GA features.

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
Open the Day one content operations source code in a code editor and a terminal

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!

You have 1 uncompleted task in this lesson
0 of 1