创建联合类型的基元和基元数组时的流类型错误

Question

我试图创建一个Transform类型来接受属性的可能值，但我在尝试将string基元与这些基元的数组组合时遇到错误。

export type Transform = {
  matrix?: [number],
  rotate?: number | string,
  scale?: number | [number],
  skew?: string | [string],
  translate?: [number | string],
};

错误是抱怨skew和translate属性说与number中的matrix不兼容，但如果我删除matrix，则错误继续下一行。

这是错误：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ packages/utils/types.js:12:20

string [1] is incompatible with number [2].

 [2]  9│   matrix?: [number],
     10│   rotate?: number | string,
     11│   scale?: number | [number],
 [1] 12│   skew?: string | [string],
     13│   translate?: [number | string],
     14│ };
     15│


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ packages/utils/types.js:13:25

string [1] is incompatible with number [2].

 [2]  9│   matrix?: [number],
     10│   rotate?: number | string,
     11│   scale?: number | [number],
     12│   skew?: string | [string],
 [1] 13│   translate?: [number | string],
     14│ };
     15│



Found 2 errors

该项目托管在GitHub中，您可以在https://github.com/davegomez/silky/tree/master/packages/group中使用此类型检查文件

更新

我开始怀疑问题可能是我在处理参数中的代码之前处理验证的方式，但是我不知道如何重构它以帮助Flow了解发生了什么。

这是使用Type的代码：

// @flow
import type { Transform } from './types';

// Will take the transform object and return the correct transform attribute
// value based on the passed object properties
export default function getTransform(transform: Transform = {}) {
  var { matrix, rotate, scale, skew, translate } = transform;
  var join = x => x.join(', ');
  var attrs = [];

  matrix && attrs.push(`matrix(${join(matrix)})`);
  rotate && attrs.push(`rotate(${rotate})`);
  scale &&
    attrs.push(`scale(${typeof scale === 'number' ? scale : join(scale)})`);
  skew && attrs.push(`skew(${typeof skew === 'string' ? skew : join(skew)})`); // This might be the problem
  translate && attrs.push(`translate(${join(translate)})`); // This might be the problem

  return attrs.length ? attrs.join(' ') : null;
}

我无法发现我正在犯的错误，并会感激任何帮助。

Answer 1

好的，我发现了问题，并且Flow无法推断join函数中param的类型。

将参数类型声明为[any]将解决此问题：

...
var join = (xs: [any]): string => xs.join(', ');
...