CODEWITHSUNDEEP
javascriptflowtype
tonsteri
tonsteri

Reputation: 705

Flow generics incompatible types

I'm running into flow type errors with generic props in a React component.

Props are generic, and have a property with an array of the generic type. Then in the Component's methods that use the array data i run into errors with types being incompatible.

Why would the class method inner() parameter data: T[] be incompatible with Props<T>.data when T is the same type?

My React component type is class MyComponent<T> extends React.Component<Props<T>>

Simplified version of the problem without React:

/* @flow */

type Props<ItemType> = {
  data: ItemType[],
  getValue: ItemType => string
}

class B<T> {
  props: Props<T>;

  // comment out props typedef and it works
  constructor(props: Props<T>) {
    this.props = props;
    this.inner(this.props.data);
  }

  inner = (data: T[]) => data.map(i => this.props.getValue(i))
}

---
gives the following type error:

14:     this.inner(this.props.data);
                   ^ Cannot call `this.inner` with `this.props.data` bound to `data` because `T` [1] is incompatible with `T` [2] in array element.
References:
4:   data: ItemType[],
           ^ [1]
17:   inner = (data: T[]) => data.map(i => this.props.getValue(i))
                     ^ [2]

same code in flow repl

Upvotes: 1

Views: 1450

Answers (1)

Dave Meehan
Dave Meehan

Reputation: 3201

Seems to be a bug in Class Fields

If you convert inner to 

inner(data: T[]) {
  return data.map(i => this.props.getValue(i))
}

It should work.

If you specifically require inner to be bound to this, then remember in your constructor to do: (except that doesn't work)

this.inner = this.inner.bind(this)

Upvotes: 1

Related Questions