Accepted answer

You can type Page like this:

const Page: StatelessComponent<PageProps> = (props) => (
    // ...

Then you can write Page.defaultProps without needing to cast to any (the type of defaultProps will be PageProps).


This is fairly straightforward by using Javascript's own default function parameters, and with Typescript generics you will get strong correct type information both inside the component and in the outside world of component consumers.

import React, { FC } from "react";

interface MyComponentProps {
  name?: string;

const MyComponent: FC<MyComponentProps> = ({ name = "Someone" }) => {
  // note that Typescript knows that the property will never
  // be `undefined` inside this function
  return <div>Hello {name}</div>;

export default MyComponent;

And you can consume the component like so:

import React, { FC } from "react":
import MyComponent from "./MyComponent";

const ParentComponent: FC = () => {
  // Typescript knows that you name is optional
  // and will not complain if you don't provide it
  return (
      <MyComponent />
      <MyComponent name="Jane" />

export default ParentComponent;

Related Query

More Query from same tag