Type check JSX defaultProps as Partial<Props>

[iansan5653]

Suggestion

Currently, JSX defaultProps are not type-checked; any value can be passed to the properties of this object. One would think that they could fix it by defining the type of defaultProps as Partial<Props> but of course this breaks the default handling of defaultProps where it marks all the props with keys in defaultProps as optional.

I suggest that instead, the compiler should check the value of defaultProps by treating it as Partial<Props> when checking it, but still use the actual value of it when handling it.

Use Cases

This is useful when writing any class-based react components. Currently I could set the default value of any prop to anything and no error will be shown, which is definitely a potential bug.

Examples

interface Props {
  example: number
}

export default class Button extends React.Component<Props> {
  static defaultProps = {
    example: "forty" // This should be an error, but it's not
  };

  render(): React.ReactNode {
    // render
  }
}

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code (it would raise errors for some code that already has errors)
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[RyanCavanaugh]

We don't hardcode React logic in the type system.

See #33892 for a proposal that would allow for this.

[iansan5653]

How is the defaultProps situation handled currently? Is this something built into react itself?

For example:

interface Props {
  requiredProp: string;
}

const Element extends Component<Props> {
  defaultProps = {
    requiredProp: "example"
  }

  render() {
    return <span>{this.props.requiredProp}</span>
    // Here requiredProp has type `string`, not `string | undefined`
  }
}

<Element /> // This is ok because here requiredProp has type `string | undefined`