Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences ā†’

Using TypeScript in Sanity Studio

How to use TypeScript with Sanity Studio

TypeScript is a superset of JavaScript that adds optional static typing to the language. You can learn more about TypeScript in their getting started guide.

Sanity Studio and Sanity CLI (from v1.148.0) support TypeScript out of the box. It uses babel to perform the transpilation. This means it should "just work" without any configuration - unless you customize the .babelrc configuration in your studio, in which case you'll have to manually add the typescript preset.

Your editor might complain about not being able to resolve certain imports starting with part: and all:part: - to work around this (if your studio doesn't already have it), you need to add a TypeScript configuration file to your project folder. Add a file named tsconfig.json and copy-paste the following code:

{
  "include": ["./node_modules/@sanity/base/types/**/*.ts", "./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "jsx": "react"
  }
}

With this config file, the part imports should now be typed as any. In the future, we will improve and type these imports more properly.

Gotcha

Sanity Studio uses a custom webpack configuration called the parts system to make it extensible and customizable. Currently these will have to be typed as any.

Was this article helpful?