1

我们为我自己的项目提供了一个反应组件库。它是用 js 编写的（自定义材料-ui 库；）））。我的任务是将组件从 js 一个一个迁移到 ts。
这是组件的示例：

import * as React from 'react';
import classNames from 'classnames';

import Typography from '../Typography';

import styles from './link.scss';

type LinkPropTypes = {
    className: string,
    component: React.ElementType,
    children: React.ReactNode,
    color: 'error' | 'inherit' | 'initial' | 'primary' | 'secondary' | 'text-primary' | 'text-secondary',
    underline: 'none' | 'always' | 'hover',

};

const Link = React.forwardRef<HTMLElement, LinkPropTypes>((props, ref) => {
    const {
        color,
        component,
        underline ,
        className: classNameProp,
        ...restProps
    } = props;

    const className = classNames(
        styles[`link--underline-${underline}`],
        classNameProp,
    );

    return (
        <Typography
            className={className}
            color={color}
            component={component}
            ref={ref}
            {...restProps}
        />
    );
});

Link.displayName = 'Link';

Link.defaultProps  = {
    component: 'a',
    color: 'primary',
    underline: 'hover'
} ;
export default Link;

当我尝试在主应用程序中使用这个组件时，它给出了这样的错误

<Link>asdasd</Link>

Type '{ children: string; }' is missing the following 
properties from type 'PropTypes': component, color, underline

但是当我通过所有道具时，它可以正常工作：

<Link color="primary" underline="hover" component="a">asdasd</Link>

它要求提供所需的参数，例如颜色、组件和下划线。即使它们在 defaultProps 中。
我试图在解构组件中的道具时分配 defaultProps ：

const {
        color = "primary",
        component = "a",
        underline ="hover",
        className: classNameProp,
        ...restProps
    } = props;

但是故事书文档无法识别这些 defaultProps。
我不想仅为故事书文档复制 defaultValues。

所以我的问题是，有没有办法在打字稿中通过 Component.defaultProps 分配 defaultValues？

4

1 回答 1

0

我决定删除 prop-types 并在整个库中留下 typescript 接口。在界面中描述注释和默认值可以解决我的问题。

interface LinkPropTypes{
    className: string;
    component: React.ElementType;
    children: React.ReactNode; 
    /**
     * @default 'primary'
     */
    color: 'error' | 'inherit' | 'initial' | 'primary' | 'secondary' | 'text-primary' | 'text-secondary';
    /**
     * You can add comments
     * @default 'hover'
     */
    underline: 'none' | 'always' | 'hover';

};
于 2021-07-09T04:45:41.303 回答