TypeScript usage? about react-portabletext

[eldoy]

// @ts-ignore is your friend.

[ottob]

This is how I did it:

import type { PortableTextBlock } from '@portabletext/types'

export type Recipe = {
  _id: string
  title: string
  tags?: [{ title: string; slug: { current: string } }]
  slug: { current: string }
  body: [PortableTextBlock] // <-- 🎉
  mainImage: {
    asset: {
      url: string
    }
  }
}

[rexxars]

Agreed. Anything in particular you're curious about?

The demo has some typescript code examples that might be useful in the meantime :)

[selbekk]

Well, mostly how I should type the block content I pass in :) I see in the demo app there's a repo called @portabletext/types - would be great to have a link to this in the docs, for instance :)

[swalker326]

I struggled with this for a good while. I'm still not sure I fully understand it, that being said I have auto completion so I'm happy. I also had a pretty simple case, in that I wanted to style my text blocks with Chraka.

Example type definitions I create, I'm sure there is a better way to do this with the included types but I couldn't figure it out.

type Block = {
  _key: string;
  _type: string;
}
type BlockChild = Block & {
  marks: string[];
  text: string;
}
export type BlockDefault = Block & {
  children: BlockChild[];
  style: string;
}

//My object shape in sanity.
type Author = SanityDocument & {
  name: string;
  picture: string;
  bio: BlockDefault;
  image: Image;
  projects: any[];
}

In my component I pass bio to <PortableText /> pass in which custom component to render for the type block.

<PortableText
            value={bio}
            components={{
              types: {
                block: PortableBioBlock,
              },
            }}
          />

My custom component PortableBioBlock looks like this:

import { Text } from "@chakra-ui/react";
import type { PortableTextTypeComponent } from "@portabletext/react";
import { BlockDefault } from "src/@types/Post";

export const PortableBioBlock: PortableTextTypeComponent<BlockDefault> = ({
  children,
}) => {
  return (
    <Text fontSize={"1.2rem"} letterSpacing={1.3} lineHeight={1.4}>
      {children}
    </Text>
  );
};

I'm not sure if this is any help, or if there are ways I could improve it

[tanettrimas]

I did something along these lines which worked nice for our use-case:

interface SanityResponse extends SanityDocument {
    beskrivelse: string;
    embeddedInnhold: PortableTextBlock[];
    maal: string;
    tittel: string;
}
function MyComponent() {
    const data: SanityResponse[] = await sanity.fetch(
        '*[_type == "Aktivitet"]'
    );
    return (
        <PortableText
            value={data.map(({ embeddedInnhold: innhold }) => ({ innhold }))}
            components={portableTextComponents}
        />
    );
}

I can write a simple PR updating the readme on simple typescript use/gotchas if preferable :)

[snorrees]

We just added a "typing portable text" section to the README, let me know if it is helpful https://github.com/portabletext/react-portabletext#typing-portable-text