Live article: https://www.storyblok.com/faq/how-can-i-utilize-typescript-in-my-storyblok-project
- FAQ
- 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 use the storyblok-generate-ts package provided by Storyblok's ambassador Dominic Garms. In combination with the Storyblok CLI, you can 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 - In your project directory, save the schema of your Storyblok components in a
.json
file by runningstoryblok pull-components --space SPACE_ID
- Install storyblok-generate-ts:
npm i -D storyblok-generate-ts
- Add the following command to your package.json:
"generate-sb-types": "storyblok-generate-ts source=./components.[SPACE_ID].json target=./component-types-sb"
- Generate the types:
npm run generate-sb-types
- Import the type in each component, for example:
import type { PageStoryblok } from '../component-types-sb'
- Remember to rerun the
pull-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 and storyblok-generate-ts for advanced use cases, customization options, and more.