# Generate TypeScript Types

https://www.sanity.io/learn/course/content-driven-web-application-foundations/generate-typescript-types.md

Add Type-safety to your project and reduce the likelihood that you will write code that produces errors. 

In the case of working with [Sanity TypeGen](https://www.sanity.io/learn/apis-and-sdks/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`.

1. The [Generating types](https://www.sanity.io/learn/course/day-one-with-sanity-studio/generating-types) Lesson has a more in-depth exploration of the `sanity typegen` command.

Sanity TypeGen will [create Types for queries](https://www.sanity.io/docs/sanity-typegen#c3ef15d8ad39) that are assigned to a variable and use the `defineQuery` function. 

## Extracting schema

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.

1. **Run** the following command in your terminal 

```sh
pnpm dlx sanity@latest schema extract --path=./src/sanity/extract.json
```

1. 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

```sh
✅ Extracted schema
```

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

## Generating types

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.

1. 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.

1. **Create** a new file at the root of your project

```json:sanity-typegen.json
{
  "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.

1. **Run** the following command in your terminal

```sh
pnpm dlx sanity@latest typegen generate
```

1. 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.

```sh
✅ 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.

## Automating TypeGen

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.

1. Update `package.json` scripts

```json:package.json
"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:

```sh
pnpm run typegen
```

1. 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.

## Automatic type inference

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.

```typescript:src/sanity/types.ts
// 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.

```sh
pnpm add @sanity/client
```