storybook Prefer TypeScript definitions to PropTypes

nfeuvbwi  于 6个月前  发布在  TypeScript
关注(0)|答案(4)|浏览(49)

描述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 )过时了吗?

6vl6ewon

6vl6ewon1#

我认为这需要作为react-docgen-typescript.cc @hipstersmoothie的一部分来实现。我不确定最好的解决方法是什么。也许你可以基于propTypes定义自定义argTypes?这些将优先于docgen结果。
https://storybook.js.org/docs/react/writing-docs/doc-blocks#customizing

vfhzx4xs

vfhzx4xs2#

大家好!最近似乎没有太多关于这个问题的进展。如果还有问题、评论或错误,请随时继续讨论。遗憾的是,我们没有时间处理每一个问题。我们始终欢迎贡献,所以如果你想帮忙,请发送一个pull request。30天后未活跃的问题将被关闭。谢谢!

brgchamk

brgchamk3#

有人找到配置这个的方法了吗?我仍然遇到相同的问题,即propTypes优先于TypeScript定义。

roejwanj

roejwanj4#

晚回答,但你可以在 React 中添加一个 FunctionComponent 并从绑定的函数中移除 propTypes,然后将修改后的函数传递给 Storybook。
这保留了组件的所有其他功能,你可以在使用 TypeScript 的静态类型检查和动态 propTypes 验证的同时,享受所有在 Storybook 中定义的 TypeScript 类型的属性。

相关问题