Typescript error from defaultProps on React FunctionComponent

Question

I have the following React Functional Component:

import React, { memo } from 'react';

interface Props {
  buttonType?: JSX.IntrinsicElements['button']['type'];
  text: string;
};

const defaultProps = {
  buttonType: 'button',
};

const Button: React.FunctionComponent<Props> = ({
  buttonType,
  text,
}) => (
  <button type={buttonType}>
    {text}
  </button>
);

Button.defaultProps = defaultProps;

export default memo(Button);

This throws a Typescript error:

Type '{ buttonType: string; }' is not assignable to type 'Partial<Props>'.

This is how I usually write stateless components, and the error here is because I'm assigning defaultProps to the component. The error goes away if I write the defaultProps declaration as:

Button.defaultProps = {
  buttonType: 'button',
};

Why do I get the error when assigning defaultProps from a const, but not if I do it all inline? Isn't it the same thing?

Phillip · Accepted Answer · 2019-06-06 11:12:41Z

1

You have to specify the type of buttonType on your defaultProps object. This is automatically inferred to be JSX.IntrinsicElements['button']['type'] when you use Button.defaultProps, but when you create a fresh object, it sees it as a string.

const defaultProps: Partial<Props> = {
  buttonType: 'button',
}

Should work

answered Jun 6, 2019 at 11:12

Phillip

6,3033 gold badges26 silver badges36 bronze badges

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

3 Comments

CaribouCode Over a year ago

Aaah right. Would it be good practice to always declare const defaultProps: Partial<Props> = { for defaultProps in all components to avoid things like this in future?

Phillip Over a year ago

In my opinion, I like to just use Component.defaultProps directly. It's much cleaner. Otherwise, yeah I'd recommend that you specify the type -- as said, in this example Typescript cannot infer it.

CaribouCode Over a year ago

Fair enough. The only reason I write it as a const is so it can sit at the top by the type definition for Props. This way it's immediately clear what props are required and what they default to at the top of the file. It feels messy splitting this information between the top and bottom of the file.

Collectives™ on Stack Overflow

Typescript error from defaultProps on React FunctionComponent

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related