Flow + exact types + spread breaks no-unused-prop-types rule

[peterkhayes]

I'm using Flow for a React project, and find the no-unused-prop-types rule very helpful. However, it seems to silently fail when combining two exact types to make a component's props. This situation commonly occurs when working with Redux. For example, spreading exact types for OwnProps, StateProps, and DispatchProps into a new exact type is the recommended practice for typing connected components; see this comment for more info.

Here's a simple example. Even though unusedProp is not used, no error is displayed:

// @flow
import React from 'react';

type UsedProps = {|
  usedProp: number,
|};

type UnusedProps = {|
  unusedProp: number,
|};

type Props = {| ...UsedProps, ...UnusedProps |};

function MyComponent({ usedProp }: Props) {
  return <div>{usedProp}</div>;
}

If I switch to the following, ESLint now reports the error, but Flow (correctly) complains that two exact types cannot be intersected.

type Props = UsedProps & UnusedProps

This error is preventing us from properly typing our connected React components with Flow; I'd be happy to work on it if someone could show me where to look. The code for extracting props from flow types is pretty dense.

[ljharb]

cc @alexzherdev for some direction in the props code :-)

[alexzherdev]

Yeah I don't think we're handling spreads like this.

It looks like, when we're iterating through properties of the ObjectTypeAnnotation here, the iterateProperties helper will see an ObjectTypeSpreadProperty like ...UsedProps here.

From there, I think you should be able to use the getInTypeScope function to resolve the name like "UsedProps" to the actual node that contains the definition of that type. You can try "yielding" the properties of that node to the callback passed to iterateProperties, but I'd also double-check that any duplicates are handled properly (i.e. if both UsedProps and UnusedProps types contain the same property).

[pbondoer]

We are also experiencing this. I'm willing to take a look if nobody's worked on it yet. Any pointers on how I can easily test this?

[peterkhayes]

I have not done anything yet here, so feel free.

[levenecav]

After this update, it stopped working for me. 7.16.0 - everything was fine, after 7.17.0 - below.

type PropsState = {|
    brokenExchangeConnection: boolean
|};

type PropsActions = {|
    updateUserParams: (string, StreamingUserParamsItem) => StreamingUpdateUserParamsAction
|};

type PropsParent = {|
    onTenorChange: (SettingsStreamerAccountsPair, StreamingUserParamsItem) => void
|};

type Props = {|
    ...PropsState,
    ...PropsActions,
    ...PropsParent
|};


51:31  error  'brokenExchangeConnection' PropType is defined but prop is never used  react/no-unused-prop-types
57:23  error  'updateUserParams' PropType is defined but prop is never used          react/no-unused-prop-types
70:20  error  'onTenorChange' PropType is defined but prop is never used             react/no-unused-prop-types

[ljharb]

@levenecav please file a new issue.