Блог

Я пытаюсь создать Transform тип, который будет принимать возможные значения для атрибута, но я получаю ошибку при попытке объединить string примитивы с массивами этих примитивов.

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

Ошибка заключается в том, что свойства skew и translate говорят, что они несовместимы с number in 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 понять, что происходит.

Это код, использующий тип:

 // @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 amp;amp; attrs.push(`matrix(${join(matrix)})`);
  rotate amp;amp; attrs.push(`rotate(${rotate})`);
  scale amp;amp;
    attrs.push(`scale(${typeof scale === 'number' ? scale : join(scale)})`);
  skew amp;amp; attrs.push(`skew(${typeof skew === 'string' ? skew : join(skew)})`); // This might be the problem
  translate amp;amp; attrs.push(`translate(${join(translate)})`); // This might be the problem

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

Я просто не могу определить ошибку, которую я совершаю, и буду признателен за любую помощь.

Хорошо, я нашел проблему, и она заключается в том, что Flow не смог определить тип параметра в join функции.

Объявление типа параметра как [any] решит проблему:

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