Question

我在React组件中遇到了带有通用道具的流类型错误。

道具是通用的，并且具有带有泛型类型数组的属性。然后在Component的使用数组数据的方法中遇到类型不兼容的错误。

当inner()属于同一类型时，为什么类方法data: T[]参数Props<T>.data与T不兼容？

我的React组件类型为class MyComponent<T> extends React.Component<Props<T>>

没有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

Answer 1

似乎是a bug in Class Fields

如果将内部转换为

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

它应该有用。

如果您特别要求将内部绑定到this，请记住在构造函数中执行:( doesn't work除外）

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

Flow泛型不兼容的类型

1 个答案: