英文:

Storybook extend component interface for story controls only

问题

Here's the translated code portion you requested:

我有一个使用 framer-motion 动画进出的模态框，代码如下：

```jsx
<AnimatePresence>
    { isOpen && <Modal /> }
</AnimatePresence>

正如您所看到的，模态框不接受 isOpen 属性，而是基于父组件的状态在 DOM 中显示。在 Storybook 中，我尝试在 storybook actions 中添加这个 isOpen 布尔值，但是我遇到了扩展 StoryObj 类型的 TypeScript 错误。

const meta = {
    component: Modal,
    argTypes: {
        // 在这里添加模态框的参数类型
    },
    args: {
        isOpen: {
            description: '切换模态框的打开和关闭状态',
            control: 'boolean',
            table: {
                category: '行为',
                defaultValue: { summary: false },
            },
        },
    },
    parameters: {
        layout: 'centered',
        controls: {
            expanded: true,
        },
    },
} 满足 Meta<typeof Modal & { isOpen: boolean }>;

export default meta;

type Story = StoryObj<typeof Modal & { isOpen: boolean }>;

export const Modal: Story = {
    render: (args: any) => {
        const [{ isOpen }] = useArgs();

        return <Modal {...args} />;
    },
};

我遇到的错误是关于 Storybook 获取推断组件类型时，isOpen 不是存在于模态框上的类型。

我正在尝试扩展 story 接口以便在控件中拥有 isOpen，但是当我尝试扩展 type Story = StoryObj<typeof Modal> 时，我一直收到这个 TypeScript 错误：

Type '{ isOpen: true; }' 无法分配给类型 'Partial<Props>'。
对象文字只能指定已知属性，'isOpen' 不在类型 'Partial<Props>' 中

Please note that I've provided a translation of the code portion while maintaining the code structure. If you have any specific questions or need further assistance, please let me know.

<details>
<summary>英文:</summary>

I have a modal that I animate in and out using framer-motion that looks something like this.

<AnimatePresence>
{ isOpen && <Modal /> }
</AnimatePresence>

As you can see the modal does not accept an isOpen prop and instead is shown in the DOM based on the parent state. In `storybook` I am trying to add this `isOpen` boolean in the storybook actions but I am running into Typescript errors extending the StoryObj type

const meta = {
component: Modal,
argTypes: {
// Modal Arg Types here
}
args: {
isOpen: {
description: 'Toggle the modal open and closed',
control: 'boolean',
table: {
category: 'Behaviour',
defaultValue: { summary: false },
},
},
parameters: {
layout: 'centered',
controls: {
expanded: true,
},
},
} satisfies Meta<typeof Modal & { isOpen: boolean }>

export default meta

type Story = StoryObj<typeof Modal & { isOpen: boolean }>

export const Modal: Story = {
render: (args: any) => {
const [{ isOpen }] = useArgs()

    return <Modal {...args} />
},

}

The error I am getting is referencing the fact that `isOpen` is not a type that exists on `modal` when storybook is getting the inferred component type.

I am trying to extend the story interface in order to have `isOpen` in my controls but when I try to extend `type Story = StoryObj<typeof Modal>` I keep getting this typescript error

Type '{ isOpen: true; }' is not assignable to type 'Partial<Props>'.
Object literal may only specify known properties, and 'isOpen' does not exist in type 'Partial<Props>'

</details>


# 答案1
**得分**: 1

"Add args:

type Story = StoryObj<typeof Modal> & { args: { isOpen?: boolean } };

<details>
<summary>英文:</summary>

Add args:

type Story = StoryObj<typeof Modal> & { args: { isOpen?: boolean } };

</details>