alisabzevari alisabzevari - 2 months ago 29
React JSX Question

How to define defaultProps for a stateless react component in typescript?

I want to define

defaultprops
for my pure functional component but I get a type error:

export interface PageProps extends React.HTMLProps<HTMLDivElement> {
toolbarItem?: JSX.Element;
title?: string;
}

const Page = (props: PageProps) => (
<div className="row">
<Paper className="col-xs-12 col-sm-offset-1 col-sm-10" zDepth={1}>
<AppBar
title={props.title}
zDepth={0}
style={{ backgroundColor: "white" }}
showMenuIconButton={false}
iconElementRight={props.toolbarItem}
/>
{props.children}
</Paper>
</div>
);

Page.defaultProps = {
toolbarItem: null,
};


I know that I can write this:

(Page as any).defaultProps = {
toolbarItem: null,
};


Is there a better way to add
defaultProps
?

Answer

You can type Page like this:

const Page: StatelessComponent<PageProps> = (props) => (
    // ...
);

Then you can write Page.defaultProps without needing to cast to any (the type of defaultProps will be PageProps).

Comments