要求对对象文字进行注释的流

Question

假设cx被定义为：

var cx = require('classnames');

…我有以下JSX代码：

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

上述结果导致流程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>);
},

我从流型获得了libdefs，而flow message (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;
}

我的问题是：

1. 这一信息的原因和意义是什么？
2. 处理这件事的正确方法是什么？
3. 为什么不清楚，如果panelEnabled是boolean，那么!panelEnabled也是布尔值。

Answer 1

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

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

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

这表明该定义文件与流>= 0.23和流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

没有错误！