Infer Props using PropTypes.InferProps

InferProps.tsx

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

// Using PropTypes.InferProps

type InferPropTypes<
  PropTypes,
  DefaultProps = {},
  Props = PropTypes.InferProps<PropTypes>
> = {
  [Key in keyof Props]: Key extends keyof DefaultProps
    ? Props[Key] | DefaultProps[Key]
    : Props[Key]
};

// Test
const userPropTypes = {
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  active: PropTypes.bool
};

const userDefaultProps = {
  name: "Test"
};

type ActionProps = InferPropTypes<
  typeof userPropTypes,
  typeof userDefaultProps
>;

/*
  type ActionProps = {
    id: number;
    name: string;
    active?: boolean;
  }
*/

const Action = (props: ActionProps) => {
  return (
    <div>
      id: {props.id}
      name: {props.name}
      status: {props.active ? "active" : "inactive"}
    </div>
  );
};

Action.defaultProps = userDefaultProps;

render(<Action id={1} />, document.getElementById("root"));

Improvement to not add spurious nulls (for strict null checks):

 import { InferProps } from "prop-types";

 type InferPropTypes<
   PropTypes,
   DefaultProps = {},
   Props = InferProps<PropTypes>
  > = {
-  [Key in keyof Props]: Key extends keyof DefaultProps
+  [Key in keyof Props]-?: Key extends keyof DefaultProps
-    ? Props[Key] | DefaultProps[Key]
+    ? NonNullable<Props[Key]> | DefaultProps[Key]
     : Props[Key]
 };

• The -? makes it so props aren’t automatically unified with | undefined
• The NonNullable makes it so that only if the defaultProps entry is null or undefined will the actual type be null. This enables e.g.:

const myInputPropTypes = { onChange: PropTypes.func }
const myInputDefaultProps = { onChange: (value: string) => {} }
type MyInputProps = InferPropTypes<typeof myInputPropTypes, typeof myInputDefaultProps>

const MyInput = ({ onChange }: MyInputProps) => {
  // TypeScript will not complain that `onChange` might be nullish here!
  const handleChange = (e) => onChange(e.currentTarget.value);
  return ... onChange={handleChange} ...;
};

ideal also for js migration!

helpers.d.ts

declare global {
  type InferPropTypes<PropTypes, DefaultProps = {}, Props = InferProps<PropTypes>> = {
    [Key in keyof Props]-?: Key extends keyof DefaultProps ? NonNullable<Props[Key]> | DefaultProps[Key] : Props[Key]
  }
}

SomeComponent.js

/** @param {InferPropTypes<typeof someComponentPropTypes, typeof someComponentDefaultProps>} props */
const SomeComponent = ({ ... }) => { ... }