Get help on Discord

Request for a TypeScript starter studio with desk structure example in Slack thread.

6 replies
Last updated: Jul 18, 2023
Hey all! Is there a good sanity starter studio available with Typescript? I want to transition my studio to using typescript and need a reference project (hopefully one by the sanity team) to create my types correctly. Let me know if any projects come to mind!:)
AI Update

Good news! The Sanity team provides several official TypeScript starter templates, and the best part is that TypeScript is now the default for all new Sanity projects.

When you run sanity init (the official CLI command for creating new projects), it will automatically set up a TypeScript-based Studio unless you explicitly opt out with the --no-typescript flag. The CLI will walk you through an interactive setup where you can choose templates like "clean" (minimal starter) or "blog" (pre-configured content types).

Official Starter Templates

The Sanity team maintains several official TypeScript templates on GitHub:

All of these include TypeScript configuration out of the box and serve as excellent reference projects.

TypeScript Type Generation

For transitioning your existing studio, you'll want to use the sanity typegen CLI command. This generates TypeScript types from your schemas automatically:

# Extract your schema
npx sanity@latest schema extract

# Generate types
npx sanity@latest typegen generate

This creates a sanity.types.ts file with types for all your schema types, which you can then import throughout your project. The generated types work great with the Sanity client for type-safe queries and mutations.

Sanity also offers a free course called "Typed content with Sanity TypeGen" that covers schema extraction, type generation, and working with GROQ query types using the defineQuery helper.

For a quick start with a clean TypeScript Studio, just run npx sanity@latest init and follow the prompts!

There are a few! I’d say take a look at any official starters. This one specifically.
This is great!
user M
Do you know of an example with typescript and desk structure? I have my projects organized with a 
desk
folder which has the structured format such as this 
index.js
(within my desk folder):
import { home } from './home'
import { projects } from './projects'
import { posts } from './posts'
import { settings } from './settings'

export const structure = (S) =>
  S.list()
    .title('Content')
    .items([
      home(S),
      projects(S),
      posts(S),
      S.divider(),
      settings(S),
      S.divider()
    ])
The example you shared is great for schemas, but I was wondering if there is a desk structure example (I would like to make my 
index.js
into 
index.ts
with the proper imports from sanity with typescript).
if you’re using vscode you can command click on the desktool() function and find the types to use for structure builder https://share.cleanshot.com/cW1qTfHB
you can do this for entire config object and it should show you the types of the props for the defineConfig function
your function just needs 
S: StructureBuilder
from 
_from_ 'sanity/desk'
Hey
user J
this is awesome. Thanks for the tip on that I had no idea I could just see the types!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?