Flow 给我 React Native 类型定义/代码的错误答案

【问题标题】：Flow is giving me errors for React Native type definitions/codeFlow 给我 React Native 类型定义/代码的错误
【发布时间】：2018-11-05 10:16:32
【问题描述】：

我刚开始使用 Flow，在使用它扫描 React Native 项目后遇到了一堆错误：

Error --------------------------- node_modules

Missing type annotation for `U`.

                   v--------------------------
   353|     return range.map(function(value) {
   354|       if (typeof value !== 'string') {
   355|         return value;
   356|       }
   357|       if (/deg$/.test(value)) {
   358|         const degrees = parseFloat(value) || 0;
   359|         const radians = degrees * Math.PI / 180.0;
   360|         return radians;
   361|       } else {
   362|         // Assume radians
   363|         return parseFloat(value) || 0;
   364|       }
   365|     });
            -^


Error ------------------------------------ node_modules/react-native/Librarie

Property `update` is missing in `AnimatedNode` [1].

   node_modules/react-native/Libraries/Animated/src/nodes/AnimatedValue.js:54
   54|     if (typeof node.update === 'function') {
                      ^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Animated/src/nodes/AnimatedWithChildre
   70|   __getChildren(): Array<AnimatedNode> {
                                ^^^^^^^^^^^^ [1]


Error -------------------------------------------- node_modules/react-native/

Cannot assign `!this.props.disabled` to `props.enabled` because property `ena

   node_modules/react-native/Libraries/Components/Switch/Switch.js:105:7
   105|       props.enabled = !this.props.disabled;
              ^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Components/Switch/Switch.js:101:19
   101|     const props = {...this.props};
                          ^^^^^^^^^^^^^^^ [1]


Error -------------------------------------------- node_modules/react-native/

Cannot assign `this.props.value` to `props.on` because property `on` is missi

   node_modules/react-native/Libraries/Components/Switch/Switch.js:106:7
   106|       props.on = this.props.value;
              ^^^^^^^^

References:
   node_modules/react-native/Libraries/Components/Switch/Switch.js:101:19
   101|     const props = {...this.props};
                          ^^^^^^^^^^^^^^^ [1]


Error -------------------------------------------- node_modules/react-native/

Cannot assign `this.props.value ? this.props.onTintColor : this.props.tintCol
property `trackTintColor` is missing in object literal [1].

   node_modules/react-native/Libraries/Components/Switch/Switch.js:108:7
   108|       props.trackTintColor = this.props.value ? this.props.onTintColo
              ^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Components/Switch/Switch.js:101:19
   101|     const props = {...this.props};
                          ^^^^^^^^^^^^^^^ [1]


Error ------------------------ node_modules/react-native/Libraries/Experiment

Property `setNativeProps` is missing in `React.Element` [1].

   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
   145|     if (this._listViewRef && typeof this._listViewRef.setNativeProps
                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
    58|   _listViewRef: ?React.Element<any> = null;
                         ^^^^^^^^^^^^^^^^^^ [1]


Error ------------------------ node_modules/react-native/Libraries/Experiment

Property `getScrollResponder` is missing in `React.Element` [1].

   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
   154|     if (this._listViewRef && typeof this._listViewRef.getScrollRespon
                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableLis
    58|   _listViewRef: ?React.Element<any> = null;
                         ^^^^^^^^^^^^^^^^^^ [1]


Error ----------------------------------------------- node_modules/react-nati

Cannot assign array literal to `scrollProps.style` because property `style` i

   node_modules/react-native/Libraries/Lists/VirtualizedList.js:908:7
   908|       scrollProps.style = [inversionStyle, this.props.style];
              ^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:893:25
                                v
   893|     const scrollProps = {
   894|       ...this.props,
   895|       onContentSizeChange: this._onContentSizeChange,
   896|       onLayout: this._onLayout,
   897|       onScroll: this._onScroll,
   898|       onScrollBeginDrag: this._onScrollBeginDrag,
   899|       onScrollEndDrag: this._onScrollEndDrag,
   900|       onMomentumScrollEnd: this._onMomentumScrollEnd,
   901|       scrollEventThrottle: this.props.scrollEventThrottle, // TODO: A
   902|       invertStickyHeaders: this.props.invertStickyHeaders !== undefin
   903|         ? this.props.invertStickyHeaders
   904|         : this.props.inverted,
   905|       stickyHeaderIndices,
   906|     };
            ^ [1]


Error --------------------------------------------- node_modules/react-native

Property `inLayout` is missing in object type [1].

   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1125:11
   1125|       if (frame.inLayout) {
                   ^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1474:6
   1474|   ): {length: number, offset: number} => {
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]


Error --------------------------------------------- node_modules/react-native

Property `debug` is missing in object type [1].

   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1649:25
   1649|       getItemLayout && !parentProps.debug && !fillRateHelper.enabled
                                 ^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:1567:18
                          v
   1567|     parentProps: {
   1568|       getItemLayout?: ?Function,
   1569|       renderItem: renderItemType,
   1570|     },
             ^ [1]


Error ----------------------------------------------- node_modules/react-nati

Property `disableYellowBox` is missing in object type [1].

   node_modules/react-native/Libraries/ReactNative/YellowBox.js:108:7
   108|   if (console.disableYellowBox) {
              ^^^^^^^^^^^^^^^^^^^^^^^^

References:
   C:\cygwin64\tmp\flow\flowlib_1ec88eef\core.js:806:22
                             v-
   806| declare var console: {
   807|   assert(condition: mixed, ...data: Array<any>): void;
   808|   clear(): void;
   809|   count(label: string): void;
   810|   debug(...data: Array<any>): void;
   811|   dir(...data: Array<any>): void;
   812|   dirxml(...data: Array<any>): void;
   813|   error(...data: Array<any>): void;
   814|   _exception(...data: Array<any>): void;
   815|   group(...data: Array<any>): void;
   816|   groupCollapsed(...data: Array<any>): void;
   817|   groupEnd(): void;
   818|   info(...data: Array<any>): void;
   819|   log(...data: Array<any>): void;
   820|   profile(name?: string): void;
   821|   profileEnd(name?: string): void;
   822|   table(tabularData: { [key: string]: any } | Array<{ [key: string]:
   823|   time(label: string): void;
   824|   timeEnd(label: string): void;
   825|   timeStamp(label?: string): void;
   826|   trace(...data: Array<any>): void;
   827|   warn(...data: Array<any>): void;
   828| };
        ^ [1]


Error ---------------------------------------------- node_modules/react-nativ

Property `ignoredYellowBox` is missing in object type [1].

   node_modules/react-native/Libraries/ReactNative/YellowBox.js:181:19
   181|     Array.isArray(console.ignoredYellowBox) &&
                          ^^^^^^^^^^^^^^^^^^^^^^^^

References:
   C:\cygwin64\tmp\flow\flowlib_1ec88eef\core.js:806:22
                             v-
   806| declare var console: {
   807|   assert(condition: mixed, ...data: Array<any>): void;
   808|   clear(): void;
   809|   count(label: string): void;
   810|   debug(...data: Array<any>): void;
   811|   dir(...data: Array<any>): void;
   812|   dirxml(...data: Array<any>): void;
   813|   error(...data: Array<any>): void;
   814|   _exception(...data: Array<any>): void;
   815|   group(...data: Array<any>): void;
   816|   groupCollapsed(...data: Array<any>): void;
   817|   groupEnd(): void;
   818|   info(...data: Array<any>): void;
   819|   log(...data: Array<any>): void;
   820|   profile(name?: string): void;
   821|   profileEnd(name?: string): void;
   822|   table(tabularData: { [key: string]: any } | Array<{ [key: string]:
   823|   time(label: string): void;
   824|   timeEnd(label: string): void;
   825|   timeStamp(label?: string): void;
   826|   trace(...data: Array<any>): void;
   827|   warn(...data: Array<any>): void;
   828| };
        ^ [1]


Error ----------------------------------------------- node_modules/react-nati

Property `disableYellowBox` is missing in object type [1].

   node_modules/react-native/Libraries/ReactNative/YellowBox.js:382:9
   382|     if (console.disableYellowBox || this.state.warningMap.size === 0)
                ^^^^^^^^^^^^^^^^^^^^^^^^

References:
   C:\cygwin64\tmp\flow\flowlib_1ec88eef\core.js:806:22
                             v-
   806| declare var console: {
   807|   assert(condition: mixed, ...data: Array<any>): void;
   808|   clear(): void;
   809|   count(label: string): void;
   810|   debug(...data: Array<any>): void;
   811|   dir(...data: Array<any>): void;
   812|   dirxml(...data: Array<any>): void;
   813|   error(...data: Array<any>): void;
   814|   _exception(...data: Array<any>): void;
   815|   group(...data: Array<any>): void;
   816|   groupCollapsed(...data: Array<any>): void;
   817|   groupEnd(): void;
   818|   info(...data: Array<any>): void;
   819|   log(...data: Array<any>): void;
   820|   profile(name?: string): void;
   821|   profileEnd(name?: string): void;
   822|   table(tabularData: { [key: string]: any } | Array<{ [key: string]:
   823|   time(label: string): void;
   824|   timeEnd(label: string): void;
   825|   timeStamp(label?: string): void;
   826|   trace(...data: Array<any>): void;
   827|   warn(...data: Array<any>): void;
   828| };
        ^ [1]


Error ---------------------------------------- node_modules/react-native/Libr

Property `prototype` is missing in `React.StatelessFunctionalComponent` [1].

   node_modules/react-native/Libraries/ReactNative/renderApplication.js:41:5
   41|     RootComponent.prototype != null &&
           ^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/ReactNative/renderApplication.js:24:18
   24|   RootComponent: React.ComponentType<Props>,
                        ^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]


Error --------------------------------- node_modules/react-native/Libraries/R

Property `__propTypesSecretDontUseThesePlease` is missing in `React.Stateless

   node_modules/react-native/Libraries/ReactNative/requireNativeComponent.js:
   122|         typeof componentInterface.__propTypesSecretDontUseThesePlease
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/ReactNative/requireNativeComponent.js:
    50|   componentInterface?: ?ComponentInterface,
                                ^^^^^^^^^^^^^^^^^^ [1]


Error -----------------------------------------------------------------------

我的 Flow 版本是 0.72.0，我的 React Native 版本是 0.55.3。我可能做错了什么？

【问题讨论】：

没关系。 RN总是有几个流错误=(
@KirillGlazunov 是的，但我该如何阻止他们？ :(
你可以忽略它）或向 flow 或 RN 提出 pull request（取决于问题出在哪里）
升级到 flow 时遇到完全相同的类型错误。

标签： javascript reactjs react-native babeljs flowtype

【解决方案1】：

lib.es5.d.ts 中的Array.map 方法被注释为

map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

存在泛型类型U，表示数组元素的类型，映射后由该方法返回。

当 Flow 抱怨 Missing type annotation for `U`. 时，很可能是因为 Flow 出于某种原因无法自动推断出该类型，您应该明确声明它：

function XXX(YYYY): (some_type | number)[] { // <-- you should explicitly declare return type here
  ...

  return range.map(function(value: some_type|string) { // <--- probably, more explicit typehint here as well
    if (typeof value !== 'string') {
      return value; // <-- return value is a 'some_type' here
    }
    if (/deg$/.test(value)) {
      const degrees = parseFloat(value) || 0;
      const radians = degrees * Math.PI / 180.0;
      return radians; // <-- return value is 'number' here
    } else {
      // Assume radians
      return parseFloat(value) || 0; // <-- return value is 'number' here
    }
  });
}

其余的错误主要来自 React 类型定义，因为它对 DOM 元素/节点的现有对象属性（如 readonly 等）和 ReactNative 类型提示的覆盖范围不完整，因为它们通常是不完整的。

【讨论】：