DEV Community

Discussion on: Default Props in React/TypeScript

View post

Replies for: Another "challenge" with the approach you've outlined here is that the requiredString and requiredNumber values only exist under the props object -...

Collapse
 
chico1992 profile image
chico1992 •

You could try something around these lines

export const MyTSComponent: React.FC<Props> = ({
    optionalString = "default",
    optionalBoolean = true,
    optionalNumber = 42,
    ...args
}) => {
    const props = { optionalString , optionalBoolean , optionalNumber, ...args};
    console.log(props);
    props.optionalString.split("");
    return (
        <>
            Here is MyComponent:
            <br />
            {props.children}
        </>
    );
};

whit this you would get a fully typed props object that you could use as you used to

Thread Thread
 
bytebodger profile image
Adam Nathaniel Davis •

I've actually built a helper function now that takes the existing props and a simple object that defines any default values and then returns it mapped to the Props type. I'll probably outline that in a near-future post.

Thanks for taking the time to point me along!