需要对对象文字进行注释的流程

Question

假设cx定义为：

var cx = require('classnames');

…我有以下 JSX 代码：

test: function(panelEnabled: boolean) {
    const klass = cx({disabled: !panelEnabled});
    return (<div className={klass}>foo</div>);
},

以上导致 Flow 0.35.0 抱怨以下消息：

app/components/target-resolution.js:20
 20:         const klass = cx({disabled: !panelEnabled});
                              ^^^^^^^^^^^^^^^^^^^^^^^^^ object literal. Could not decide which case to select
 17:     ...classes: Array<$npm$classnames$Classes>
                           ^^^^^^^^^^^^^^^^^^^^^^^ union type. See lib: flow-typed/npm/classnames_v2.x.x.js:17
  Case 2 may work:
    8:   {[className: string]: boolean } |
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. See lib: flow-typed/npm/classnames_v2.x.x.js:8
  But if it doesn't, case 3 looks promising too:
    9:   {[className: string]: ?boolean } |
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. See lib: flow-typed/npm/classnames_v2.x.x.js:9
  Please provide additional annotation(s) to determine whether case 2 works (or consider merging it with case 3):
   20:         const klass = cx({disabled: !panelEnabled});
                                           ^^^^^^^^^^^^^ not operator

我可以通过以下两种方法之一解决此问题：

丑陋但不改变方法的API

test: function(panelEnabled: boolean) {
    const klassSpec: {disabled: boolean} ={disabled: !panelEnabled}; 
    const klass = cx(klassSpec);
    return (<div className={klass}>foo</div>);
},

更短但需要更改 API

test: function(panelDisabled: boolean) {
    const klass = cx({disabled: panelDisabled});
    return (<div className={klass}>foo</div>);
},

我已经从 flow-typed 获得了 libdefs 并且流消息 (flow-typed/npm/classnames_v2.x.x.js) 指向的文件只有 17 行:

// flow-typed signature: 2dfd96b054f56a84f2d08769019d32d7
// flow-typed version: dc0ded3d57/classnames_v2.x.x/flow_>=v0.23.x_<=v0.27.x

type $npm$classnames$Classes =
  string |
  // We need both of these because if we just have the latter it won't accept objects typed
  // explicitly as the former, due to mutation concerns.
  {[className: string]: boolean } |
  {[className: string]: ?boolean } |
  Array<string> |
  false |
  void |
  null

declare module 'classnames' {
  declare function exports(
    ...classes: Array<$npm$classnames$Classes>
  ): string;
}

我的问题是：

此消息的原因和意义是什么？
处理这个问题的正确方法是什么？
为什么 Flow 不清楚如果 panelEnabled 是 boolean 那么 !panelEnabled 也是布尔值。

Answer 1

您似乎安装了错误版本的 classnames 定义文件。

如果您在定义文件中看到注释行

// flow-typed version: dc0ded3d57/classnames_v2.x.x/flow_>=v0.23.x_<=v0.27.x

说明这个定义文件兼容flow >= 0.23 up to flow 0.27.

也许您使用的是过时的流类型版本？尝试用 npm install -g flow-typed.

更新它

我从头开始启动了一个项目来测试你的代码，它工作正常。这是我的 package.json:

{
  "name": "flow-classnames",
  "scripts": { "flow": "flow" },
  "dependencies": {
    "classnames": "^2.2.5"
  },
  "devDependencies": {
    "flow-bin": "^0.35.0"
  }
}

这是我的 index.js

// @flow

const cx = require('classnames');

const test = function(panelEnabled: boolean) {
  const klass = cx({disabled: !panelEnabled});
  return (<div className={klass}>foo</div>);
}

测试步骤：

npm install
flow-typed install
npm run flow

没有错误！

需要对对象文字进行注释的流程

Flow requiring annotation on object literal

reactjs

react-jsx

flowtype

丑陋但不改变方法的API

更短但需要更改 API