Bug: React.forwardRef component defaultProps not working

[XenoBino]

React version: 18.2.0

Steps To Reproduce

import { forwardRef } from "react";

export interface PropsType {
  name: string,
}

const RefTest = forwardRef<HTMLInputElement, PropsType>((props, ref) => {
  return (
      <input
	    type="text"
		placeholder="test"
		ref={ref}
	  />
  );
});

RefTest.defaultProps = {
  name: "test"
};

export { RefTest };

<RefTest /> // Property 'name' is missing in type '{}' but required in type 'PropsType'.

The current behavior

Property 'name' is missing in type '{}' but required in type 'PropsType'.

The expected behavior

It should compile fine. This code is similar to the one suggested in #16653 (link to comment)

[znareak]

You should check this posts, maybe you can fix your problem:

#16653
typescript-cheatsheets/react#199

[eps1lon]

Closing since this is a usage question related to TypeScript that was answered by znareak

[XenoBino]

I insist that there IS a problem. Using the answer in the link above raises another issue, props (from the component's perspective) are now nullable, meaning that you need to null check them. defaultProps are supposed to provide the component with defaults so that it doesn't need to null check. For example:

import React, { useState } from "react";

const defaultProps = {
  validate: (value: string) => (value === "hello")
};

export type TestProps = {
  firstName: string,
  lastName: string
} & Partial<typeof defaultProps>;

const TestRef = React.forwardRef<HTMLInputElement, TestProps>((props, ref) => {
  const [valid, setValid] = useState(false);

  return (
    <>
      <div>{props.firstName} {props.lastName}</div>
      <input
        ref={ref}
        onChange={ (e) => {
          setValid(props.validate(e.target.value)) // ■ Cannot invoke an object which is possibly 'undefined'.
        }}
      />
      <span>{ valid ? "valid" : "invalid" }</span>
    </>
  );
});

TestRef.defaultProps = defaultProps;

export { TestRef };

The error which says Cannot invoke an object which is possibly 'undefined' is not supposed to happen as the value will always be defined (thanks to defaultProps). If I put a @ts-ignore in front of it it goes and defaultProps function without a problem. This suggests that there IS a problem with the type definitions.