How to define an interface for React function component with defaultProps without throwing missing type error?

Question

I've been searching through many forums and articles and did not find any successful way to define an interface for a function component in React that has required properties which are defined in defaultProps without throwing a "property is missing" Typescript error.

I've tried to set a default value directly in props but it doesn't work either. Is there any way or it's unresolved issue in React and Typescript?

To see this problem in action, I've provided CodeSandbox project.

type ButtonProps = {
  color: "white" | "green";
};

const Button: FunctionComponent<ButtonProps> = ({
  // First way to define default value
  color = "green",
  children
}) => <ButtonContainer>{children}</ButtonContainer>;

// Second way to define default value
Button.defaultProps = {
  color: "white"
} as Partial<ButtonProps>;

const ButtonContainer = styled.button<ButtonProps>`
  background-color: ${(props: ButtonProps) => props.color};
`;

const App: FunctionComponent = () => (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
    {/* Here is an error */}
    <Button>hello world</Button>
  </div>
);

@ford04 It's already in the question. The "Edit on CodeSandbox" button — Honza Sedloň
– Honza Sedloň, Commented Feb 13, 2020 at 17:18
oh, my ad-blocker did hide that 😊. Consider to paste the code here also, so the question remains valid, if the sandbox gets deleted. — ford04
– ford04, Commented Feb 13, 2020 at 17:23

wentjun · Accepted Answer · 2020-02-13 19:27:29Z

2

Since color is the only property on the ButtonProps type, you can use Partial, which will set the properties of the type as optional:

const Button: FunctionComponent<Partial<ButtonProps>> = ({
  // First way to define default value
  color = "green",
  children
}) => <ButtonContainer>{children}</ButtonContainer>;

Here is a working demo.

Edit:

Following up on your comment, this is what I would recommend. We can remove the defaultProps, and use ButtonProps to define the typings for ButtonContainer. On the Button component, you may simply spread the remaining props into the child ButtonContainer.

type ButtonProps = {
  color: "white" | "green";
  fontSize: string;
};

const Button: FunctionComponent<Partial<ButtonProps>> = ({
  // First way to define default value
  children,
  ...styleProps
}) => <ButtonContainer {...styleProps}>{children}</ButtonContainer>;

const ButtonContainer = styled.button<ButtonProps>`
  background-color: ${(props: ButtonProps) => props.color};
  font-size: ${(props: ButtonProps) => props.fontSize};
`;

const App: FunctionComponent = () => (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
    <Button color='green'>hello world</Button>
  </div>
);

Here is the updated demo.

edited Feb 13, 2020 at 19:27

answered Feb 13, 2020 at 17:38

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

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

4 Comments

Honza Sedloň Over a year ago

Thank you! And what should I do in case there was more properties?

wentjun Over a year ago

That really depends! are they optional?

Honza Sedloň Over a year ago

That's hard to tell. Imagine that you're building a styleguide. Button has for example 15 properties, 12 of them are optional. However you use most of them in styled-components and don't want to use non-null assertion operator because you know, they are defined in defaultProps

wentjun Over a year ago

Sorry, I am a bit confused now. I am not sure if this is what you want to achieve, but it definitely allows you to set them as optional, without using the non-null assertion operator. I added an additional property on the props as a demo.

nightElf · Accepted Answer · 2020-02-13 17:34:31Z

1

Change your ButtonProps like this

type ButtonProps = {
  color?: "white" | "green";
};

Making the color props optional. And then you can initialize it with a default value, just like you are doing.

const Button: FunctionComponent<ButtonProps> = ({
  // First way to define default value
  color = "green",
  children
}) => <ButtonContainer>{children}</ButtonContainer>;

Hope it helps!

answered Feb 13, 2020 at 17:34

nightElf

5222 silver badges4 bronze badges

1 Comment

Honza Sedloň Over a year ago

Thank you for your answer. However, this is exactly what I've wanted to avoid. I don't want to use optional properties because then you have to use non-null assertion operator

Collectives™ on Stack Overflow

How to define an interface for React function component with defaultProps without throwing missing type error?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related