Proposal to change this.props inference based on props and defaultProps.

[azizhk]

Search Terms

defaultProps, react, jsx

Suggestion

Currently while defining defaultProps we define our component something like this:

interface ABCProps {
  requiredProp: number;
  notRequiredProp: number; // Need to remember not to add ?
}

class ABC extends React.PureComponent<ABCProps> {
  static defaultProps = {
    notRequiredProp: 1
  }
  render () {
    // By not addiing ? in Props we don't need to check for undefined.
    const { notRequiredProp } = this.props
    return (
      <div>{notRequiredProp + 1}</div>
    )
  }
}

But if we need to use ABCProps somewhere else, maybe as a part of parent component or if we create an object of type ABCProps, we will need to define the notRequiredProp as well.

const a: ABCProps = {
  requiredProp: 1,
  notRequiredProp: 2 // This is needed.
}

We can have two options:

1. Define ABCProps' optional props with ? and have component instances this.props be derived from ABCProps and defaultProps. (Breaking change)

interface ABCProps {
  requiredProp: number;
  notRequiredProp?: number; // ? added
}

class ABC extends React.PureComponent<ABCProps> {
  static defaultProps = {
    notRequiredProp: 1
  }
  render () {
    // this.props here !== ABCProps as is
    // typeof this.props === {
    //   [k in keyof ABCProps]: ABC.defaultProps[k] ? NonUndefined<ABCProps[k]> :  ABCProps[k]
    // }
    const { notRequiredProp } = this.props
    return (
      <div>{notRequiredProp + 1}</div>
    )
  }
}

2. Define ABCProps' optional props without ? but have ABC["props"] be a modified version of ABCProps such that it makes the keys present in defaultProps as optional.

interface ABCProps {
  requiredProp: number;
  notRequiredProp: number; // Need to remember not to add ?
}

class ABC extends React.PureComponent<ABCProps> {
  static defaultProps = {
    notRequiredProp: 1
  }
}

// typeof ABC["props"] === {
//   [k in keyof ABCProps]: ABC.defaultProps[k] ? NonUndefined<ABCProps[k]> :  ABCProps[k]
// }

// typeof ABC["props"] !== ABCProps as is

const a: ABC["props"] = {
  requiredProp: 1
}

Use Cases & Examples

Should be able to reuse a Component's Props without having to define optional props as well.

Checklist

My first option would be a breaking change as people have started following advice from https://github.com/sw-yx/react-typescript-cheatsheet#typing-defaultprops.

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• 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.

Maybe related: #28954
cc: @Kovensky because you are awesome.

[weswigham]

If you're looking for a way to name your component's external props interface without repeating yourself, you want to do something like:

import React from "react";

interface ABCPropsInternal { // Shape of the props used within the component
    requiredProp: number;
    notRequiredProp: number;
}

class ABC extends React.PureComponent<ABCPropsInternal> {
    static defaultProps = {
        notRequiredProp: 1
    }
    render() {
        // By not addiing ? in Props we don't need to check for undefined.
        const { notRequiredProp } = this.props
        return (
            <div>{ notRequiredProp + 1}</div>
      )
    }
  }

type ABCProps = JSX.LibraryManagedAttributes<typeof ABC, ABCPropsInternal>; // Calculates external props shape

const props: ABCProps = {
    requiredProp: 0
};

const component = <ABC {...props} />;

[azizhk]

Thank you so much.