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:
- Install the Storyblok CLI:
npm i -g storyblok
. - Login using
storyblok login
in your terminal and follow the steps. - In your project directory, download the schema of your Storyblok components in a
.json
file by runningstoryblok pull-components --space SPACE_ID
. It is recommended to add this command to thescripts
section of your package.json, e.g. under the identifierpull-sb-components
. - 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 thescripts
section of your package.json, e.g. under the identifiergenerate-sb-types
. - Import the type in each component, for example:
import type { PageStoryblok } from '../component-types-sb'
. - Remember to rerun the
pull-sb-components
andgenerate-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.