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

Question

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?

Estus Flask · Accepted Answer · 2019-02-06 10:52:45Z

1

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: ''
  }; 
  ...
}

answered Feb 6, 2019 at 10:52

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

2 Comments

alexv Over a year ago

But I did initialize className to '' inside defaultProps, as I stated in the question.

Estus Flask Over a year ago

Sorry, I missed the comment. Did the answer work for you?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related