Learn
TracksWork-ready Next.jsCoursesContent-driven web application foundationsGenerate TypeScript Types
Content-driven web application foundations

Generate TypeScript Types

Log in to watch a video walkthrough of this lesson
Log in
Video thumbnail
Add Type-safety to your project and reduce the likelihood that you will write code that produces errors.
Log in to mark your progress for each Lesson and Task

In the case of working with Sanity TypeGen, it can create Types for Sanity Studio schema types and GROQ query results. So, as you build out your front end, you only access values within documents that exist, as well as defensively code against values that could be null.

The Generating types Lesson has a more in-depth exploration of the sanity typegen command.

Sanity TypeGen will create Types for queries that are assigned to a variable and use the defineQuery function.

You're able to use the Sanity CLI from inside the Next.js application because of the sanity.cli.ts file at the root of your project.

Run the following command in your terminal 
npx sanity@latest schema extract --path=./src/sanity/extract.json
Re-run this every time you modify your schema types

The --path argument is provided so the schema file is written to the same folder as all our other Sanity utilities.

You should see a response like the one below and a newly generated extract.json file in your src/sanity directory

✅ Extracted schema

This file contains all the details about your Sanity Studio schema types, which TypeGen will need to create types from.

By default, TypeGen will create a file for types at the project's root. Again, to keep Sanity-specific files colocated, this configuration will keep the project root tidy.

Without this step, Typegen will look for your schema in the default named schema.json file instead of the extract.json file we have created.
Create a new file at the root of your project
{
  "path": "./src/**/*.{ts,tsx,js,jsx}",
  "schema": "./src/sanity/extract.json",
  "generates": "./src/sanity/types.ts"
}

The configuration here will:

  1. Scan the src directory for GROQ queries to create Types.
  2. Additionally, use the extract.json file created during the previous task.
  3. Write a new types.ts file with our other Sanity utilities.
Run the following command in your terminal
npx sanity@latest typegen generate
Re-run this every time you modify your schema types or GROQ queries

You should see a response like the one below and a newly created src/sanity/types.ts file in your project.

✅ Generated TypeScript types for 15 schema types and 2 GROQ queries in 1 files into: ./src/sanity/types.ts

Success! You now have Types for your Sanity Studio schema types and GROQ queries.

The extract.json file will need to be updated every time you update your Sanity Studio schema types and TypeGen every time you do or update your GROQ queries.

Instead of doing these steps separately, you can include scripts in your package.json file to make running these automatic and more convenient.

Update package.json scripts
"scripts": {
  // ...all your other scripts
  "predev": "pnpm run typegen",
  "prebuild": "pnpm run typegen",
  "typegen": "sanity schema extract --enforce-required-fields --path=./src/sanity/extract.json && sanity typegen generate"
},

You can now run both the schema extraction and TypeGen commands with one line:

npm run typegen
Sanity TypeGen is currently in Beta and may not always produce perfect results. The following lessons will highlight any meaningful issues.

You now have all the tools and configurations to author and query Sanity content with a Type-safe, excellent developer experience. Now it's finally time to query and display Sanity content.

Sanity TypeGen contains a feature to map GROQ queries against their types automatically. However, this is done by extending the Sanity Client package, as you will see at the bottom of the automatically generated types file.

// Query TypeMap
import "@sanity/client";
declare module "@sanity/client" {

Since we are using the next Sanity package and have not installed Sanity Client directly, this automatic type inference may not work.

Install Sanity Client as a dependency to solve this before the next lesson.

npm install @sanity/client

You have 4 uncompleted tasks in this lesson
0 of 4