javascript - Ce tip are o poveste Storybook din exemplu

Am folosit niște cod din exemplul de pe site-ul Storybook, în special:

export const Primary = Primary.decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>]

Totuși, chiar dacă acesta este exemplul în TypeScript, nu specifică un tip pentru Story și linter-ul meu nu va trece decât dacă are un tip. Ce tip ar trebui să folosesc pentru Story?

Story: any

de asemenea nu va trece.

Referință: https://storybook.js.org/docs/react/writing-stories/decorators

Răspuns #1

Odată cu noul format de poveste (CSF 3), tipurile au fost actualizate :

• tipul Story este învechit
• tipul corect este acum StoryFn

Semnătura tipată corectă a decoratorului este :

import { StoryFn } from '@storybook/react';

export const decorators = [(Story: StoryFn) => <div style={{ margin: '3em' }}><Story/></div>]

Răspunsul #2

Poți afla ce fel de proprietăți cerem de la Story în funcție de modul în care îl folosim. Ne așteptăm ca acesta să fie ceva ce poate fi apelat prin JSX fără argumente și să returneze un element. Așadar, ai putea folosi (Story: React.FC) și asta ar funcționa.

Așa cum este arătat în acest exemplu, puteți importa tipul Meta din @storybook/react și să îl folosiți ca tip pentru Primary.

import { Meta } from "@storybook/react";

const Primary: Meta = {
  title: "MyStory",
  decorators: [
    (Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    )
  ]
};

Tipul pe care îl tastează pentru Story aici este dedus ca () => StoryFnReactReturnType.

De asemenea, ai putea importa tipul pentru Story:

import { Story } from "@storybook/react";

export default {
  title: "MyStory",
  decorators: [
    (Story: Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    )
  ]
};