Learning Flow

I recently came across the following flow type definition:

declare export type StyledShorthandFactory<V> = {|
  [[call]]: <StyleProps, Theme>(
    string[],
    ...Interpolation<PropsWithTheme<StyleProps, Theme>>[]
  ) => StyledComponent<StyleProps, Theme, V>,
  [[call]]: <StyleProps, Theme>(
    (props: PropsWithTheme<StyleProps, Theme>) => Interpolation<any>
  ) => StyledComponent<StyleProps, Theme, V>,
  +attrs: <A: { ... }, StyleProps = {||}, Theme = {||}>(
    (StyleProps => A) | A
  ) => TaggedTemplateLiteral<
    PropsWithTheme<{| ...$Exact<StyleProps>, ...$Exact<A> |}, Theme>,
    StyledComponent<
      React$Config<{| ...$Exact<StyleProps>, ...$Exact<A> |}, $Exact<A>>,
      Theme,
      V
    >
  >,
|};

flow-typed/flow-typed

It has taken me a while to read and understand this, not least due to how hard it has been to navigate the flow documentation to find answers, so I’ve broken it down in to sections and put all the resources I used to understand it below.

Shortened example

Taking out the context specific types, and removing some repeated complexity, we end up with this shortened example:

declare export type MyType<T> = {|
  [[call]]: <B>(D<B>) => C<B>,
  [[call]]: <B>(string[], ...D<B>[]) => C<B, T>,
  +property: <A: { ... }, B = {||}>((B => A) | A)
    => D<{| ...$Exact<B>, ...$Exact<A> |}, C<B, T>>,
|};

Try Flow | Flow

Declare export

Declaration Files | Flow

Creating Library Definitions | Flow

type MyType<T>

Generics

Generic Types | Flow

{| property: value|}

Exact Object Types

Object Types | Flow

[[call]]

This means that the object (interface?) being defined can also be called as a function. I think this is missing from the Flow documentation.

Flow 0.99: Callable Properties, Function Statics, and More

<B>() => C<B>

Function type with Generics

Generic Types | Flow

string[]

Array type shorthand syntax.

Also worth pointing out that this relates to Tagged Template Literals — a function that accepts an array of strings as its first parameter.

Template literals (Template strings)

Array Types | Flow

(…D<B>[]) => C<B>

The spread operator isn’t mentioned much in the flow documentation, but I am pretty sure this means a function that takes any number of parameters and all parameters must be of type D<B>.

A second [[call]] property

Can be called with different call signatures

niieani/typescript-vs-flowtype

Try Flow | Flow

+property

A read only interface property:

Interface Types | Flow

A: { … }

Explicit Inexact Object Type

Object Types | Flow

TL;DR: A is an inexact object. It must be an object but can contain any properties.

A = {||}

Default A to an exact empty object.

{| …$Exact<B>, …$Exact<A> |}

This is slightly confusing as it uses 2 different syntaxes for the same utility:

{| name: string |} is the “Exact object type”:

Object Types | Flow

$Exact<{name: string}> is a synonym for {| name: string |}

Utility Types | Flow

So by spreading the two exact object types, it creates a new exact object type containing the properties from A and B.