Flow: Define prop types for HTML elements e.g. <input>

Created on 15 Apr 2019 · 4Comments · Source: facebook/flow

I want to be able to describe a component, let's call it CustomInput, which just wraps an HTML <input>, providing it with some pre-set attribute values.

I'd like to say that the Props of CustomInput are the set of props expected by the DOM's <input>, plus a couple custom values.

Currently either this isn't possible, or I've missed the docs after reading through Flow docs.

I would expect something like this would be possible:

/** Props expected by HTML <input>.
 * @see https://github.com/facebook/flow/blob/422f13bee662472f9d44742edf1cee68b7caee15/lib/dom.js#L3239
 */
type InputHTMLAttributes = React.ElementConfig<typeof HTMLInputElement>;


export type TextFieldProps = {
  customProp: string,
} & InputHTMLAttributes;

The error flow (0.90) gives is:

`HTMLInputElement` [1] is incompatible with `React.Component` [2].

   CustomInput.js:9:48
      9│ type InputHTMLAttributes = React.ElementConfig<typeof HTMLInputElement>;
                                                        ^^^^^^^^^^^^^^^^^^^^^^^

References:
   /private/tmp/flow/flowlib_27edb8b7/dom.js:3051:15
   3051│ declare class HTMLInputElement extends HTMLElement {
                       ^^^^^^^^^^^^^^^^ [1]
   /private/tmp/flow/flowlib_27edb8b7/react.js:26:15
     26│ declare class React$Component<Props, State = void> {
                       ^^^^^^^^^^^^^^^ [2]

Missing/Incorrect APIs

DOM

For example, <input> class is defined here: https://github.com/facebook/flow/blob/422f13bee662472f9d44742edf1cee68b7caee15/lib/dom.js#L3239

Relevant documentation

If there's a way to do the above using just the HTMLInputElement that'd be great, but otherwise perhaps DOM.js could include the props as their own type? For comparison/info, that appears to be what is available in TypeScript:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d8748201c7bfc38d70269af3bcaa3a5c380547af/types/react/index.d.ts#L1943

There's also an unanswered question about how to do this on Stack Overflow.

Library definitions

Source