Using ES6 def. values for React component gives type error

[egonm12]

React defaultProps will be deprecated in future releases (see PR). Therefore I want to use es6 default values.

TypeScript Version: 3.7.0-dev.20190822

Search Terms:

• Use es6 default values in React functional component instead of defaultProps

Code
The React component

import React from "react";

MyComponentProps {
  name: string;
}

export const MyComponent = ({ 
  name = "Jack" 
}: MyComponentProps) => (
  <div>
    <p>
      Hello {name}
    </p>
  </div>
)

The place where I use it

import React from "react";
import { MyComponent } from "./components"

const MyApp = () => <MyComponent />

TS2741: Property 'name' is missing in type '{}' but required in type 'MyComponentProps'

Expected behavior:
No type error as the default value is already defined

Actual behavior:
Typescript says that property is missing.

[RyanCavanaugh]

You declared the property as required, so it's required. If you want the property to be optional, mark it optional:

interface MyComponentProps {
  name?: string;
}

TypeScript will understand that the name parameter is always not undefined in the body of the function.

[egonm12]

Of course, that does make sense indeed. The strange thing however is that TypeScript doesn't complain when you use Component.defaultProps and leave the the name property in the interface required. That confused me.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.