How can I utilize TypeScript in my Storyblok project?

If you would like to use TypeScript in your Storyblok project(s), the Universal JavaScript Client, the JavaScript SDK, as well as Storyblok's framework-specific SDKs for React, Vue, Nuxt, Svelte, Astro, and Gatsby, offer full TypeScript support. This results in a significantly improved developer experience, offering auto-completion, static typing, warnings, and more.

It is highly recommended to the Storyblok CLI to generate types for the components defined in the Block Library of your Storyblok space.

To get started, follow these steps:

1. Install the Storyblok CLI: npm i -g storyblok.
2. Login using storyblok login in your terminal and follow the steps.
3. In your project directory, download the schema of your Storyblok components in a .json file by running storyblok pull-components --space SPACE_ID. It is recommended to add this command to the scripts section of your package.json, e.g. under the identifier pull-sb-components.
4. In your project directory, generate TypeScript types based on the downloaded schema by running storyblok generate-typescript-typedefs --sourceFilePaths ./components.SPACE_ID.json --destinationFilePath ./component-types-sb.d.ts. It is recommended to add this command to the scripts section of your package.json, e.g. under the identifier generate-sb-types.
5. Import the type in each component, for example: import type { PageStoryblok } from '../component-types-sb'.
6. Remember to rerun the pull-sb-components and generate-sb-types scripts after you've made changes to your component schema in your Storyblok space.

Please refer to the documentation of Storyblok CLI for advanced use cases, customization options, and more.