Is there documentation, or a reference, for Typescript?

Developing with Prismic
1

Hi,
I'm just starting out trying to get Prismic working with our Next.js app. We're using Typescript, and I'm having a tough time trying to get things to work with Typescript.

My specific issue:
I created a slice using SliceMachine, and that created a .js component. I converted that to .tsx, and found some examples on this forum that helped me create a type for the slice, that seemed to work. But that then wasn't compatible with the slice-simulator.tsx.

I can't seem to find documentation that will help... Is there any documentation out there..?

3

So to go into more detail... I followed this example to add types to the component created by SliceMachine.

This is what my component looks like:

import {
  PrismicLink,
  PrismicText,
  SliceComponentProps,
} from '@prismicio/react';
import * as prismicT from '@prismicio/types';

export type SocialMediaServiceSlice = prismicT.Slice<
  'footer_social_media_service',
  {
    'social-media-service': prismicT.RichTextField;
    'social-media-link': prismicT.LinkField;
  }
>;

const FooterSocialMediaService = ({
  slice,
}: SliceComponentProps<SocialMediaServiceSlice>) => (
  <li>
    {slice.primary['social-media-link'] ? (
      <PrismicLink field={slice.primary['social-media-link']}>
        {slice.primary['social-media-service'] ? (
          <PrismicText field={slice.primary['social-media-service']} />
        ) : (
          <span>A social media service</span>
        )}
      </PrismicLink>
    ) : null}
  </li>
);

export default FooterSocialMediaService;

But that creates an issue in the slice-simulator.tsx with the components prop on the SliceZone component.

The full error is:

Type '{ footer_social_media_service: ({ slice, }: SliceComponentProps<SocialMediaServiceSlice, unknown>) => JSX.Element; }' is not assignable to type 'SliceZoneComponents<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>'.
  Property 'footer_social_media_service' is incompatible with index signature.
    Type '({ slice, }: SliceComponentProps<SocialMediaServiceSlice>) => JSX.Element' is not assignable to type 'SliceComponentType<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>'.
      Type '({ slice, }: SliceComponentProps<SocialMediaServiceSlice>) => JSX.Element' is not assignable to type 'FunctionComponent<SliceComponentProps<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>>'.
        Types of parameters '__0' and 'props' are incompatible.
          Type 'PropsWithChildren<SliceComponentProps<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>>' is not assignable to type 'SliceComponentProps<SocialMediaServiceSlice, unknown>'.
            Types of property 'slice' are incompatible.
              Type 'Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<string, AnyRegularField>, Record<...>>>' is not assignable to type 'SocialMediaServiceSlice'.
                Type 'Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>>' is not assignable to type 'Slice<"footer_social_media_service", { 'social-media-service': [] | [RTNode, ...RTNode[]]; 'social-media-link': FilledLinkToDocumentField<string, string, never> | EmptyLinkField<...> | FilledLinkToWebField | FilledLinkToMediaField; }, Record<...>>'.
                  Type 'string' is not assignable to type '"footer_social_media_service"'.ts(2322)
index.d.ts(686, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & SliceZoneProps<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<...>, unknown>'

Apart from the example I followed, I can't find anything else to help...
Is there anyone with any tips?

4

Hello @mano.mylvaganam, thanks for reaching out.

We don't have documentation for TS just yet. But we'll have automatic type generation with Slice Machine in the future. If you're interested you can already check it out here:

And yes, @prismicio/types is the source of types for Prismic data, Slices need to be typed with it.
Which version of the Slice simulator are you using?
Can you try upgrading and trying again?

5

Hi @Pau,
Thanks for the reply. Looks like we have the latest version of Slice simulator...
(from our lock file)

    "node_modules/@prismicio/slice-simulator-react": {
      "version": "0.2.2",

I'll try that CodeGen package and see what it gives me.

Thanks.

1 Like