javascript - 迭代 HTMLFormElement 元素时正确的 Flow 类型？

Question

我有一个函数，它接受表单元素作为输入，过滤其子元素(删除那些没有可序列化值的元素)，然后返回 {name: value} 形式的对象。

类型检查似乎失败了，因为 Flow 告诉我传递给过滤器函数的每个元素只是一个基本的 HTMLElement。我通过检查 element.type、element.name 等进行过滤，由于 HTMLElement 没有这些属性，因此出现错误。

这两个过滤函数使用包含我期望存在的相关元素(HTMLInputElement、HTMLTextAreaElement 等)的联合类型来进行类型检查。这些都是靠他们自己完成的。只有当它们在过滤器中被调用时我才会收到错误。

该模块的完整代码是:

/* @flow
 * Returns form data as a javascript object. Requires each
 * form element to have a name that corresponds to its value.
 */
type FormChild =
  | HTMLInputElement
  | HTMLSelectElement
  | HTMLTextAreaElement
  | HTMLButtonElement
  | HTMLFieldSetElement;

const isValidTarget = (el: FormChild): boolean => {
  return !(el instanceof HTMLFieldSetElement) &&
         !(el instanceof HTMLButtonElement) &&
         el.name !== '';
};

const isSerializable = (el: FormChild): boolean => {
  return (el.type === 'radio' && el.checked === true) ||
         (el.type === 'checkbox' && el.checked === true) ||
         (el.type !== 'radio' && el.type !== 'checkbox');
};


export default (form: HTMLFormElement): { [elementName: string]: string } => {
  return [...form.elements].filter((el) => isValidTarget(el) && isSerializable(el))
                           .reduce((data, el) => ({ [el.name]: el.value, ...data }), {});
};

我收到的错误全部涉及过滤器中的调用:

HTMLElement 此类型与联合不兼容:HTMLInputElement | HTML选择元素| HTMLTextArea 元素 | HTMLButton 元素 | HTMLFieldSetElement

以及与减少相关的内容:

在 HTMLElement 中找不到属性“name”属性

在 HTMLElement 中找不到属性“value”属性

Answer 1

有两个步骤:

• 将类型从 HTMLElement 转换为 FormChild，
• 从 FormChild 类型中删除 HTMLFieldSetElement，因为它不能具有 value 属性，并且将使用 isValidTarget() 进行过滤.

/* @flow
 * Returns form data as a javascript object. Requires each
 * form element to have a name that corresponds to its value.
 */
type FormChild =
  | HTMLInputElement
  | HTMLSelectElement
  | HTMLTextAreaElement;
//| HTMLButtonElement         <— removed, will be filtered by isValidTarget()
//| HTMLFieldSetElement;      <— removed, will be filtered by isValidTarget()

    const isValidTarget = (el: FormChild): boolean => {
      return !(el instanceof HTMLFieldSetElement) &&
             !(el instanceof HTMLButtonElement) &&
             el.name !== '';
    };

    const isSerializable = (el: FormChild): boolean => {
      return (el.type === 'radio' && el.checked === true) ||
             (el.type === 'checkbox' && el.checked === true) ||
             (el.type !== 'radio' && el.type !== 'checkbox');
    };


    export default (form: HTMLFormElement): { [elementName: string]: string } => {
//                                     `el: any` — prepare to cast
      return [...form.elements].filter((el: any) => isValidTarget(el) && isSerializable(el))
                               .reduce((data, el: FormChild) => ({ [el.name]: el.value, ...data }), {});
//                                           `el: FormChild` — type was casted
    };

使用流量测试:4.0.5