描述bug
我不确定这是否更适合归类为docgen库,但还是说一下吧 🤔 😅
当同时使用Typescript和prop-types
时,当前的行为是偏向于prop-types
的定义。这意味着在使用两者都存在的情况下,对于类型定义中的每个键,propTypes
必须被定义,否则它将不会显示在我们的属性表中。
当所有属性都被定义后,输出类型将来自propTypes
而不是Typescript。这一直很困难,因为我们的库既被Typescript消耗,也被Javascript消耗。
其次,当一个defaultProps
值等于undefined
时,函数初始化值不会被用作默认值。相反,默认值保持为-
。
重现
要重现这种行为,请在typescript kitchen sink中的组件中添加propTypes
。要查看defaultProps
问题,请为在undefined
中定义的每个键添加相应的propTypes
值。
示例:
type IntrinsicButton = JSX.IntrinsicElements['button'];
const buttonSizes = ['small', 'medium', 'large'] as const;
export type ButtonSize = typeof buttonSizes[number];
export interface ButtonProps extends IntrinsicButton {
size?: ButtonSize;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>({
type = 'button',
size = 'large',
children,
className,
...props,
}, ref) => (
<button
type={type}
{...props}
className={classNames(classes.button, {
[classes.small]: size === 'small',
[classes.medium]: size === 'medium',
[classes.large]: size === 'large',
}, className)}
ref={ref}
>
{children}
</button>
);
Button.propTypes = {
type: PropTypes.oneOf(['button', 'reset', 'submit']),
size: PropTypes.oneOf(buttonSizes),
children: PropTypes.node,
className: PropTypes.string,
};
// This bit is required by my team's lint rules :(
Button.defaultProps = {
type: undefined,
size: undefined,
children: undefined,
className: undefined,
};
Button.displayName = 'Button';
export default Button;
预期行为
我希望Typescript具有优先级,并且在Typescript和prop-types
之间合并类型定义。
截图
预期
实际
系统
我无法运行此命令—这个提示( npx sb@next info
)过时了吗?
4条答案
按热度按时间6vl6ewon1#
我认为这需要作为
react-docgen-typescript
.cc @hipstersmoothie的一部分来实现。我不确定最好的解决方法是什么。也许你可以基于propTypes定义自定义argTypes?这些将优先于docgen结果。https://storybook.js.org/docs/react/writing-docs/doc-blocks#customizing
vfhzx4xs2#
大家好!最近似乎没有太多关于这个问题的进展。如果还有问题、评论或错误,请随时继续讨论。遗憾的是,我们没有时间处理每一个问题。我们始终欢迎贡献,所以如果你想帮忙,请发送一个pull request。30天后未活跃的问题将被关闭。谢谢!
brgchamk3#
有人找到配置这个的方法了吗?我仍然遇到相同的问题,即propTypes优先于TypeScript定义。
roejwanj4#
晚回答,但你可以在 React 中添加一个
FunctionComponent
并从绑定的函数中移除propTypes
,然后将修改后的函数传递给 Storybook。这保留了组件的所有其他功能,你可以在使用 TypeScript 的静态类型检查和动态
propTypes
验证的同时,享受所有在 Storybook 中定义的 TypeScript 类型的属性。