👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect

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.

If you initiate a Sanity Studio with the CLI, then TypeScript will be the default. Sanity Studio uses Vite to perform the transpilation of TypeScript files.

Gotcha

If you customize the Studio with your own React components, that is, using JSX syntax, you will have to (re)name the file as .tsx.

Inline documentation with TSDoc

The Sanity Studio codebase uses TSDoc for inline documentation. This is still a work in progress. However, you can already inspect if an API is considered internal, beta, or public:

  • @internal: Not considered as stable for public consumption. If you rely on internal APIs, they might break between minor semver releases
  • @beta: APIs that we intend to ship as public-facing, but that we are testing externally and might be subject to change between minor semver releases. We will make our best effort to document breaking changes for @beta APIs in the release notes.
  • @public: These are public APIs that you can use confidently. Breaking changes will only happen in major semver releases and will be documented.

Default tsconfig.json

If you initiate a studio project using the Sanity CLI and don't opt out of TypeScript, then it will generate the following tsconfig.json:

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Was this article helpful?