Sanity
Learn
CoursesTyped content with Sanity TypeGenIntroduction
Certification
Sanity developer certification
Track
Sanity developer essentials

Typed content with Sanity TypeGen

Lesson
1

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ærHead of Developer Community and Education
Before starting this Course it may be beneficial to have completed:
Log in to mark your progress for each Lesson and Task

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.

Complete Day One with Sanity Studio

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:

Terminal
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 with Sanity Studio 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