React.forwardRef/Typescript defaultProps not working

Question

We have a react component library for my own project. It was written in js (Customized material-ui library ;)) ). I have task to migrate components from js to ts, one by one.
Here is an example of component :

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;

When I try to use this component in main app, it gives such error

<Link>asdasd</Link>

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

But when I pass all props it works correctly:

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

It asks for required parameters such as color, component, and underline. Even if they were in defaultProps.
I tried to assign defaultProps when destructuring props in component :

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

But storybook documentation can't recognize these defaultProps.
I don't want to duplicate defaultValues just for storybook documentation.

So my question is, is there any ways to assign defaultValues by Component.defaultProps in typescript??

The errors will go away if you make those properties optional in LinkPropTypes, or if you use Partial<LinkPropTypes> as the type in your forwardRef. But if you do that then the component is not able to understand that props which were not required have been set through the defaultProps. — Linda Paiste
– Linda Paiste, Commented Feb 6, 2021 at 1:48

Medet · Accepted Answer · 2021-07-09 04:45:41Z

0

I decided to remove prop-types and left typescript interfaces all over library. Describing comment and default in interfaces solves my problem.

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';

};

answered Jul 9, 2021 at 4:45

Medet

731 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.forwardRef/Typescript defaultProps not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related