如何使用 defaultProps 为 React 函数组件定义接口而不会抛出缺少类型错误？

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>
);

Answer 1

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 .

Answer 2

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!