Default property value in React component with extended props using TypeScript 3

1
votes

I am using support for defaultprops in jsx like described in https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#support-for-defaultprops-in-jsx

Everything works fine except in case when I extend props with another interface. In this case I extend my props inside child component like

interface Props extends WithNamespaces { className: string; }

and declare default props:

const defaultProps = { className: '' };

*WithNamespaces is an interface from react-i18next

In my parent component I get compile error that property className is missing for child component even though it should be optional, right?

Is there something that should be done differently to keep these default props not mandatory?

1
reactjstypescript

1 Answers

1
votes

Props requires className prop. In case it's optional, depending on how the interface is used, it should be marked as such either in interface itself:

interface Props extends WithNamespaces {
  className?: string;
}

Or a place where it's used:

class Comp extends Component<Partial<Props>> {
  static defaultProps: Props = {
    className: ''
  }; 
  ...
}