为什么我的故事书组件的参数显示为可选而不是必需的?

Question

我有一个简单的加载器组件

import React from "react";
import { Backdrop, CircularProgress } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
export interface LoaderProps {
open: boolean;
}
const useStyles = makeStyles((theme) => ({
backdrop: {
zIndex: theme.zIndex.drawer + 1,
color: "#fff",
},
}));
const Loader: React.FC<LoaderProps> = ({ open }) => {
const classes = useStyles();
return (
<Backdrop className={classes.backdrop} open={open}>
<CircularProgress color="inherit" />
</Backdrop>
);
};
export default Loader;

故事是这样的:

import React from "react";
import Loader, { LoaderProps } from "./Loader";
import { Story } from "@storybook/react/types-6-0";
export default {
title: "Loader",
component: Loader,
excludeStories: /.*Data$/,
};
export const loader: Story<LoaderProps> = (args) => <Loader {...args} />;
loader.args = {
open: true,
};

当我悬停在打开在参数它说的类型可以是boolean | undefined而不是仅仅boolean?为什么这是当LoaderProps应该强制类型是boolean?

Answer 1

检查Story类型，定义为BaseStory<Args, StoryFnReactReturnType> & Annotations<Args, StoryFnReactReturnType>。

BaseStory在这里不是特别有趣或相关，但是Annotations有属性:args?: Partial<Args>.

在您的代码中，Args是LoaderProps，因此Annotations对象有一个可选属性args，它本身是所有LoaderProps属性的可选。也就是说，loader.args的类型是Partial<LoaderProps>，即{ open?: boolean }。因为它是可选的，所以它也可以是undefined。

至于为什么storybook这样做，我只能猜测，因为Annotation.args上类型定义中的类型文档中有一个死链接。如果args上的属性是必需的，那么您将有在Props定义中设置所有属性。