Converting the Gatsby Storyblok Boilerplate to TypeScript, how to write component interfaces?

I’m new to Storyblok and setting up a simple example based on the Gatsby Storyblok Boilerplate.
And, I am using Typescript.

How could I convert this component to Typescript without using “any”?

Please let me know if you have any advice or examples on how to write the interfaces needed for react Storyblok components. I’m not sure how to write an interface that contains blocks. The Grid component could contain any nestable component due to the block component.

I can use the Typescript “any” type (see example below) to convert the boilerplate example to Typescript, but I’m trying to avoid that.

import React, { FunctionComponent } from "react";
import Components from "../components/Components";
import SbEditable from "storyblok-react";

interface GridProps {
  props: any;
type Props = GridProps;

const Grid: FunctionComponent<Props> = ({ props }) => {
  return (
    <SbEditable content={props.blok}>
      <div className="container">
        <div className="row">
          { =>
            React.createElement(Components(blok.component), {
              key: blok._uid,
              blok: blok

export default Grid;


I am not a typescript expert, but I would start with this - and then discuss it on our Discord - there was already the discussion how to do typescript here. -

Here you can join us on Discord -