Flow: Accessing type values on object types

[DanielHeath]

I've introduced my team to flow and it's mostly going well.

We're adding flow to an existing codebase, and there are several situations where a type is used in an object type and also in a function / class definition.

The following example has tripped up a few people and I think it should be something we could support:

type Props = {
    onClick: () => void,
    isOpen: boolean,
}

class MyComponent {
    onClick: Props.onClick
    isOpen: Props.isOpen

    constructor(props: Props) {
        this.isOpen = props.isOpen;
        this.onClick = props.onClick;
    }
}

I believe there's only one plausible implementation of Props.onClick - it should extract the onClick function type from the Props object type. Any interest in a PR to add support?

[TSMMark]

I'm having a similar issue. I use a generator to generate a nested Object type (based on a graphql schema).

export type ClaimsQuery = {
  media: {
    id: string,
    pretty_ugc_claims_count: string,
    pretty_ugc_claims_views: string,
    metadata: ? {
      id: string,
      policies: Array< {
        id: string,
        type: string,
      } >,
    },
  },
};

Since the Type Alias is dynamically generated I can not extract any of the nested types into their own types. This is unfortunate because I want to write a function which takes media from the above type ClaimsQuery as an argument.

renderMedia = (media: HOW_TO_TYPE_ME????) => {

Would love to be able to do something like:

renderClaims = (media: ClaimsQuery.media) => {

[erikdesjardins]

https://flow.org/en/docs/types/utilities/#toc-propertytype
FWIW $PropertyType<T, 'prop'> can be used for this, though it would be nice to be able to use T.prop

[TSMMark]

@erikdesjardins omg thank you ❤️

[AndersDJohnson]

4896 proposes a more terse way to use nested property type references too.

[TSMMark]

Anyone know how to extract the element-type from an Array type definition?

For example, I would like to get the type:

{
  id: string,
  type: string
}

from:

export type PoliciesQuery = {
  policies: Array< {
    id: string,
    type: string
  } >
}

[AndersDJohnson]

@TSMMark I'm not aware of a utility type for that, but maybe something like this:

/* @flow */

type List = Array<number>;

/*::
const __tmpList: List = [];
const __tmpItem = __tmpList[0];
type Item = typeof __tmpItem;
*/

// Now you have type "Item" which is an alias to "number".

[TSMMark]

@AndersDJohnson Amazing! Works like a charm ❤️ Now we just need a convenient syntax for it 😄

[vkurchatkin]

Anyone know how to extract the element-type from an Array type definition?

Unsurprisingly, $ElementType does just that:

type List = Array<number>;
type Item = $ElementType<List, number>;

[jcready]

I would argue that it is surprising, considering that utility type isn't documented.

[TSMMark]

@vkurchatkin Maybe if it was documented I would have discovered it 😆. I still can't find docs after searching... it must be pretty new.

However, it does work! Thanks

https://flow.org/try/#0C4TwDgpgBAChD2YA20C8UCCAnLBDEAPAN4A+AUFFAHa4C2EA-AFxQDOwWAllQOYA0FKLh6MWVAK60ARhCwCSAXwB8AbjJlQkWLNbwqUdABIAoinpVgAFXAQCcRCj7VJMrEvUBjPeyj0WcLF19dCJqOhYAIlxWABMIp2EISIBGAFYIqAUyIA