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ærHead of Developer Community and Education

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 the 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:

• Total TypeScript by Matt Pocock
• TypeScript on Egghead
• TypeScript on FreeCodeCamp

The project you make in the Day One course is based on having the Studio and your front-end in 2 separate folders, not connected as a “monorepo”:

~/day-one-with-sanity
├── frontend
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.ts
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   ├── src
│   ├── tailwind.config.ts
│   └── tsconfig.json
└── studio
    ├── README.md
    ├── data
    ├── 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!