Flow: How take prop type from memoized component?

Created on 28 Aug 2019  路  3Comments  路  Source: facebook/flow

Example:

//@flow
import * as React from 'react';
type Props = {
    thing: string
}
const Item = (props: Props) => (
    <div />
);

const Memoized = React.memo<Props>(Item);

const str1: $ElementType<React.ElementProps<typeof Item>, 'thing'> = '24'; // worked
const str2: $ElementType<React.ElementProps<typeof Memoized>, 'thing'> = '24'; //not worked

Live example:
https://flow.org/try/#0PTACDMBsHsHcCgCWBbADtATgFwAQCocBDAZxwCUBTQgY13A2mRwHIMrbmBueLAT1Qo4ACg1SkAvDgDe8AJBYAFogB2AcwBcOYlgwrV8AL7xq0ZdpwBJLBSaSAFKlHFNI6GICUOcQD4cduQA8ACaIAG44wN7w7tzGpuYAsjbQiABeFEFe5OxYAHTIyQGuYt52VjYx8HFmuNoYAIyaACQAopA2FMpYACr8FAGUNHltHV3FxAF8AtDgltbI3gA0LIp6zL6SzABMACzMILDQQQDWGdXmdVvNIwVdvQIDObk3nVjjk30zOEnIKelBSxWSjU6yy2z2IGU0FwhwwpyCQA

question

Most helpful comment

//@flow
import * as React from 'react';
type Props = {
    thing: string
}
const Item = (props: Props) => (
    <div />
);

const Memoized = React.memo<Props>(Item);

const str1: $ElementType<React.ElementConfig<typeof Item>, 'thing'> = '24' // works
const str2: $ElementType<React.ElementConfig<typeof Memoized>, 'thing'> = '24' // works now too

https://flow.org/try/#0PTACDMBsHsHcCgCWBbADtATgFwAQCocBDAZxwCUBTQgY13A2mRwHIMrbmBueLAT1Qo4ACg1SkAvDgDe8AJBYAFogB2AcwBcOYlgwrV8AL7xq0ZdpwBJLBSaSAFKlHFNI6GICUOcQD4cduQA8ACaIAG44wN7w7tzGpuYAsjbQiABeFEFe5OxYAHTIyQGuYt52VjYx8HFmuNoYAIyaACQAopA2FMpYACr8FAGUNHltHV0AwqbgiKoBfALQ4JbWyN4ANCyKesy+kswATAAszBHAOLCYANbE1eZ1e80jBV29AgM5uY+dWBPKUzNzFAWOCSyBS6SCaw2SjU2yy+yOJzOl1IyjgOCw0GgQA

All 3 comments

Switching to React.ElementConfig makes the error go away. I usually use React.ElementConfig because it preserves the optionality of defaultProps. Not sure why it fixes the issue here since defaultProps are at play.

Hi, @kevinbarabash! Can you show me some example for this way please?

//@flow
import * as React from 'react';
type Props = {
    thing: string
}
const Item = (props: Props) => (
    <div />
);

const Memoized = React.memo<Props>(Item);

const str1: $ElementType<React.ElementConfig<typeof Item>, 'thing'> = '24' // works
const str2: $ElementType<React.ElementConfig<typeof Memoized>, 'thing'> = '24' // works now too

https://flow.org/try/#0PTACDMBsHsHcCgCWBbADtATgFwAQCocBDAZxwCUBTQgY13A2mRwHIMrbmBueLAT1Qo4ACg1SkAvDgDe8AJBYAFogB2AcwBcOYlgwrV8AL7xq0ZdpwBJLBSaSAFKlHFNI6GICUOcQD4cduQA8ACaIAG44wN7w7tzGpuYAsjbQiABeFEFe5OxYAHTIyQGuYt52VjYx8HFmuNoYAIyaACQAopA2FMpYACr8FAGUNHltHV0AwqbgiKoBfALQ4JbWyN4ANCyKesy+kswATAAszBHAOLCYANbE1eZ1e80jBV29AgM5uY+dWBPKUzNzFAWOCSyBS6SCaw2SjU2yy+yOJzOl1IyjgOCw0GgQA

Was this page helpful?
0 / 5 - 0 ratings